/* ==========================================================================
   Instaladores.es — hoja de estilos del sitio público
   CSS propio, sin frameworks ni dependencias externas: este hosting es
   FTP-only y no queremos build step ni peticiones a CDNs.
   Orden: tokens -> base -> layout -> componentes -> páginas -> responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Azul técnico: identidad principal */
    --azul-950: #071a2e;
    --azul-900: #0e2c4d;
    --azul-800: #13407a;
    --azul-700: #17539b;
    --azul-600: #1c6ac2;
    --azul-100: #e3eefb;
    --azul-50:  #f2f7fd;

    /* Naranja: solo para acciones (CTA), nunca decorativo */
    --naranja-700: #c2530b;
    --naranja-600: #e2600d;
    --naranja-500: #f97316;
    --naranja-50:  #fff4ec;

    /* Neutros */
    --tinta:       #13212f;
    --tinta-media: #47596c;
    --tinta-suave: #6b7c8d;
    --linea:       #e2e8f0;
    --linea-suave: #eef2f6;
    --fondo:       #f5f7fa;
    --blanco:      #ffffff;

    --verde-600: #0f7b52;
    --verde-50:  #e9f6f0;
    --rojo-600:  #c22f2f;
    --rojo-50:   #fdeded;

    --radio-sm: 6px;
    --radio:    10px;
    --radio-lg: 16px;

    --sombra-sm: 0 1px 2px rgba(15, 35, 60, .06);
    --sombra:    0 2px 8px rgba(15, 35, 60, .07);
    --sombra-md: 0 6px 20px rgba(15, 35, 60, .10);

    --ancho: 1140px;

    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--azul-950);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--azul-700); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Foco visible y consistente: accesibilidad de teclado */
:focus-visible {
    outline: 3px solid var(--azul-600);
    outline-offset: 2px;
    border-radius: var(--radio-sm);
}

.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 20px;
}

.contenido { min-height: 50vh; }

.seccion { padding: 48px 0; }
.seccion--ajustada { padding: 32px 0; }
.seccion--clara { background: var(--blanco); }

.seccion__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.seccion__cabecera h2 { margin: 0; }
.seccion__cabecera p { margin: 4px 0 0; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   4. Cabecera y navegación
   -------------------------------------------------------------------------- */
.cabecera {
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    position: sticky;
    top: 0;
    z-index: 50;
}
.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--azul-900);
    text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo__marca { color: var(--azul-800); }
.logo__punto { color: var(--naranja-600); }
.logo__icono {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    background: var(--azul-800);
    color: var(--blanco);
    border-radius: 8px;
    flex-shrink: 0;
}
.logo__icono svg { width: 20px; height: 20px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    padding: 8px 14px;
    border-radius: var(--radio-sm);
    color: var(--tinta-media);
    font-weight: 600;
    font-size: .95rem;
}
.nav a:hover { background: var(--azul-50); color: var(--azul-800); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--azul-800); background: var(--azul-50); }
.nav .boton { margin-left: 8px; }

/* Menú móvil sin JavaScript: checkbox + label */
.nav-toggle { display: none; }
.nav-toggle__boton {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--blanco);
    cursor: pointer;
    color: var(--azul-900);
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    background: var(--azul-800);
    color: var(--blanco);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.boton:hover { background: var(--azul-900); color: var(--blanco); text-decoration: none; }
.boton:active { transform: translateY(1px); }

.boton--cta { background: var(--naranja-600); }
.boton--cta:hover { background: var(--naranja-700); }

.boton--contorno {
    background: transparent;
    border-color: var(--linea);
    color: var(--azul-800);
}
.boton--contorno:hover { background: var(--azul-50); color: var(--azul-900); }

.boton--claro { background: var(--blanco); color: var(--azul-900); }
.boton--claro:hover { background: var(--azul-50); color: var(--azul-950); }

.boton--bloque { width: 100%; }
.boton--sm { padding: 8px 14px; font-size: .875rem; }
.boton svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   6. Formularios
   -------------------------------------------------------------------------- */
.campo { margin-bottom: 16px; }
.campo:last-child { margin-bottom: 0; }

.campo label,
.etiqueta {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tinta-media);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="url"],
select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--blanco);
    font: inherit;
    font-size: .95rem;
    color: var(--tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: #cbd5e1; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul-600);
    box-shadow: 0 0 0 3px var(--azul-100);
}
textarea { min-height: 130px; resize: vertical; }

select {
    appearance: none;
    -webkit-appearance: none;
    /* Flecha dibujada en el propio CSS para no depender de una imagen */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2347596c'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2347596c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 36px;
}

.ayuda { font-size: .825rem; color: var(--tinta-suave); margin-top: 6px; }

.aviso {
    padding: 14px 16px;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    background: var(--blanco);
    margin-bottom: 20px;
}
.aviso--ok    { background: var(--verde-50); border-color: #bfe3d3; color: #0b5c3d; }
.aviso--error { background: var(--rojo-50);  border-color: #f2c2c2; color: #942323; }
.aviso p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Hero + buscador
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(160deg, var(--azul-900) 0%, var(--azul-950) 100%);
    color: var(--blanco);
    padding: 64px 0 72px;
    overflow: hidden;
}
/* Trama técnica sutil de fondo, generada con gradientes (sin imágenes) */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 80% at 70% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 0%, #000 20%, transparent 75%);
    pointer-events: none;
}
.hero > * { position: relative; }

.hero h1 {
    color: var(--blanco);
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    max-width: 20ch;
    margin-bottom: 14px;
}
.hero__entradilla {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .82);
    max-width: 56ch;
    margin-bottom: 28px;
}

.hero--compacto { padding: 40px 0 44px; }
.hero--compacto h1 { max-width: none; margin-bottom: 8px; }

/* Buscador */
.buscador {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    padding: 12px;
    background: var(--blanco);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
    max-width: 860px;
}
.buscador--ancho { grid-template-columns: 1.2fr 1fr 1fr auto; max-width: none; }
.buscador input, .buscador select { border-color: var(--linea-suave); }
.buscador .boton { padding-left: 26px; padding-right: 26px; }

/* Barra de filtros en páginas de resultados */
.filtros {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 14px;
    margin-bottom: 24px;
    box-shadow: var(--sombra-sm);
}
.filtros__campos {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto auto;
    gap: 10px;
    align-items: center;
}

/* Cifras de confianza bajo el hero */
.cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 30px;
}
.cifras__dato { color: rgba(255, 255, 255, .78); font-size: .9rem; }
.cifras__numero {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--blanco);
    letter-spacing: -.02em;
    line-height: 1.1;
}

/* --------------------------------------------------------------------------
   8. Rejillas y tarjetas
   -------------------------------------------------------------------------- */
.rejilla {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.rejilla--sectores { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla--posts    { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

/* Tarjeta de sector */
.sector {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sector:hover {
    text-decoration: none;
    border-color: var(--azul-600);
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}
.sector__icono {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: var(--radio);
    background: var(--azul-50);
    color: var(--azul-700);
}
.sector__icono svg { width: 28px; height: 28px; }
.sector__nombre { font-weight: 700; color: var(--azul-950); margin-bottom: 2px; }
.sector__meta { font-size: .9rem; color: var(--tinta-suave); }
.sector__flecha { margin-left: auto; align-self: center; color: var(--azul-600); }

/* Tarjeta de instalador */
.ficha {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ficha:hover {
    border-color: #c7d7ea;
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}
/* --- Marca de la tarjeta ------------------------------------------------
   Banda superior a todo el ancho. El tamaño del logo lo fija el ALTO de la
   banda, así que un logo apaisado y uno cuadrado ocupan lo mismo; el
   cuadrado simplemente queda centrado. Con `contain` ninguno se deforma ni
   se recorta, sea cual sea su proporción (los hay desde 1:1 hasta 16:1). */

.ficha__marca {
    display: grid;
    place-items: center;
    width: 100%;
    height: 124px;
    padding: 18px 22px;
    background: #fcfdfe;
    border-bottom: 1px solid var(--linea-suave);
    overflow: hidden;
    flex-shrink: 0;
}
.ficha__marca img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Sin logo: distintivo con la inicial, centrado en la misma banda para que
   la tarjeta mantenga exactamente la misma estructura. */
.ficha__inicial {
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    border-radius: var(--radio);
    background: linear-gradient(160deg, var(--azul-700) 0%, var(--azul-900) 100%);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--blanco);
    text-transform: uppercase;
    line-height: 1;
}

.ficha__columna {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ficha__datos { padding: 16px 18px 10px; min-width: 0; }

/* Contacto anclado al fondo de la tarjeta */
.ficha__acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 18px 16px;
}
.ficha__sin-contacto { font-size: .82rem; color: var(--tinta-suave); }

.ficha__nombre { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; line-height: 1.3; }
.ficha__nombre a { color: var(--azul-950); }
/* El enlace cubre toda la tarjeta: objetivo de clic grande y accesible */
.ficha__nombre a::after { content: ""; position: absolute; inset: 0; }
.ficha { position: relative; }

.ficha__ubicacion {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .88rem;
    color: var(--tinta-suave);
    margin-bottom: 10px;
}
.ficha__ubicacion svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Acciones de contacto en icono. El número y la web no se escriben: ocupaban
   mucho, se cortaban en las tarjetas y competían con el nombre. El dato sigue
   siendo accesible (aria-label, title y el propio href tel:/https:). */
.accion {
    position: relative;
    z-index: 1;                 /* por encima del enlace que cubre la tarjeta */
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: var(--blanco);
    color: var(--tinta-media);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.accion svg { width: 18px; height: 18px; }
.accion:hover { text-decoration: none; }
.accion--tel:hover    { background: var(--verde-50);   border-color: #bfe3d3; color: var(--verde-600); }
.accion--web:hover    { background: var(--naranja-50); border-color: #f6d3ba; color: var(--naranja-700); }
.accion--correo:hover { background: var(--azul-50);    border-color: #c7d7ea; color: var(--azul-700); }

/* Avatar: logo real si existe, inicial del nombre si no.
   Solo 312 de 3.475 fichas tienen logo, así que la inicial tiene que
   sostener el diseño ella sola sin parecer un hueco vacío. */
.avatar {
    display: grid;
    place-items: center;
    width: 104px; height: 104px;
    flex-shrink: 0;
    border-radius: var(--radio);
    background: var(--blanco);
    border: 1px solid var(--linea);
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.avatar--inicial {
    background: linear-gradient(160deg, var(--azul-700) 0%, var(--azul-900) 100%);
    border-color: transparent;
    color: var(--blanco);
    font-size: 2.6rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.avatar--grande { width: 132px; height: 132px; border-radius: var(--radio-lg); }
.avatar--grande.avatar--inicial { font-size: 3.4rem; }
.avatar--grande img { padding: 10px; }

/* Etiquetas / chips */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--linea-suave);
    border: 1px solid transparent;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tinta-media);
    line-height: 1.5;
    white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; }
.chip--sector { background: var(--azul-50); color: var(--azul-800); }
.chip--tel    { background: var(--verde-50); color: var(--verde-600); }
.chip--web    { background: var(--naranja-50); color: var(--naranja-700); }

/* Chips que son enlaces (nube de provincias) */
a.chip { position: relative; z-index: 1; }
a.chip:hover { background: var(--azul-100); color: var(--azul-800); text-decoration: none; }
.chip--enlace {
    background: var(--blanco);
    border-color: var(--linea);
    padding: 7px 14px;
    font-size: .875rem;
}
.chip__num { color: var(--tinta-suave); font-weight: 500; }

/* Tarjeta de post */
.post-tarjeta {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.post-tarjeta:hover {
    border-color: #c7d7ea;
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}
.post-tarjeta h3 { margin-bottom: 8px; font-size: 1.08rem; }
.post-tarjeta h3 a { color: var(--azul-950); }
.post-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.post-tarjeta__extracto { color: var(--tinta-media); font-size: .93rem; margin-bottom: 12px; }
.post-tarjeta__fecha {
    margin-top: auto;
    font-size: .82rem;
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. Migas, resultados y paginación
   -------------------------------------------------------------------------- */
.migas {
    font-size: .85rem;
    color: var(--tinta-suave);
    padding: 16px 0 0;
}
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.migas li::after { content: "›"; margin-left: 6px; color: #b9c4d0; }
.migas li:last-child::after { content: ""; }
.migas a { color: var(--tinta-suave); }
.migas a:hover { color: var(--azul-700); }

.resultados__resumen {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--tinta-media);
    font-size: .93rem;
}
.resultados__resumen strong { color: var(--tinta); }

.vacio {
    text-align: center;
    padding: 56px 24px;
    background: var(--blanco);
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
    color: var(--tinta-suave);
}
.vacio h2 { font-size: 1.2rem; }

.paginacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 36px 0 8px;
}
.paginacion a, .paginacion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--blanco);
    color: var(--tinta-media);
    font-size: .92rem;
    font-weight: 600;
}
.paginacion a:hover { border-color: var(--azul-600); color: var(--azul-800); text-decoration: none; }
.paginacion .actual { background: var(--azul-800); border-color: var(--azul-800); color: var(--blanco); }
.paginacion .puntos { border: 0; background: none; min-width: 20px; padding: 0 2px; }
.paginacion .inactivo { opacity: .45; }

/* --------------------------------------------------------------------------
   10. Ficha de instalador (página de detalle)
   -------------------------------------------------------------------------- */
.detalle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
    padding-bottom: 56px;
}

.panel {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    padding: 26px;
    margin-bottom: 20px;
}
.panel:last-child { margin-bottom: 0; }
.panel h2 { font-size: 1.2rem; }

.detalle__cabecera {
    display: flex;
    gap: 24px;
    align-items: center;          /* el logo grande manda: se centra con el título */
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--linea-suave);
}
.detalle__cabecera h1 { margin-bottom: 10px; font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* Acciones de contacto de la ficha: icono + verbo, sin escribir el dato.
   El número o el dominio salen en el title al pasar por encima. */
.contacto-acciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.contacto-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    color: var(--tinta-media);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.contacto-accion svg { width: 22px; height: 22px; }
.contacto-accion:hover { text-decoration: none; transform: translateY(-1px); }
.contacto-accion--tel:hover    { background: var(--verde-50);   border-color: #bfe3d3; color: var(--verde-600); }
.contacto-accion--web:hover    { background: var(--naranja-50); border-color: #f6d3ba; color: var(--naranja-700); }
.contacto-accion--correo:hover { background: var(--azul-50);    border-color: #c7d7ea; color: var(--azul-700); }

.datos { list-style: none; margin: 0; padding: 0; }
.datos li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--linea-suave);
    font-size: .95rem;
}
.datos li:last-child { border-bottom: 0; padding-bottom: 0; }
.datos li:first-child { padding-top: 0; }
.datos__icono { color: var(--azul-600); flex-shrink: 0; margin-top: 2px; }
.datos__icono svg { width: 18px; height: 18px; display: block; }
.datos__etiqueta { display: block; font-size: .78rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

.lateral { position: sticky; top: 88px; }

/* Cuerpo de la descripción: puede venir de WordPress con markup de bloques */
.prosa { color: var(--tinta-media); }
.prosa > *:first-child { margin-top: 0; }
.prosa > *:last-child { margin-bottom: 0; }
.prosa h2 { font-size: 1.3rem; margin-top: 1.6em; }
.prosa h3 { font-size: 1.1rem; margin-top: 1.4em; }
.prosa img { border-radius: var(--radio); margin: 1em 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1em; }
.prosa li { margin-bottom: .4em; }
.prosa a { text-decoration: underline; }
.prosa blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--azul-600);
    color: var(--tinta-media);
    font-style: italic;
}
.prosa table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .93rem; }
.prosa th, .prosa td { border: 1px solid var(--linea); padding: 8px 12px; text-align: left; }
.prosa figure { margin: 1.5em 0; }
.prosa figcaption { font-size: .85rem; color: var(--tinta-suave); margin-top: 6px; }
/* Bloques heredados de Gutenberg (94 fichas migradas los usan) */
.prosa .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 1em; }
.prosa .wp-block-column { flex: 1 1 260px; min-width: 0; }
.prosa .wp-block-image { margin: 1.2em 0; }
.prosa .aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.prosa .alignright { float: right; margin: 0 0 1em 1.5em; }
.prosa .alignleft { float: left; margin: 0 1.5em 1em 0; }

/* El contenido migrado puede traer anchos/colores en línea que rompen el móvil */
.prosa iframe, .prosa video, .prosa embed { max-width: 100%; }

/* Artículo del blog */
.articulo { max-width: 760px; margin: 0 auto; }
.articulo__cabecera { margin-bottom: 28px; }
.articulo__cabecera h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.articulo__fecha { color: var(--tinta-suave); font-size: .9rem; }

/* --------------------------------------------------------------------------
   10 bis. Formulario de presupuesto
   -------------------------------------------------------------------------- */
.presupuesto { max-width: 760px; margin: 0 auto; }

/* Indicador de paso */
.pasos {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex-wrap: wrap;
}
.pasos li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tinta-suave);
}
.pasos li span {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--linea-suave);
    color: var(--tinta-suave);
    font-size: .82rem;
}
.pasos li + li::before { content: "›"; color: #b9c4d0; margin-right: 4px; }
.pasos .pasos--actual { color: var(--azul-900); }
.pasos .pasos--actual span { background: var(--azul-800); color: var(--blanco); }
.pasos .pasos--hecho span { background: var(--verde-600); color: var(--blanco); }

/* Cada pregunta del cuestionario */
.pregunta {
    border: 0;
    border-top: 1px solid var(--linea-suave);
    margin: 0;
    padding: 20px 0 0;
}
.pregunta:first-of-type { border-top: 0; padding-top: 0; }
.pregunta legend {
    padding: 0;
    font-weight: 700;
    color: var(--azul-950);
    font-size: 1.02rem;
    margin-bottom: 10px;
}
.pregunta .ayuda { margin: -4px 0 12px; }
.pregunta__obligatorio { color: var(--rojo-600); }
.pregunta__aviso {
    margin: 8px 0 0;
    color: var(--rojo-600);
    font-size: .86rem;
    font-weight: 600;
}
.pregunta--error legend { color: var(--rojo-600); }

/* Opciones tipo radio/casilla con toda la fila clicable */
.opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}
.opciones--columnas { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--blanco);
    cursor: pointer;
    font-size: .93rem;
    transition: border-color .12s ease, background .12s ease;
}
.opcion:hover { border-color: var(--azul-600); background: var(--azul-50); }
.opcion input { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--azul-700); }
.opcion:has(input:checked) {
    border-color: var(--azul-700);
    background: var(--azul-50);
    box-shadow: inset 0 0 0 1px var(--azul-700);
}

/* Empresas propuestas */
.empresas { display: grid; gap: 10px; }
.empresa {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.empresa:hover { border-color: var(--azul-600); }
.empresa:has(input:checked) { border-color: var(--azul-700); background: var(--azul-50); }
.empresa input { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--azul-700); }
.empresa .avatar { width: 52px; height: 52px; }
.empresa__datos { min-width: 0; }
.empresa__nombre { display: block; font-weight: 700; color: var(--azul-950); }
.empresa__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .86rem;
    color: var(--tinta-suave);
}
.empresa__meta svg { width: 13px; height: 13px; }

.consentimiento {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    font-size: .88rem;
    color: var(--tinta-media);
    cursor: pointer;
}
.consentimiento input { width: auto; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--azul-700); }

.presupuesto__acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   11. Franja CTA y pie
   -------------------------------------------------------------------------- */
.franja {
    background: var(--azul-900);
    color: var(--blanco);
    border-radius: var(--radio-lg);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.franja h2 { color: var(--blanco); margin-bottom: 6px; }
.franja p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 60ch; }

.pie {
    background: var(--azul-950);
    color: rgba(255, 255, 255, .72);
    padding: 48px 0 28px;
    margin-top: 56px;
    font-size: .92rem;
}
.pie__rejilla {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pie h3 {
    color: var(--blanco);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 14px;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; }
.pie a { color: rgba(255, 255, 255, .72); }
.pie a:hover { color: var(--blanco); }
.pie .logo { color: var(--blanco); }
.pie .logo__marca { color: var(--blanco); }
.pie__legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 22px;
    font-size: .85rem;
    color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .detalle { grid-template-columns: 1fr; }
    .lateral { position: static; }
    .pie__rejilla { grid-template-columns: 1fr 1fr; }
    .filtros__campos { grid-template-columns: 1fr 1fr; }
    .buscador, .buscador--ancho { grid-template-columns: 1fr 1fr; }
    .buscador .boton { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .nav-toggle__boton { display: inline-flex; }
    .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 20px 16px;
        background: var(--blanco);
        border-bottom: 1px solid var(--linea);
        box-shadow: var(--sombra);
    }
    .nav-toggle:checked ~ .nav { display: flex; }
    .nav a { padding: 12px 14px; }
    .nav .boton { margin: 6px 0 0; }
    .cabecera__interior { position: relative; }

    .hero { padding: 44px 0 48px; }
    .buscador, .buscador--ancho, .filtros__campos { grid-template-columns: 1fr; }
    .cifras { gap: 24px; }
    .cifras__numero { font-size: 1.4rem; }
    .franja { padding: 28px 24px; }
    .panel { padding: 20px; }
    .seccion { padding: 36px 0; }
    .detalle__cabecera { flex-direction: column; gap: 14px; }
}

@media (max-width: 520px) {
    .pie__rejilla { grid-template-columns: 1fr; gap: 24px; }
    .rejilla { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Impresión: fuera cromo, solo contenido */
@media print {
    .cabecera, .pie, .lateral, .franja, .paginacion, .filtros { display: none; }
    body { background: var(--blanco); }
    .panel { border: 0; box-shadow: none; padding: 0; }
}