/* ===========================================================================
   CleanVip — capa de ajustes sobre style.css
   ---------------------------------------------------------------------------
   Se carga DESPUES de style.css. Toma la paleta y las reglas de la
   presentacion comercial, para que la web y el deck hablen el mismo idioma.
   ======================================================================== */

/* El ancho de las cajas de contenido. Vive en una variable porque estaba
   escrito veinte veces y los escalones de pantalla grande tienen que
   cambiarlo en TODAS a la vez: si una se queda corta, se desalinea con
   las de arriba y abajo y se nota enseguida. */
:root {
    /* FLUIDA, no por escalones. Con saltos fijos (min-width: 1920) el sitio
       no crecia en un monitor de 27": el navegador y su barra lateral se
       comen ~60 px y el area util queda en ~1860, justo por debajo del
       salto. Asi crece con lo que HAY, sea cual sea el ancho:
         1440 -> 1180   1600 -> 1312   1860 -> 1525   2560 -> 1660 (tope) */
    --caja: clamp(1180px, 82vw, 1660px);
    --ink:    #243B4A;   /* texto principal    */
    --ink2:   #54636E;   /* texto secundario   */
    --ink3:   #8695A0;   /* texto terciario    */
    --bg:     #F4F6F7;   /* fondo de secciones */
    --line:   #E4E9EC;   /* bordes finos       */
    --blue:   #0E4A66;   /* azul profundo      */
    --blue2:  #12658C;   /* azul medio         */
    --acc-b:  #2CB4E8;   /* celeste, solo acento */
    --acc-g:  #8AC057;   /* verde claro, solo acento */
    /* El verde de marca da 2,15:1 sobre blanco: no se puede leer como texto.
       Este es el mismo tono oscurecido hasta 4,51:1, el minimo legible. */
    --verde-txt: #558325;
    --velo:    6, 30, 44;  /* base de los velos sobre foto */
}


/* ---------------------------------------------------------------------------
   1. FONDO DE LA PORTADA
   El video ya no vive en el servidor: lo sirve Vimeo en modo fondo, sin
   controles, sin barra y sin logo. Mientras carga —y siempre en movil— se ve
   la imagen de portada, que pesa 55 KB.
   ------------------------------------------------------------------------ */

.fondo-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: #0B1620 url(../img/hero-poster.webp) center / cover no-repeat;
}

/* El reproductor es 16:9 y el hueco no. Se agranda hasta cubrirlo por los dos
   lados y lo que sobra se recorta, igual que hacia object-fit: cover. */
/* El iframe nace invisible: hasta que el reproductor de Vimeo no da senales
   de vida se ve la fotografia de portada, y entonces se funde encima. Antes
   aparecia de golpe y con el primer fotograma congelado. Si Vimeo no
   responde —bloqueo, video privado— no se descubre nunca y se queda la
   fotografia, que es la salida correcta. */
.fondo-hero iframe {
    opacity: 0;
    transition: opacity 1.4s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    min-width: 177.78vh;
    min-height: 56.25vw;
    border: 0;
    pointer-events: none;
}

/* La clase la pone javascript.js/video.js en cuanto el reproductor de Vimeo
   manda su primer mensaje, que es la senal de que hay video de verdad detras
   y no una pagina de error. */
.fondo-hero--listo iframe { opacity: 1; }


/* ---------------------------------------------------------------------------
   2. TARJETAS DE SERVICIO
   Cuatro unidades de negocio de igual peso, como en la lamina 04 del deck:
   contenido paralelo, columnas iguales, sin jerarquias.

   El cambio de fondo: antes el titulo caia encima de la persona de la foto y
   no se leia ni una cosa ni la otra. Ahora el texto vive en una banda oscura
   al pie y la foto queda limpia donde esta el sujeto, que es la regla firme
   del deck.
   ------------------------------------------------------------------------ */

.services_cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.services-wrapper { width: 100%; }

.services__cards-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
    max-width: var(--caja);
    margin: 0 auto;
    padding: 0 1rem;
}

/* style.css declara .service__card nueve veces con reglas que se contradicen:
   el titulo en posicion absoluta y centrado, la descripcion y el enlace
   ocultos hasta pasar el raton, y el enlace con su propio posicionamiento.
   Los selectores de aqui llevan el contenedor delante para superarlas por
   especificidad sin recurrir a !important. */

.services__cards-card .service__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 380px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background-color: var(--blue);
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 18px rgba(20, 50, 70, .10);
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
}

/* El velo que traia style.css cubria la tarjeta entera con negro al 50%.
   Se anula y se sustituye por un degradado que oscurece solo el pie, donde
   va el texto, y deja limpia la zona donde esta la persona. */
.services__cards-card .service__card::before {
    display: none;
}

.services__cards-card .service__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        to top,
        rgba(var(--velo), .95)   0%,
        rgba(var(--velo), .88)  30%,
        rgba(var(--velo), .40)  58%,
        rgba(var(--velo), .05) 100%);
    transition: opacity .25s ease;
}

/* Titulo: estaba centrado en absoluto y desaparecia al pasar el raton. */
.services__cards-card .service__card h3,
.services__cards-card .service__card:hover h3,
.services__cards-card .service__card:not(:hover) h3 {
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin: 0 0 .45rem;
    padding: 0 1.2rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-align: left;
    text-wrap: balance;
}

/* Descripcion y enlace: estaban ocultos hasta pasar el raton. Ahora se ven
   siempre, que es lo que permite entender la tarjeta de un vistazo. */
.services__cards-card .service__card p,
.services__cards-card .service__card .service__description,
.services__cards-card .service__card:hover p {
    position: relative;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    margin: 0 0 .9rem;
    padding: 0 1.2rem;
    font-size: .83rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .84);
    text-align: left;
}

.services__cards-card .service__card .Learnmore,
.services__cards-card .service__card:hover .Learnmore {
    position: relative;
    z-index: 1;
    bottom: auto;
    left: auto;
    transform: none;
    visibility: visible;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    margin: 0 1.2rem .9rem;
    padding: 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc-b);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

/* style.css aplicaba scale(1.1) al pasar el raton, que recortaba la foto y
   descuadraba la rejilla. Se cambia por una elevacion sobria. */
.services__cards-card .service__card:hover {
    transform: translateY(-4px);
    background-color: var(--blue);
    box-shadow: 0 14px 30px rgba(20, 50, 70, .18);
}
.services__cards-card .service__card:hover::after { opacity: .93; }
.services__cards-card .service__card:hover .Learnmore {
    color: #fff;
    border-bottom-color: var(--acc-b);
}

/* Titulo de la seccion. Arrastraba dos errores del CSS original:
   en escritorio, un left:20rem que lo empujaba fuera de la pagina; y por
   debajo de 981 px, un posicionamiento absoluto con translate(-50%,-50%)
   sobre left:5%, que lo sacaba por el lado izquierdo de la pantalla y dejaba
   el titulo cortado a media palabra. */
.services__cards-info h2,
.services__cards-info .services__cards-info--outside-980 {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    visibility: visible;
    margin: 0 auto 1.75rem;
    padding: 0 1rem;
    text-align: center;
}

/* Por debajo de 981 px el CSS original ocultaba el titulo real y lo sustituia
   por la palabra "Servicios" mediante un pseudo-elemento. Se descarta: el
   titulo completo cabe perfectamente y dice mucho mas. */
.services__cards-info h2::before {
    content: none;
}

@media (max-width: 1000px) {
    .services__cards-card { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
}
@media (max-width: 560px) {
    .services__cards-card { grid-template-columns: 1fr; max-width: 340px; }
    .service__card { min-height: 300px; }
}


/* ---------------------------------------------------------------------------
   3. FORMULARIO DE CONTACTO
   Los campos no tenian ni una sola regla: se veian con la apariencia por
   defecto del navegador, distinta en cada equipo, y estirados a todo el ancho
   de la pantalla.
   ------------------------------------------------------------------------ */

.footer.container { background: var(--bg); padding: 3.5rem 1.25rem 0; }

.footer > h2 {
    max-width: 720px;
    margin: 0 auto .35rem;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--ink);
    text-align: center;
}

.formulario {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.formulario fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.formulario legend.campos {
    display: block;
    width: 100%;
    margin: 0 0 1.75rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink2);
    text-align: center;
}

.contenedor-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.campos--ancho { grid-column: 1 / -1; }

.formulario .campos {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0;
    text-align: left;
}

.formulario label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
}

.formulario .pista {
    font-weight: 400;
    color: var(--ink3);
}

.formulario .input-text {
    width: 100%;
    min-height: 50px;
    padding: .8rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid #CBD5DB;
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.formulario .input-text::placeholder { color: #9DACB6; }
.formulario .input-text:hover { border-color: #A9B9C3; }
.formulario .input-text:focus {
    outline: none;
    border-color: var(--blue2);
    box-shadow: 0 0 0 3px rgba(44, 180, 232, .22);
}
.formulario textarea.input-text {
    min-height: 130px;
    resize: vertical;
    line-height: 1.55;
}

.formulario .input-file {
    width: 100%;
    padding: .9rem 1rem;
    font-family: inherit;
    font-size: .92rem;
    color: var(--ink2);
    background: #fff;
    border: 1px dashed #B9C7D0;
    border-radius: 10px;
    cursor: pointer;
}
.formulario .input-file:hover { border-color: var(--blue2); }

/* Campo trampa contra robots: fuera de la vista, pero sin display:none,
   porque algunos robots ignoran los campos ocultos de esa forma. */
.no-rellenar {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulario .alinear-derecha {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.6rem;
}

.formulario .boton {
    min-height: 52px;
    padding: 0 2.2rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--blue);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .2s ease, transform .1s ease;
}
.formulario .boton:hover { background: var(--blue2); }
.formulario .boton:active { transform: translateY(1px); }

.footer-txt {
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
    font-size: .84rem;
    color: var(--ink3);
    text-align: center;
}

@media (max-width: 640px) {
    .contenedor-campos { grid-template-columns: 1fr; }
    .formulario .alinear-derecha { justify-content: stretch; }
    .formulario .boton { width: 100%; }
}


/* ---------------------------------------------------------------------------
   4. ACCESIBILIDAD
   ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
label:focus-visible {
    outline: 3px solid var(--acc-b);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fondo-hero iframe { display: none; }
    .service__card { transition: none; }
}


/* ---------------------------------------------------------------------------
   7. CLIENTES — carrusel continuo
   Los 9 logos verificados del deck en una cinta que avanza sola, suave y
   constante. El cursor encima la frena con desaceleracion progresiva y se
   puede arrastrar (javascript.js/inicio.js). El bucle no tiene costura:
   el HTML trae el grupo de logos dos veces y la cinta se desplaza justo el
   ancho de un grupo. Los logos van atenuados a gris y recuperan su color al
   pasar el cursor, para que la fila se lea como un conjunto sereno y no como
   una feria de colores.
   ------------------------------------------------------------------------ */

.clientes {
    background: #fff;
    /* Arriba se recorta a la mitad para que las cifras y el carrusel entren
       en la misma pantalla: entre las dos secciones habia 163 px muertos, que
       eran los 67 de abajo de pilares mas los 96 de aqui. Abajo se recorta
       menos, que ahi separa de los testimonios y no estorba. */
    padding: 3rem 0 4.5rem;
}

.clientes-cabecera {
    text-align: center;
    padding: 0 1.25rem;
    margin-bottom: 2.6rem;
}

.kicker {
    margin: 0 0 .55rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--blue2);
}

.clientes-cabecera h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}
.clientes-cabecera h2 b { font-weight: 700; color: var(--blue2); }

.marquee {
    position: relative;
    overflow: hidden;
    padding: 1rem 0;             /* que los logos no rocen el borde */
    cursor: grab;
    touch-action: pan-y;   /* el dedo puede seguir bajando por la pagina */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee.agarrando { cursor: grabbing; }

.marquee-pista {
    display: flex;
    width: max-content;
    will-change: transform;
    /* respaldo por si el JS no llega a ejecutarse; el JS lo apaga y toma el control */
    animation: marquesina 46s linear infinite;
}
.marquee:hover .marquee-pista { animation-play-state: paused; }

.marquee-grupo {
    display: flex;
    align-items: center;
    gap: clamp(2.8rem, 6vw, 4.6rem);
    padding-right: clamp(2.8rem, 6vw, 4.6rem);
}

/* Cada logo enlaza al sitio del cliente en una pestaña nueva. El enlace es el
   objetivo tactil y de foco; la imagen dentro no intercepta nada. */
.marquee-grupo a {
    display: flex;
    align-items: center;
    -webkit-user-drag: none;
}
.marquee-grupo a:focus-visible {
    outline: 2px solid var(--acc-b);
    outline-offset: 6px;
    border-radius: 4px;
}

.marquee-grupo img {
    height: 74px;                /* mas grosor: se leian pequenos */
    width: auto;
    max-width: 230px;
    object-fit: contain;
    filter: grayscale(1) opacity(.68);
    transition: filter .35s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.marquee-grupo img:hover,
.marquee-grupo a:hover img,
.marquee-grupo a:focus-visible img { filter: none; }

@keyframes marquesina {
    to { transform: translateX(-50%); }
}

/* con "menos movimiento" activado: tira quieta y desplazable */
.marquee.sin-animacion { overflow-x: auto; cursor: default; touch-action: auto; }
.marquee.sin-animacion .marquee-pista { animation: none; }

@media (max-width: 640px) {
    .clientes { padding: 3.2rem 0 3.6rem; }
    .marquee-grupo img { height: 42px; max-width: 140px; }
}


/* ---------------------------------------------------------------------------
   8. TESTIMONIOS — baraja sobre un mar de citas
   Panel azul profundo del deck. Detras, fragmentos textuales de las propias
   citas derivan muy despacio a baja opacidad; delante, las tres citas en
   tarjetas superpuestas que rotan cada 3 segundos. El cursor encima pausa,
   arrastrar pasa la cita, y los puntos saltan a una concreta.
   ------------------------------------------------------------------------ */

.testimonios-mar {
    position: relative;
    overflow: hidden;
    padding: 4.6rem 1.25rem 5rem;
    background: linear-gradient(168deg, #0C3E58 0%, var(--blue) 48%, #082B3D 100%);
}

.mar-fondo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
}
.mar-fondo span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: calc(.9rem * var(--s, 1));
    font-style: italic;
    white-space: nowrap;
    color: rgba(255, 255, 255, .09);
    animation: deriva var(--d, 30s) ease-in-out var(--r, 0s) infinite alternate;
}
@keyframes deriva {
    to { transform: translate3d(32px, -18px, 0); }
}
@media (max-width: 720px) {
    .mar-fondo span:nth-child(even) { display: none; }
}

.testimonios-caja {
    position: relative;
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
}
.kicker-claro { color: var(--acc-b); }
.testimonios-caja h2 {
    margin: 0 0 2.4rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}
.testimonios-caja h2 b { font-weight: 700; color: var(--acc-b); }

.baraja {
    position: relative;
    cursor: grab;
    touch-action: pan-y;
}
.baraja.agarrando { cursor: grabbing; }

.nota {
    position: absolute;
    top: 0; left: 0; right: 0;
    margin: 0;
    background: #fff;
    color: var(--ink);
    text-align: left;
    border-radius: 18px;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 24px 60px rgba(3, 18, 28, .45);
    transition: transform .6s cubic-bezier(.22, .9, .3, 1), opacity .45s ease;
    will-change: transform, opacity;
}
.nota::before {
    content: "\201C";
    position: absolute;
    top: .35rem; left: 1.05rem;
    font-size: 4.4rem;
    line-height: 1;
    font-weight: 700;
    color: var(--acc-b);
    opacity: .3;
    pointer-events: none;
}
.nota-cita {
    margin: 0 0 1.1rem;
    padding-top: .8rem;
    font-size: 1.02rem;
    line-height: 1.6;
}
.nota footer {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    border-top: 1px solid var(--line);
    padding-top: .85rem;
}
.nota footer strong { color: var(--blue2); font-size: .95rem; }
.nota footer span   { color: var(--ink3);  font-size: .8rem; }

/* la pila: frente, detras y al fondo */
.nota.pos-0 { transform: translateY(0)    scale(1);    opacity: 1;   z-index: 3; }
.nota.pos-1 { transform: translateY(28px) scale(.94);  opacity: .45; z-index: 2; }
.nota.pos-2 { transform: translateY(52px) scale(.885); opacity: .22; z-index: 1; }

.baraja-puntos {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 4;
}
.baraja-puntos button {
    width: 26px; height: 5px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: background .25s ease, width .25s ease;
}
.baraja-puntos button.activo { background: var(--acc-b); width: 42px; }
.baraja-puntos button:focus-visible { outline: 2px solid var(--acc-b); outline-offset: 3px; }

@media (max-width: 560px) {
    .testimonios-mar { padding: 3.4rem 1.1rem 3.8rem; }
    .nota { padding: 1.5rem 1.35rem 1.2rem; }
    .nota-cita { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mar-fondo span { animation: none; }
    .nota { transition: none; }
    .marquee-pista { animation: none; }
}


/* ---------------------------------------------------------------------------
   9. PILARES — cuatro cifras, que cuentan solas
   Eran cuatro tarjetas con iconos de libreria y dos palabras dentro. Tres
   cosas fallaban a la vez: los iconos eran de plantilla en una pagina que se
   apoya en fotos reales, las tarjetas no decian nada, y el bloque estaba
   centrado y simetrico entre tres secciones que no lo son.

   Ahora son cuatro cifras. El numero hace el trabajo, asi que no hace falta
   icono ninguno, y la seccion baja de 537 a poco mas de 370 px.
   ------------------------------------------------------------------------ */

/* Menos abajo que arriba: lo de abajo solo separa del carrusel de clientes,
   que trae su propio aire, y las dos secciones tienen que caber juntas en
   una pantalla. */
.pilares--claro { padding: 3.8rem clamp(1rem, 4vw, 3rem) 2.2rem; }

.pilares-caja { max-width: var(--caja); margin: 0 auto; }
.pilares-caja > .kicker { text-align: left; }
.pilares-caja h2 {
    margin: 0 0 2.6rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}
.pilares-caja h2 b { font-weight: 700; color: var(--blue2); }

/* Sin gap: la separacion la hace la linea vertical, que ademas alinea las
   cuatro columnas de texto sin que haga falta ningun relleno. */
.pilares-reja {
    display: grid;
    /* cinco desde que se sumo la accidentabilidad; auto-fit para que
       no haya que tocar esto la proxima vez que cambie el numero */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.pilar-dato { padding: 0 1.6rem; border-left: 2px solid var(--line); }
.pilar-dato:first-child { padding-left: 0; border-left: 0; }

.pilar-cifra {
    /* En bloque, no en linea: asi la caja ocupa ya toda la columna y el numero
       puede crecer de "0" a "100" mientras cuenta sin mover nada de sitio. */
    display: block;
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--blue2);
    font-variant-numeric: tabular-nums;
}
.pilar-dato h3 { margin: .7rem 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.pilar-dato p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }

@media (max-width: 900px) {
    .pilares-reja { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; }
    .pilar-dato:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
    .pilares-reja { grid-template-columns: 1fr; row-gap: 1.8rem; }
    .pilar-dato { padding: 0; border-left: 0; }
}


/* ---------------------------------------------------------------------------
   10. BANDA VIVA — fotos del equipo en fundido entre clientes y testimonios
   Cuatro fotos reales que se funden una en otra cada 7 segundos. El velo
   superior nace blanco (el color de la seccion anterior) y el inferior muere
   en el azul con el que arranca testimonios: el cambio de seccion deja de
   notarse.
   ------------------------------------------------------------------------ */

.banda-viva { position: relative; height: 46vh; min-height: 340px; overflow: hidden;
  background: #0C3E58; }
/* El lienzo sobresale un 25% por arriba y por abajo: es el margen que el
   parallax necesita para moverse sin ensenar los bordes de la foto. */
.banda-lienzo { position: absolute; inset: -25% 0; will-change: transform; }
.banda-capa { position: absolute; inset: 0; background-size: cover;
  background-position: center; opacity: 0;
  animation: bandafundido 28s linear infinite; }
.banda-capa:nth-child(1) { animation-delay: 0s; }
.banda-capa:nth-child(2) { animation-delay: 7s; }
.banda-capa:nth-child(3) { animation-delay: 14s; }
.banda-capa:nth-child(4) { animation-delay: 21s; }
@keyframes bandafundido {
  0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; }
  32% { opacity: 0; } 100% { opacity: 0; }
}
.banda-viva::after { content: ""; position: absolute; inset: 0;
  /* velo ligero: el blanco y el azul viven solo en los bordes; en el centro
     la foto queda casi limpia para que las personas se vean bien */
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 10%,
              rgba(6,30,44,.06) 45%, rgba(6,30,44,.30) 68%, #0C3E58 98%); }
.banda-kicker { position: absolute; left: 50%; bottom: 12%;
  transform: translateX(-50%); z-index: 2; margin: 0; color: #fff;
  letter-spacing: .3em; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; opacity: .85; white-space: nowrap; }

/* la banda ya funde hacia el azul: testimonios no necesita tanto aire arriba */
.testimonios-mar { padding-top: 3.4rem; }

@media (max-width: 640px) { .banda-viva { height: 34vh; min-height: 240px; } }
@media (prefers-reduced-motion: reduce) {
  .banda-capa { animation: none; }
  .banda-capa:first-child { opacity: 1; }
}


/* ---------------------------------------------------------------------------
   11. COSTURAS ENTRE SECCIONES, FLECHA Y DESPLAZAMIENTO
   Las uniones entre secciones no quedan a corte seco:
     servicios -> pilares      el gris perla nace del blanco...
     pilares -> clientes       ...y muere de vuelta en blanco
     clientes -> testimonios   la banda de fotos (seccion 10)
     testimonios -> contacto   el azul muere en el gris del pie
   La portada NO lleva fundido, por decision del cliente: el video debe
   abarcar la pantalla completa y morir limpio donde empieza servicios.
   La flecha pasa de un icono de 150 px a un anillo fino con un chevron que
   flota sobre el video, y los saltos internos se deslizan en vez de saltar.
   ------------------------------------------------------------------------ */

.header { position: relative; }
/* La portada ocupa la pantalla COMPLETA: el CSS viejo le daba solo el 80%
   del alto y la seccion siguiente asomaba por abajo. El margin era la franja
   gris de 20 px. En moviles, svh descuenta la barra del navegador. */
.header-content { margin-bottom: 0; min-height: 100vh; }
@supports (min-height: 100svh) {
    .header-content { min-height: 100svh; }
}

/* servicios -> equipo (gris) -> cifras (blanco) -> clientes (blanco).
   Planos, sin degradado: el corte entre el gris del equipo y el blanco de
   las cifras separa las dos secciones sin necesidad de linea, y las cifras
   siguen en blanco hasta clientes, que tambien lo es. */
.pilares--claro { background: #fff; }

/* testimonios -> contacto */
.testimonios-mar::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,244,244,0) 0%, #f4f4f4 100%); }
.testimonios-caja { z-index: 1; }

/* la flecha: anillo fino con chevron flotando sobre el video.
   La regla del CSS viejo que la posicionaba vive dentro de un media query que
   en escritorio no aplica (quedaba static, sumando 48 px de alto al header),
   asi que aqui se ancla de forma explicita, cerca del borde inferior, donde
   el video oscuro la hace destacar. */
.flecha { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 42px; z-index: 3; }
/* Solo la flecha: sin anillo, sin fondo y sin difuminado. Sobre el video
   oscuro basta con la sombra para que se lea, y asi no compite con nada. */
.flecha .btn-1 {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; margin: 0;
    border: 0; border-radius: 50%;
    color: rgba(255,255,255,.88); font-size: 1.9rem;
    background: none;
    filter: drop-shadow(0 2px 10px rgba(6, 30, 44, .55));
    animation: flotar 2.6s ease-in-out infinite;
    transition: color .25s ease, transform .25s ease;
}
.flecha .btn-1:hover { color: #fff; }
.flecha .btn-1 i { font-size: 1.9rem; line-height: 1; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* los saltos internos (la flecha, anclas) se deslizan en vez de saltar */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .flecha .btn-1 { animation: none; }
}


/* ---------------------------------------------------------------------------
   12. PAGINAS DE SERVICIO
   Las cuatro unidades comparten estructura y lenguaje con la portada. Antes
   eran un callejon sin salida: menu que solo listaba servicios, dos parrafos
   genericos, un video y un pie vacio. Sin forma de cotizar ni de volver.
   ------------------------------------------------------------------------ */

/* --- portada de la pagina --- */
.hero-servicio {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}
.hero-servicio::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,30,44,.55) 0%,
                rgba(6,30,44,.30) 45%, rgba(6,30,44,.88) 100%);
}
.hero-servicio-txt {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--caja);
    margin: 0 auto;
    padding: 0 1.5rem 3.4rem;
}
.hero-servicio-txt h1 {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #fff;
    text-wrap: balance;
}
.hero-servicio-txt h1 b { font-weight: 700; color: var(--acc-b); }

/* el menu del CSS viejo se posicionaba absoluto sobre el banner: aqui se
   mantiene arriba y por encima del velo */
.hero-servicio .menu { z-index: 2; }

/* --- entradilla --- */
.servicio-intro {
    max-width: 760px;
    margin: 0 auto;
    padding: 3.6rem 1.5rem 1rem;
}
.servicio-lead {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--ink2);
    text-wrap: pretty;
}

/* --- que incluye --- */
.servicio-incluye { padding: 2.6rem 1.5rem 3.8rem; }
.incluye-caja { max-width: var(--caja); margin: 0 auto; }
.incluye-caja h2 {
    margin: 0 0 2rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}
.incluye-caja h2 b { font-weight: 700; color: var(--blue2); }
.incluye-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.incluye-lista li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.15rem 1.35rem;
    background: #fff;
    font-size: .95rem;
    color: var(--ink);
}
.incluye-lista i { color: var(--acc-b); font-size: 1.05rem; flex: none; }
@media (max-width: 900px) { .incluye-lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .incluye-lista { grid-template-columns: 1fr; } }

/* --- video ---
   OCULTO, no borrado. El HTML se queda tal cual en las cuatro paginas de
   servicio para poder volver atras con una linea, pero no se muestra: en su
   lugar van las fotos del trabajo real.

   display:none y no visibility ni opacidad: asi el iframe de YouTube ni
   siquiera se pide, que era media pagina de peso y una peticion a un tercero
   por cada visita. Un video escondido pero cargado seria lo peor de los dos
   mundos. */
.servicio-video { display: none; }

.servicio-video--visible {
    display: block;
    background: linear-gradient(180deg, #fff 0%, var(--bg) 120px,
                var(--bg) calc(100% - 120px), #fff 100%);
    padding: 3.6rem 1.5rem;
}
.video-marco {
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(20,50,70,.16);
    background: #0B1620;
}
.video-marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- que incluye, en tarjetas con foto ---
   Antes eran seis vinetas sueltas. Ahora cada una lleva su foto del trabajo
   propio y una frase: es la estructura que usa la competencia —tarjetas con
   imagen por tipo— con lo que ellos no ponen dentro.

   El texto va DEBAJO de la foto y no encima: encima obliga a oscurecer la
   imagen para que se lea, y aqui la foto es la prueba, no el decorado. */
.incluye-lead {
    max-width: 62ch;
    margin: 0 0 2rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink2);
    text-wrap: pretty;
}
.incluye-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.incluye-tarjeta {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.33, 0, .25, 1),
                box-shadow .35s cubic-bezier(.33, 0, .25, 1);
}

/* ---- PROVISIONAL: el numero de cada foto ----
   Mientras se reemplazan las fotos, cada tarjeta lleva un circulo con su
   numero para poder decir "cambia la 4" sin ambiguedad. Al cambiar una foto
   se le quita el atributo data-foto a esa tarjeta y el circulo desaparece
   solo; cuando no quede ninguno, este bloque entero se puede borrar y no
   deja rastro.

   OJO: esto NO debe subirse al servidor con numeros puestos. */
.incluye-tarjeta[data-foto]::after {
    content: attr(data-foto);
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* naranja y no azul de marca: tiene que leerse como una nota de trabajo,
       no como parte del diseño */
    background: #E8590C;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* El hueco de las tarjetas sin foto honesta. No se pone una foto de otra
   cosa: una imagen de oficina bajo el titulo "podas" seria mentira. Asi
   ademas se ve de un vistazo que sesion de fotos falta. */
.incluye-hueco {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(-45deg, #EEF2F5 0 12px, #E6ECF1 12px 24px);
    color: #8FA3B0;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.incluye-tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(20, 50, 70, .16);
}
.incluye-tarjeta img {
    width: 100%;
    /* height:auto es imprescindible, no adorno: el atributo height="720" del
       HTML cuenta como estilo, y mientras la altura no sea automatica el
       aspect-ratio no manda. Sin esto la caja quedaba de 379x720 y object-fit
       recortaba una tira vertical de una foto que ya venia en 4:3. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.incluye-txt { padding: 1.1rem 1.15rem 1.3rem; }
.incluye-txt h3 {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
}
.incluye-txt p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink2);
    text-wrap: pretty;
}
@media (max-width: 900px) {
    .incluye-tarjetas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .incluye-tarjetas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .incluye-tarjeta { transition: none; }
    .incluye-tarjeta:hover { transform: none; }
}

/* --- otras unidades --- */
.servicio-otros { max-width: var(--caja); margin: 0 auto; padding: 1rem 1.5rem 3.6rem; }
.servicio-otros h2 {
    margin: 0 0 1.8rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}
.servicio-otros h2 b { font-weight: 700; color: var(--blue2); }
.otros-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.otro-servicio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 68px;
    padding: 1rem 1.35rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.otro-servicio i { color: var(--acc-b); transition: transform .2s ease; }
.otro-servicio:hover {
    border-color: var(--acc-b);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20,50,70,.10);
}
.otro-servicio:hover i { transform: translateX(4px); }
@media (max-width: 900px) { .otros-lista { grid-template-columns: 1fr; } }

/* Las otras unidades, en tarjetas con foto y boton. Es el papel que en la
   pagina de limpieza de ISS hacen las cuatro "Pure Space en...": sus otros
   servicios, que es lo mas visible de su forma.

   Se toma la estructura, no el aspecto: ellos usan tarjetas azules solidas y
   aqui van con el blanco, el borde y la sombra del resto del sitio. Copiar su
   color seria parecerse a ISS; copiar su estructura es aprender de ella. */
.otras-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.otra-tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.33, 0, .25, 1),
                box-shadow .35s cubic-bezier(.33, 0, .25, 1);
}
.otra-tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(20, 50, 70, .16);
}
.otra-tarjeta img {
    width: 100%;
    height: auto;                    /* ver la nota de .incluye-tarjeta img */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.otra-tarjeta .incluye-hueco { aspect-ratio: 16 / 9; }
/* la caja de texto crece y el boton se queda abajo: asi las tres tarjetas
   terminan a la misma altura aunque una frase ocupe dos lineas */
.otra-txt {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.1rem 1.15rem 1.25rem;
}
.otra-txt h3 {
    margin: 0 0 .35rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
}
.otra-txt p {
    margin: 0 0 1rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink2);
    text-wrap: pretty;
}
.otra-boton {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .52rem 1rem;
    border: 1px solid var(--acc-b);
    border-radius: 999px;
    color: var(--blue2);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.otra-boton i { transition: transform .2s ease; }
.otra-tarjeta:hover .otra-boton { background: var(--acc-b); color: #fff; }
.otra-tarjeta:hover .otra-boton i { transform: translateX(3px); }
@media (max-width: 900px) {
    .otras-tarjetas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .otras-tarjetas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .otra-tarjeta, .otra-boton, .otra-boton i { transition: none; }
    .otra-tarjeta:hover { transform: none; }
}

/* --- llamada a contacto --- */
/* El cierre, flotando sobre una foto: es lo que hace ISS al final de su
   pagina de limpieza. La seccion que decide la conversion gana con el peso
   visual, y el panel sobre foto pesa mas que una banda plana.

   La foto es la del cotizador de la portada, que ya esta optimizada y en el
   sitio: una imagen nueva aqui costaria peso por muy poco. */
.servicio-cta {
    position: relative;
    padding: 4.6rem 1.5rem;
    background: url(../img/cotiza-foto.webp) center / cover no-repeat;
}
.servicio-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    /* la foto es solo textura: el panel va encima y necesita contraste */
    background: rgba(6, 30, 44, .55);
}
.cta-caja {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem);
    border-radius: 22px;
    background: linear-gradient(168deg, #0C3E58 0%, var(--blue) 48%, #082B3D 100%);
    box-shadow: 0 28px 70px rgba(3, 18, 28, .45);
    text-align: center;
}
.cta-caja h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}
.cta-caja h2 b { font-weight: 700; color: var(--acc-b); }
.cta-caja p {
    margin: 0 0 2rem;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,.82);
}
.cta-acciones { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.cta-primario, .cta-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: 0 1.8rem;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .1s ease;
}
.cta-primario { background: var(--acc-b); color: #06222F; }
.cta-primario:hover { background: #56C8F0; }
.cta-secundario {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.5);
}
.cta-secundario:hover { background: rgba(255,255,255,.18); }
.cta-primario:active, .cta-secundario:active { transform: translateY(1px); }

/* --- pie --- */
.pie-servicio {
    background: #f4f4f4;
    padding: 1.6rem 1.5rem;
    text-align: center;
}
.pie-servicio p { margin: 0; font-size: .85rem; color: var(--ink3); }

@media (max-width: 560px) {
    .hero-servicio { min-height: 52vh; }
    .cta-acciones { flex-direction: column; }
    .cta-primario, .cta-secundario { width: 100%; }
}


/* El banner de Areas Verdes: .verdes-banner nunca existio en style.css, asi
   que la pagina heredaba el fondo de Limpieza Institucional (hallazgo P1-1 de
   la auditoria). Se repone con una foto real de jardines. */
.hero-servicio.verdes-banner {
    background-image: url(../img/banner-verde.webp);
}

/* El banner de Limpieza Industrial: la foto que envio el cliente, con la misma
   escena pero mas aire a la izquierda, que es donde cae el titular. La regla
   vieja de style.css apuntaba a industri.webp. */
.hero-servicio.industrial-banner {
    background-image: url(../img/banner-industrial.webp);
}


/* ---------------------------------------------------------------------------
   13. EL SPAN BLANCO
   style.css, linea 871, dice:

       .info-content h2,span { color: #fff; }

   La intencion era ".info-content h2, .info-content span", pero la coma deja
   el segundo selector suelto: pinta de blanco TODOS los span del sitio. En
   secciones claras el texto desaparecia — las fechas de las noticias, el ano
   del pie y las tarjetas de otras unidades quedaban invisibles.

   Se devuelve el color heredado, que es el comportamiento normal de un span.
   Las reglas que si necesitan un color propio lo declaran y ganan por
   especificidad.
   ------------------------------------------------------------------------ */

span { color: inherit; }


/* ---------------------------------------------------------------------------
   14. ENCUADRE DE LAS PORTADAS DE SERVICIO
   Medido con rejilla sobre las cuatro fotos: la cabeza de cada trabajador
   esta entre el 4% y el 17% de la altura. El recorte por arriba les cortaba
   la cabeza.

   La foto va a sangre completa, con el menu flotando encima como en la
   portada principal. La clave es anclarla a su borde SUPERIOR: lo que se
   recorta cae siempre abajo —suelo y maquinaria— y nunca en una cabeza.
   El alto es generoso para que se recorte lo menos posible.
   ------------------------------------------------------------------------ */

.hero-servicio {
    /* Las siete fotos de portada rondan la misma proporcion (1920x1121, entre
       1,71 y 1,78). Dandole al hueco esa misma proporcion, la foto entra
       entera y deja de recortarse. El tope de 90vh esta para que el titular,
       que va abajo, nunca quede por debajo del borde de la pantalla. */
    aspect-ratio: 1920 / 1121;
    min-height: 480px;
    max-height: 90vh;
    background-position: 50% 0%;       /* anclada arriba */
}

/* El velo se concentra arriba lo justo para que se lea el menu, y abajo para
   el titular. En medio deja la foto limpia, que es donde esta la persona. */
.hero-servicio::after {
    background: linear-gradient(180deg,
        rgba(6,30,44,.58)  0%,
        rgba(6,30,44,.26)  9%,
        rgba(6,30,44,.05) 34%,
        rgba(6,30,44,.06) 52%,
        rgba(6,30,44,.52) 78%,
        rgba(6,30,44,.93) 100%);
}

/* En movil el recorte pasa a ser lateral: se centra en cada trabajador, con
   los porcentajes tomados de la misma rejilla. */
@media (max-width: 700px) {
    .hero-servicio { aspect-ratio: auto; min-height: 68vh; max-height: none; }
    .hero-servicio                   { background-position: 30% 0%; }
    .hero-servicio.industrial-banner { background-position: 55% 0%; }
    .hero-servicio.mecanizado-banner { background-position: 26% 0%; }
    .hero-servicio.verdes-banner     { background-position: 65% 0%; }
}


/* ---------------------------------------------------------------------------
   15. EMPRESA, NOTICIAS Y EMPLEO
   Las tres paginas que quedaban con el diseno viejo. Reutilizan las piezas ya
   definidas para las paginas de servicio (.hero-servicio, .kicker,
   .servicio-lead, .servicio-cta, .pie-servicio) y anaden lo propio de cada una.
   ------------------------------------------------------------------------ */

/* --- portadas --- */
.hero-servicio.empresa-banner  { background-image: url(../img/NE1.webp); }
.hero-servicio.noticias-banner { background-image: url(../img/noticas.webp); }
.hero-servicio.empleo-banner   { background-image: url(../img/TCC.webp); }

/* En movil el recorte es lateral. Los porcentajes salen de mirar donde cae la
   persona en cada foto: el triptico manda al centro, y en las otras dos la
   persona esta a la derecha. */
@media (max-width: 700px) {
    .hero-servicio.empresa-banner  { background-position: 50% 0%; }
    .hero-servicio.noticias-banner { background-position: 70% 0%; }
    .hero-servicio.empleo-banner   { background-position: 68% 0%; }
}


/* ===== NUESTRA EMPRESA ==================================================== */

/* Mision, vision y valores estaban en tres imagenes de texto (vm1, vm2, vm3):
   Google no puede leerlas, un lector de pantalla tampoco, y sus colores
   —celeste, verde y rojo— no son los de la marca. Se pasan a texto real. */
.empresa-mvv {
    background: linear-gradient(180deg, #fff 0%, var(--bg) 130px,
                var(--bg) calc(100% - 130px), #fff 100%);
    padding: 4.2rem 1.5rem 4.6rem;
}
.empresa-mvv-caja { max-width: var(--caja); margin: 0 auto; }
.empresa-mvv h2 {
    margin: 0 0 2.2rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}
.empresa-mvv h2 b { font-weight: 700; color: var(--blue2); }
.mvv-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mvv-ficha {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 2rem 1.6rem;
    box-shadow: 0 1px 2px rgba(20,50,70,.04);
}
.mvv-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.1rem;
    border-radius: 15px;
    background: #E1EEF5;
    color: var(--blue2);
    font-size: 1.4rem;
}
.mvv-ficha h3 {
    margin: 0 0 .7rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}
.mvv-ficha p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.72;
    color: var(--ink2);
    text-wrap: pretty;
}
@media (max-width: 900px) { .mvv-lista { grid-template-columns: 1fr; } }

/* --- lo que sostiene el servicio --- */
.empresa-modo { max-width: var(--caja); margin: 0 auto; padding: 3.8rem 1.5rem 1rem; }
.empresa-modo h2 {
    margin: 0 0 2rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}
.empresa-modo h2 b { font-weight: 700; color: var(--blue2); }
.modo-lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.modo-item {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.7rem 1.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.modo-item i { color: var(--acc-b); font-size: 1.5rem; }
.modo-item h3 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--ink); }
.modo-item p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ink2); }
@media (max-width: 980px) { .modo-lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .modo-lista { grid-template-columns: 1fr; } }

/* la reja de cuatro unidades: .otros-lista nace de tres columnas */
.otros-lista--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .otros-lista--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .otros-lista--4 { grid-template-columns: 1fr; } }


/* ===== NOTICIAS =========================================================== */

.noticias-lista { max-width: var(--caja); margin: 0 auto; padding: 2.6rem 1.5rem 4rem; }
.noticias-reja { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.noticia-tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.noticia-tarjeta:hover {
    transform: translateY(-4px);
    border-color: #CFDCE4;
    box-shadow: 0 16px 38px rgba(20,50,70,.13);
}
.noticia-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.noticia-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.noticia-tarjeta:hover .noticia-foto img { transform: scale(1.04); }
.noticia-cuerpo { display: flex; flex-direction: column; gap: .75rem; padding: 1.6rem 1.5rem 1.75rem; flex: 1; }
.noticia-meta {
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue2);
}
.noticia-tarjeta h2 {
    margin: 0;
    text-transform: none;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.38;
    color: var(--ink);
    letter-spacing: -.01em;
    text-wrap: pretty;
}
.noticia-tarjeta p { margin: 0; font-size: .92rem; line-height: 1.68; color: var(--ink2); }
.noticia-mas {
    margin-top: auto;
    padding-top: .4rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--blue2);
}
.noticia-mas i { transition: transform .2s ease; }
.noticia-tarjeta:hover .noticia-mas i { transform: translateX(4px); }
@media (max-width: 820px) { .noticias-reja { grid-template-columns: 1fr; } }


/* ===== FICHA DE UNA NOTICIA =============================================== */

/* Aqui la portada no lleva foto: el titular va sobre el azul de la marca y la
   fotografia entra despues, a tamano completo. Asi ningun texto cae sobre una
   cara y el titular se lee siempre. */
.articulo-cabecera {
    position: relative;
    background: linear-gradient(168deg, #0C3E58 0%, var(--blue) 52%, #082B3D 100%);
    padding: 8.5rem 1.5rem 3.4rem;
}
.articulo-cabecera-txt { max-width: 820px; margin: 0 auto; }
.articulo-cabecera h1 {
    margin: 0;
    text-transform: none;
    font-size: clamp(1.6rem, 3.6vw, 2.5rem);
    font-weight: 300;
    line-height: 1.16;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}
.articulo-cabecera h1 b { font-weight: 700; color: var(--acc-b); }
.articulo-volver {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.6rem;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.78);
    text-decoration: none;
}
.articulo-volver:hover { color: #fff; }
@media (max-width: 700px) { .articulo-cabecera { padding: 7rem 1.25rem 2.6rem; } }

.articulo { max-width: 820px; margin: 0 auto; padding: 0 1.5rem 3.5rem; }
.articulo-figura {
    margin: -2rem 0 2.4rem;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(20,50,70,.18);
    background: var(--bg);
}
.articulo-figura img { width: 100%; height: auto; display: block; }
.articulo p {
    margin: 0 0 1.25rem;
    font-size: 1.03rem;
    line-height: 1.8;
    color: var(--ink2);
    text-wrap: pretty;
}
.articulo p:last-child { margin-bottom: 0; }
.articulo p strong { color: var(--ink); }

.articulo-otras {
    background: linear-gradient(180deg, #fff 0%, var(--bg) 130px, var(--bg) 100%);
    padding: 3.6rem 1.5rem 4.2rem;
}
.otras-caja { max-width: var(--caja); margin: 0 auto; }
.otras-caja h2 {
    margin: 0 0 1.9rem;
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}
.otras-caja h2 b { font-weight: 700; color: var(--blue2); }
.otras-reja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .otras-reja { grid-template-columns: 1fr; } }


/* ===== TRABAJAR EN CLEANVIP =============================================== */

.empleo-razones {
    background: linear-gradient(180deg, #fff 0%, var(--bg) 130px,
                var(--bg) calc(100% - 130px), #fff 100%);
    padding: 3.8rem 1.5rem 4.2rem;
}
.empleo-caja { max-width: var(--caja); margin: 0 auto; }
.empleo-caja h2 {
    margin: 0 0 2rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}
.empleo-caja h2 b { font-weight: 700; color: var(--blue2); }
.empleo-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 900px) { .empleo-lista { grid-template-columns: 1fr; } }

/* --- el formulario de postulacion --- */
.empleo-forma { max-width: 820px; margin: 0 auto; padding: 3.6rem 1.5rem 1rem; }
.empleo-forma > h2 {
    margin: 0 0 .7rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}
.empleo-forma > h2 b { font-weight: 700; color: var(--blue2); }
.empleo-forma > p { margin: 0 0 2.2rem; font-size: .98rem; line-height: 1.7; color: var(--ink2); }

/* --- redes --- */
.empleo-redes { padding: 2.6rem 1.5rem 4rem; text-align: center; }
.empleo-redes p {
    margin: 0 0 1.2rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--blue2);
}
.redes-fila { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.redes-fila a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--blue2);
    font-size: 1.25rem;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.redes-fila a:hover { transform: translateY(-3px); border-color: var(--acc-b); color: var(--acc-b); }


/* ---------------------------------------------------------------------------
   16. BARRA SUPERIOR
   El menu viejo flotaba sobre la portada y se perdia al bajar: en paginas
   largas uno se quedaba sin navegacion y sin forma de cotizar.

   Esta va fija y de lado a lado, sin esquinas redondeadas ni caja flotante.
   Sobre la portada es transparente —la foto se ve entera, que es lo que se
   pidio— y se vuelve blanca en cuanto se empieza a bajar. El logotipo pasa de
   blanco a azul en el mismo gesto.
   ------------------------------------------------------------------------ */

.barra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1rem clamp(1rem, 4vw, 3.2rem);
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* Velo suave arriba: hay portadas con cielo claro y sin el los enlaces
   blancos se pierden. Desaparece cuando la barra se vuelve solida. */
.barra::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,30,44,.46) 0%, rgba(6,30,44,0) 100%);
    transition: opacity .3s ease;
}

.barra--solida {
    background: #fff;
    box-shadow: 0 1px 0 var(--line), 0 8px 28px rgba(20,50,70,.09);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.barra--solida::before { opacity: 0; }

/* --- la marca: el trebol solo, en un unico color ---
   El logotipo completo aqui se repetia con el que ocupa el centro de la
   portada. Queda la marca sola.

   El cambio de color no se hace superponiendo dos imagenes: se usa el trebol
   como mascara y el color lo pone el fondo del propio elemento, asi que pasa
   del blanco al azul de los enlaces por interpolacion real, no por fundido. */
.barra-marca {
    flex: none;
    display: block;
    line-height: 0;
}
.barra-trebol {
    display: block;
    width: clamp(38px, 4.2vw, 50px);
    aspect-ratio: 220 / 227;
    background-color: #fff;
    -webkit-mask: url(../img/trebol.webp) no-repeat center / contain;
            mask: url(../img/trebol.webp) no-repeat center / contain;
    transition: background-color .35s ease;
}
.barra--solida .barra-trebol { background-color: var(--ink); }

/* Si el navegador no entendiera mascaras, el trebol blanco tal cual */
.barra-trebol-alt { display: none; }
@supports not ((-webkit-mask-image: url(a)) or (mask-image: url(a))) {
    .barra-trebol { display: none; }
    .barra-trebol-alt { display: block; width: clamp(38px, 4.2vw, 50px); height: auto; }
}

/* --- enlaces --- */
.barra-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.2rem);
}
.barra-nav > ul {
    display: flex;
    align-items: center;
    gap: clamp(.9rem, 1.9vw, 1.9rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.barra-nav a {
    color: #fff;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: color .25s ease;
}
.barra--solida .barra-nav a { color: var(--ink); }

.barra-nav > ul > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem 0;
    white-space: nowrap;
}
/* el subrayado crece desde la izquierda, no aparece de golpe */
.barra-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--acc-b);
    transition: right .28s ease;
}
.barra-nav > ul > li > a:hover::after,
.barra-nav > ul > li > a:focus-visible::after { right: 0; }
.barra-nav > ul > li > a i { font-size: .74rem; opacity: .8; }

/* --- desplegable de servicios --- */
.barra-despliegue { position: relative; }
.barra-submenu {
    position: absolute;
    top: 100%;
    left: -.9rem;
    min-width: 264px;
    list-style: none;
    margin: .4rem 0 0;
    padding: .45rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 46px rgba(20,50,70,.17);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.barra-despliegue:hover .barra-submenu,
.barra-despliegue:focus-within .barra-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.barra-submenu a,
.barra--solida .barra-submenu a {
    display: block;
    padding: .62rem .85rem;
    border-radius: 9px;
    color: var(--ink);
    font-size: .88rem;
    font-weight: 600;
}
.barra-submenu a:hover { background: var(--bg); color: var(--blue2); }

/* --- el boton de cotizar, que antes no existia en ninguna pagina --- */
.barra-cta {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 1.2rem;
    border-radius: 8px;
    background: var(--acc-b);
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s ease, transform .1s ease;
}
.barra-cta, .barra-nav .barra-cta, .barra--solida .barra-nav .barra-cta { color: #06222F; }
.barra-cta:hover { background: #56C8F0; }
.barra-cta:active { transform: translateY(1px); }

/* --- movil: panel lateral, sin JavaScript --- */
.barra-interruptor { position: absolute; opacity: 0; pointer-events: none; }
.barra-boton { display: none; }
.barra-velo { display: none; }

@media (max-width: 1080px) {
    .barra-boton {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        margin-left: auto;
        width: 46px;
        height: 46px;
        cursor: pointer;
        z-index: 2;
    }
    .barra-boton span {
        display: block;
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: background .3s ease, transform .3s ease, opacity .2s ease;
    }
    .barra--solida .barra-boton span { background: var(--ink); }
    /* las tres rayas se cruzan en aspa al abrir */
    .barra-interruptor:checked ~ .barra-boton span { background: var(--ink); }
    .barra-interruptor:checked ~ .barra-boton span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .barra-interruptor:checked ~ .barra-boton span:nth-child(2) { opacity: 0; }
    .barra-interruptor:checked ~ .barra-boton span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .barra-velo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6,30,44,.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s;
    }
    .barra-interruptor:checked ~ .barra-velo { opacity: 1; visibility: visible; }

    .barra-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(84vw, 350px);
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1.2rem;
        padding: 5.6rem 1.4rem 2rem;
        background: #fff;
        box-shadow: -22px 0 60px rgba(20,50,70,.22);
        transform: translateX(102%);
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .barra-interruptor:checked ~ .barra-nav { transform: none; }

    .barra-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
    .barra-nav a, .barra--solida .barra-nav a { color: var(--ink); }
    .barra-nav > ul > li > a {
        display: flex;              /* si no, la linea solo mide lo que el texto */
        padding: .95rem .2rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
    }
    .barra-nav > ul > li > a::after { display: none; }

    /* en movil el submenu va desplegado: no hay hover que valga */
    .barra-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: 0;
        padding: .3rem 0 .5rem;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .barra-submenu a { padding: .6rem .2rem .6rem 1.1rem; font-size: .92rem; color: var(--ink2); }
    .barra-submenu a:hover { background: none; }
    .barra-despliegue > a i { display: none; }

    .barra-cta { justify-content: center; min-height: 50px; font-size: .95rem; }
}

@media (max-width: 420px) {
    .barra { padding: .7rem 1rem; }
    .barra-trebol, .barra-trebol-alt { width: 38px; }
}

/* Quien prefiere menos movimiento no ve las transiciones */
@media (prefers-reduced-motion: reduce) {
    .barra, .barra::before, .barra-trebol, .barra-nav, .barra-submenu,
    .barra-boton span, .barra-nav > ul > li > a::after {
        transition: none;
    }
}


/* ---------------------------------------------------------------------------
   17. PIE DE PAGINA
   El pie era una linea suelta: "CleanVip 2024 - Hepi Designs". Ni telefono,
   ni correo, ni direccion, ni un enlace. Quien llegaba desde un anuncio y
   bajaba hasta el final se quedaba sin forma de llamar.

   No se reparte todo en columnas iguales: manda el telefono, que es lo que
   se busca en un pie, grande y a la izquierda. Las secciones van al lado, en
   letra menor.
   ------------------------------------------------------------------------ */

.pie {
    background: rgb(var(--velo));   /* el azul profundo de la marca */
    color: rgba(255,255,255,.72);
    padding: 4rem clamp(1.25rem, 5vw, 3.2rem) 0;
}
.pie-caja { max-width: var(--caja); margin: 0 auto; }

.pie-alto {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: 3rem;
}

/* --- lo que importa: como contactarnos --- */
.pie-marca img { width: 186px; height: auto; display: block; margin-bottom: 1.6rem; }
.pie-frase {
    margin: 0 0 1.9rem;
    max-width: 34ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255,255,255,.78);
}
/* El telefono va dentro de la lista de datos, no suelto y grande encima:
   asi arriba. Sigue destacando —en blanco y algo mas grueso, que es el dato
   por el que mas llaman— pero sin romper el bloque. */
.pie-datos .pie-dato-tel a {
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.pie-datos .pie-dato-tel a:hover { color: var(--acc-b); }

.pie-acciones { display: flex; flex-wrap: wrap; gap: .7rem; }
.pie-boton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: 0 1.25rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.pie-boton--lleno { background: var(--acc-b); color: #06222F; }
.pie-boton--lleno:hover { background: #56C8F0; }
.pie-boton--linea {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.38);
}
.pie-boton--linea:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* --- las secciones, en segundo plano --- */
.pie-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-content: start;
    padding-top: .5rem;
}
.pie-cols h3 {
    margin: 0 0 1.05rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--acc-b);
}
.pie-cols ul { list-style: none; margin: 0; padding: 0; }
.pie-cols li { margin-bottom: .62rem; }
.pie-cols a {
    color: rgba(255,255,255,.74);
    font-size: .91rem;
    text-decoration: none;
    transition: color .2s ease;
}
.pie-cols a:hover { color: #fff; }

/* --- linea de cierre --- */
.pie-bajo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.5rem 0 1.8rem;
    border-top: 1px solid rgba(255,255,255,.14);
}
.pie-bajo p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.pie-redes { display: flex; gap: .55rem; }
.pie-redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.8);
    font-size: 1.05rem;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .18s ease;
}
.pie-redes a:hover { border-color: var(--acc-b); color: var(--acc-b); transform: translateY(-2px); }

@media (max-width: 900px) {
    .pie { padding-top: 3.2rem; }
    .pie-alto { grid-template-columns: 1fr; gap: 2.8rem; }
}
@media (max-width: 460px) {
    .pie-cols { grid-template-columns: 1fr; gap: 1.8rem; }
    .pie-acciones { flex-direction: column; align-items: stretch; }
    .pie-boton { justify-content: center; }
}


/* ---------------------------------------------------------------------------
   18. REMATES
   ------------------------------------------------------------------------ */

/* El titular de los servicios era el unico del cuerpo fuera del patron:
   turquesa #50B0BB —que no esta en la paleta—, peso 900, mayusculas y sin
   antetitulo, mientras el de los pilares, justo debajo, iba fino con el
   acento en negrita. style.css lo declara cinco veces, incluida una que lo
   empuja 20 rem a la derecha y otra que lo oculta para escribir otra cosa
   con ::before, asi que hace falta el contenedor delante para ganarle. */
.services__cards-info { position: static; max-width: 780px; margin: 0 auto 2.4rem; }
.services__cards-info .kicker { text-align: center; }
.services__cards-info h2,
.services__cards-info h2::before {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    visibility: visible;
    content: none;
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
    text-transform: none;
    text-wrap: balance;
}
.services__cards-info h2 b { font-weight: 700; color: var(--blue2); }
.movetitle { transform: none; }

/* Con la barra fija, cualquier salto a un ancla dejaba el titulo debajo de
   ella. Se reserva su alto. */
/* La barra solida mide 68 px: ese es el margen exacto para que la seccion
   tope con ella. Con 96 quedaba una franja de 28 px de la seccion anterior
   asomando, que es lo que se veia al pulsar la flecha de la portada. */
[id] { scroll-margin-top: 68px; }


/* ---------------------------------------------------------------------------
   19. LA PORTADA EN DOS TIEMPOS
   Entra el logotipo en el centro, se va, y aparece la frase alineada a la
   izquierda.

   El estado natural de esta seccion es el FINAL: frase visible, logotipo
   ausente. La animacion solo cuenta la entrada. Asi, si el navegador no anima
   o alguien pide menos movimiento, se ve directamente el resultado y nunca
   una portada en blanco.
   ------------------------------------------------------------------------ */

/* .header-content es display:block por encima de 980 px —las reglas que lo
   centran viven en media queries que no aplican ahi—, asi que la frase
   arrancaba pegada al borde superior, debajo de la barra. El logotipo viejo
   no lo notaba porque iba en absoluto al 50%/50%. */
.header-content { display: flex; align-items: center; }

.portada-escena {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3.2rem);
}

/* --- primer tiempo: el telon blanco con el logotipo ---
   La portada abre en blanco y ese blanco se difumina para descubrir el
   video. Resuelve dos cosas a la vez: tapa el primer fotograma congelado
   mientras el video arranca, y le da al logotipo un escenario propio —antes
   aparecia sobre la fotografia y competia con ella.

   Cubre tambien la barra a proposito: sus enlaces son blancos y sobre el
   telon no se verian.

   Su estado natural es NO ESTAR (transparente y oculto). Solo existe dentro
   de la consulta de movimiento de mas abajo, asi que quien pida menos
   movimiento nunca ve una pantalla en blanco, y si el navegador no animara
   tampoco se quedaria tapada la pagina. */
.portada-telon {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.portada-marca {
    /* Un poco mas ancho que la imagen anterior porque el lienzo del SVG lleva
       margen para que el latido no se corte por las orillas. */
    width: min(70vw, 640px);
    height: auto;
    opacity: 0;                     /* su estado natural es no estar */
    pointer-events: none;
}

/* --- segundo tiempo: la frase --- */
/* Nada de ch aqui: la unidad se resuelve contra el tamano de letra del
   propio elemento, que hereda los 16 px del body y no los del titular. */
.portada-frase {
    max-width: 940px;
    /* A la izquierda SIEMPRE, y por eso esta escrito aunque parezca el valor
       de por si: style.css centra .header-content.container a partir de
       980 px —regla del diseño viejo, con su comentario "Centrar el texto"—
       y la frase heredaba ese centrado. La portada quedaba alineada de una
       manera en el telefono y de otra en el escritorio. */
    text-align: left;
}
.portada-frase h1 {
    margin: 0 0 1.25rem;
    max-width: none;
    font-size: clamp(2.1rem, 5.4vw, 4rem);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #fff;
    text-transform: none;
    text-wrap: balance;
}
.portada-frase h1 b { font-weight: 700; color: var(--acc-b); }
.portada-frase > p {
    max-width: 46ch;
    margin: 0;
    font-size: clamp(.98rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: rgba(255,255,255,.86);
    text-wrap: pretty;
}
/* --- el movimiento ---
   El telon NO se va a una hora fija: espera a que el video este reproduciendo
   de verdad y entonces se levanta, de modo que el blanco da paso al video en
   marcha y no a un fotograma congelado. Quien decide el momento es
   javascript.js/portada.js; aqui solo estan los estados y las curvas.

   Por eso la salida es una transicion y no una animacion: una animacion
   tendria que saber de antemano cuando empieza, y no se sabe.

   Todo vive dentro de esta consulta: quien pida menos movimiento no ve
   telon, ni logotipo, ni espera —la frase esta ahi desde el primer momento. */
@media (prefers-reduced-motion: no-preference) {

    /* El telon parte opaco AQUI DENTRO, no en la regla de arriba, para que
       sin movimiento nunca haya una pantalla en blanco. La visibilidad
       cambia al final de la transicion, no al principio, o el telon
       desapareceria de golpe en vez de difuminarse.

       Y depende de .cv-telon, que pone un guion en linea de la cabecera.
       Sin JavaScript esa clase no llega, no hay telon y se ve la portada
       directamente —que es lo correcto, porque sin JavaScript tampoco se
       carga el video que el telon venia a tapar—. Antes, sin JavaScript, la
       pantalla se quedaba en blanco para siempre. */
    .cv-telon .portada-telon {
        opacity: 1;
        visibility: visible;
        transition: opacity 1.5s cubic-bezier(.4, .1, .45, .95),
                    visibility 0s linear 1.5s;
    }
    .cv-telon .portada-telon--fuera { opacity: 0; visibility: hidden; }

    /* Mientras el telon esta puesto la pagina no se desplaza. Sin esto, girar
       la rueda sobre el blanco movia la pagina por detras y al levantarse el
       telon se entraba a media pagina. El bloqueo lo suelta portada.js al
       levantarlo, y hay un plazo de seguridad en el propio guion en linea por
       si portada.js no llegara a cargarse. */
    /* Sin reservar el hueco de la barra: se probo y era peor. En los
       navegadores de barra flotante reservarlo estrecha la pagina 15 px
       para nada, y en los de barra clasica el reajuste al soltar ocurre
       cuando el telon todavia es blanco opaco, asi que no se ve. */
    .cv-bloqueo { overflow: hidden; }

    /* Del logotipo solo se anima la ENTRADA. La salida la hace el telon al
       apagarse: como el logotipo va dentro, el blanco y la marca se
       disuelven como una sola cosa, que es lo que se queria.

       Dos animaciones y no una: la opacidad y la forma piden curvas
       distintas. Con la curva de aterrizaje la escala se posa precioso, pero
       la opacidad salta de 0 a 0,17 en el primer fotograma —medido—, y eso
       es justo lo que se ve como brusco. */
    /* Ya no entra el logotipo entero de golpe: se monta solo. Los tres
       petalos estallan en el centro, y desde ahi el trebol se va a la
       derecha y la palabra a la izquierda escribiendose, hasta formar el
       logotipo. Al llegar palpita tres veces, cada una mas floja.

       Todo el reparto son 3,06 s y el telon se levanta a los 2,90, asi que
       la cola del ultimo latido cae ya sobre el principio de la
       disolucion. Se hace a proposito: el blanco tarda 1,5 s en irse y a
       los 160 ms todavia esta al 96 %, con lo que el latido se ve entero
       sin cobrarle a cada visitante otro medio segundo de espera. */
    .portada-marca { opacity: 1; }

    .cv-petalo { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
    #cv-azul  { animation: cvPetalo .24s cubic-bezier(.34,1.4,.5,1) .00s both; }
    #cv-verde { animation: cvPetalo .24s cubic-bezier(.34,1.4,.5,1) .20s both; }
    #cv-rojo  { animation: cvPetalo .24s cubic-bezier(.34,1.4,.5,1) .40s both; }

    #cv-texto, #cv-trebol, #cv-todo, #cv-persiana { transform-box: fill-box; }
    #cv-texto {
        transform-origin: 0 0;
        animation: cvTexto 1.00s cubic-bezier(.65,0,.35,1) .66s both;
    }
    #cv-trebol {
        transform-origin: 0 0;
        animation: cvTrebol 1.00s cubic-bezier(.65,0,.35,1) .66s both;
    }
    /* La persiana se abre con una escala y no con el atributo width: escalar
       es lo que todos los navegadores animan igual. */
    #cv-persiana {
        transform-origin: left center;
        animation: cvPersiana 1.00s cubic-bezier(.65,0,.35,1) .66s both;
    }
    #cv-todo {
        transform-box: view-box;
        /* El lienzo se construyo simetrico respecto al centro del dibujo,
           asi que 50% 50% ES ese centro, y ademas se corrige solo si el
           lienzo cambia. Escribir el punto a mano fallaba: con view-box se
           cuenta desde la esquina del lienzo, y al darle aire por la
           izquierda el origen quedo corrido y el logotipo crecia hacia la
           derecha hasta salirse. */
        transform-origin: 50% 50%;
        animation: cvLatido 1.40s ease-in-out 1.66s both;
    }

    @keyframes cvPetalo {
          0% { opacity: 0; transform: scale(.25); }
          1% { opacity: 1; }
        100% { opacity: 1; transform: scale(1); }
    }
    @keyframes cvTexto {
        from { transform: translateX(855.50px); }
          to { transform: translateX(0); }
    }
    @keyframes cvTrebol {
        from { transform: translateX(-611.00px); }
          to { transform: translateX(0); }
    }
    @keyframes cvPersiana {
        from { transform: scaleX(0); }
          to { transform: scaleX(1); }
    }
    /* Tres pulsos, cada uno menos que el anterior: un corazon que se calma
       se lee mejor que tres golpes iguales. Y el maximo baja de 1,16 a
       1,065, que era lo que se sentia demasiado fuerte. */
    @keyframes cvLatido {
          0% { transform: scale(1); }
         11% { transform: scale(1.065); }
         24% { transform: scale(1); }
         44% { transform: scale(1.052); }
         57% { transform: scale(1); }
         77% { transform: scale(1.038); }
         90% { transform: scale(1); }
        100% { transform: scale(1); }
    }

    /* La frase espera al telon. La clase intro-terminada la pone portada.js
       en cuanto empieza a levantarse, con lo que entra mientras el blanco
       todavia se esta yendo: ese solape es lo que hace que se lea como un
       relevo.

       La clase con-intro tambien la pone portada.js, asi que sin JavaScript
       nada de esto aplica y la frase esta visible desde el principio. */
    .con-intro .portada-frase h1,
    .con-intro .portada-frase > p { opacity: 0; }

    .con-intro.intro-terminada .portada-frase h1,
    .con-intro.intro-terminada .portada-frase > p {
        animation: fraseEntra 1.25s cubic-bezier(.33, 0, .25, 1) both;
    }
    .con-intro.intro-terminada .portada-frase h1  { animation-delay: .45s; }
    .con-intro.intro-terminada .portada-frase > p { animation-delay: .70s; }

    /* La firma: el trebol en blanco suave, abajo a la derecha, que aparece
       cuando la frase ya esta dicha. Es un sello, no un boton: sin enlace y
       sin recibir el raton. */
    .con-intro .portada-firma { opacity: 0; }
    .con-intro.intro-terminada .portada-firma {
        animation: firmaEntra 1.4s cubic-bezier(.33, 0, .25, 1) 1.5s both;
    }
}

/* Recorrido corto —16 px, no 22— y una curva que tambien arranca plana:
   cuanto menos viaja un texto al aparecer, mas asentado se ve. */
@keyframes fraseEntra {
    from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
}

/* --- la firma de la esquina ---
   El logotipo completo como mascara con el fondo blanco, igual que el trebol
   de la barra: el archivo "blanco" trae los petalos en color y aqui se pide
   blanco entero. Al 50%, de sello, no de rotulo. */
.portada-firma {
    position: absolute;
    right: clamp(1.25rem, 4vw, 3rem);
    bottom: clamp(1.25rem, 4vw, 2.6rem);
    z-index: 2;
    width: clamp(120px, 12vw, 190px);
    aspect-ratio: 510 / 172;
    background-color: #fff;
    -webkit-mask: url(../img/logo-blanco.webp) no-repeat center / contain;
            mask: url(../img/logo-blanco.webp) no-repeat center / contain;
    opacity: .5;                    /* un blanco suave, de sello */
    pointer-events: none;
}
@supports not ((-webkit-mask-image: url(a)) or (mask-image: url(a))) {
    .portada-firma { display: none; }   /* decorativa: mejor nada que a color */
}
@keyframes firmaEntra {
    from { opacity: 0; }
      to { opacity: .5; }
}
/* En movil la flecha de bajar vive en esa esquina inferior: la firma se
   guarda para no amontonarse con ella. */
@media (max-width: 700px) {
    .portada-firma { display: none; }
}

@media (max-width: 900px) {
    .portada-frase { max-width: none; }
    .portada-marca { width: min(78vw, 420px); }
}


/* ---------------------------------------------------------------------------
   20. TIPOGRAFIA
   Manrope en lugar de Poppins. Poppins es una geometrica de cartel haciendo
   de tipografia de texto: su ojo bajo se nota justo donde mas texto hay, en
   los parrafos y en las tarjetas. Manrope es igual de geometrica —asi el
   diseno no se mueve— pero con el ojo mas alto y mejor lectura en corrido.

   style.css la declara en body; los campos de formulario y los botones no
   heredan la familia, por eso van nombrados.
   ------------------------------------------------------------------------ */

body,
input, textarea, select, button,
.input-text, .boton {
    font-family: "Manrope", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ---------------------------------------------------------------------------
   21. LA FRANJA DE CIFRAS
   Tres datos, con una linea fina entre medias. Nada de tarjetas ni de
   numeros flotando sobre fotos: aqui el numero va grande y fino, como los
   titulares del resto del sitio.
   ------------------------------------------------------------------------ */

.cifras {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 3.2rem 1.5rem;
}
.cifras-caja {
    max-width: var(--caja);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
.cifra { padding: 0 clamp(1rem, 3vw, 2.4rem); }
.cifra + .cifra { border-left: 1px solid var(--line); }
.cifra-numero {
    margin: 0 0 .5rem;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--blue2);
    text-wrap: balance;
}
.cifra-texto {
    margin: 0;
    max-width: 36ch;      /* con dos columnas anchas, el texto se estiraba */
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink2);
    text-wrap: pretty;
}
@media (max-width: 760px) {
    .cifras { padding: 2.4rem 1.25rem; }
    .cifras-caja { grid-template-columns: 1fr; gap: 1.8rem; }
    .cifra { padding: 0; }
    .cifra + .cifra { border-left: 0; border-top: 1px solid var(--line); padding-top: 1.8rem; }
}


/* ---------------------------------------------------------------------------
   22. SEGMENTOS: LA FOTO DETRAS, LA VIÑETA ENCIMA
   A que tipo de recinto servimos. De Sodexo se toma el mecanismo —elegir un
   segmento y ver su contenido— pero no la forma: alli son pestanas
   horizontales sobre una foto grande.

   Aqui se repite el planteamiento del cotizador, que es lo que mejor
   funciona de la pagina:

     - La foto es una capa de fondo que sangra hasta el borde derecho de la
       pantalla y se desplaza mas despacio que el resto, de modo que se lee
       como si estuviera detras. Cambia al elegir recinto.
     - Encima flota una viñeta blanca con la descripcion.
     - El menu queda a la izquierda, sobre el fondo claro.

   Sigue funcionando sin JavaScript: radios y etiquetas, y se recorre con el
   teclado como cualquier grupo de opciones. Los radios son los primeros
   hijos de la seccion porque "~" solo alcanza a los hermanos posteriores y
   tienen que gobernar la foto, la etiqueta y la viñeta a la vez.
   ------------------------------------------------------------------------ */

.segmentos {
    --seg-caja: 1400px;
    --seg-pad: clamp(1rem, 4vw, 3rem);
    --seg-menu: 340px;

    position: relative;
    overflow: hidden;
    padding: 3.4rem 0 3.8rem;
    background: linear-gradient(180deg, #fff 0%, var(--bg) 120px,
                var(--bg) calc(100% - 120px), #fff 100%);
}
.segmentos > input { position: absolute; opacity: 0; pointer-events: none; }

/* --- la capa de atras --- */
.segmentos-fondo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* El borde izquierdo sale de los MISMOS numeros que usa la reja, para que
       la foto empiece justo despues del menu en cualquier ancho. Con un
       porcentaje suelto se solapaban en pantallas grandes: el menu se aleja
       del borde a medida que crece la ventana y el porcentaje no. */
    left: calc(max(0px, (100% - var(--seg-caja)) / 2)
               + var(--seg-pad) + var(--seg-menu) + 2rem);
    overflow: hidden;
    border-radius: 22px 0 0 22px;
    background: var(--bg);
}
/* El lienzo sobra por arriba y por abajo: ese sobrante es el recorrido que
   necesita el desplazamiento para no dejar huecos.

   Aqui sobra menos de la mitad que en el cotizador. En estas cuatro fotos la
   cabeza queda a un 4-5% del borde superior —asi las encuadro el fotografo,
   no hay aire que recuperar—, y un sobrante del 16% se comia hasta un 24%
   por arriba. Con el 7%, y con el sesgo que aplica inicio.js, la foto se
   apoya en el borde de arriba mientras la seccion esta a la vista. */
.segmentos-lienzo {
    position: absolute;
    inset: -7% 0;
    will-change: transform;
}
.seg-foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* "top", no "center": en pantallas anchas la foto sobra por alto, y
       centrada ese sobrante se reparte entre arriba y abajo —un 4,5% fijo
       comiendose las cabezas en Full HD—. Anclada arriba, todo lo que sobra
       se recorta por abajo, que es donde solo hay suelo. */
    background-position: center top;
    opacity: 0;
    transition: opacity .7s ease;
}
/* Un velo hacia la izquierda, donde cae la viñeta: sin el, la foto compite
   con el texto justo en ese borde. Va fuera del lienzo para que no se
   desplace con el. */
.segmentos-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6,30,44,.30) 0%, rgba(6,30,44,0) 48%);
}

/* --- la capa de delante --- */
.segmentos-caja {
    position: relative;
    z-index: 1;
    max-width: var(--seg-caja);
    margin: 0 auto;
    padding: 0 var(--seg-pad);
    display: grid;
    grid-template-columns: var(--seg-menu) minmax(0, 520px) minmax(0, 1fr);
    column-gap: 1.6rem;
    align-items: center;
    min-height: clamp(420px, 46vh, 540px);
}
/* min-width:0 no es adorno: sin el, un hijo de la reja no puede encogerse por
   debajo de su contenido. En movil la lista es una fila de fichas que suman
   794 px, y esa cifra se propagaba hasta la columna en una ventana de 390.
   Antes no pasaba porque la lista era hija directa de la reja y, al ser un
   contenedor con scroll propio, su minimo era cero. */
.segmentos-menu,
.segmentos-panel { min-width: 0; }

.segmentos-menu { grid-column: 1; }
.segmentos-menu > .kicker { text-align: left; }
.segmentos-menu h2 {
    margin: 0 0 1.8rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
    text-transform: none;
    /* En una columna de 340 px el titular parte en dos; sin esto la segunda
       linea se queda con una sola palabra colgando. */
    text-wrap: balance;
}
.segmentos-menu h2 b { font-weight: 700; color: var(--blue2); }

/* --- el menu --- */
.segmentos-lista { display: flex; flex-direction: column; }
.segmentos-lista label {
    position: relative;
    display: block;
    padding: 1.05rem 1rem 1.05rem 1.3rem;
    border-left: 2px solid var(--line);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink3);
    cursor: pointer;
    transition: color .22s ease, border-color .22s ease, background .22s ease;
}
.segmentos-lista label:hover { color: var(--ink); }

/* --- la viñeta --- */
/* Las cuatro ocupan la misma celda: la altura la manda la mas larga y la
   foto de atras no pega un salto al cambiar de recinto. */
.segmentos-panel {
    grid-column: 2;
    display: grid;
}
.segmento {
    grid-area: 1 / 1;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(20, 50, 70, .22);
    padding: clamp(1.4rem, 2.4vw, 2.1rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .42s ease, transform .42s ease, visibility 0s linear .42s;
}
.segmento h3 {
    margin: 0 0 .7rem;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
}
.segmento p { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.72; color: var(--ink2); text-wrap: pretty; }
.segmento-enlace {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--blue2);
    text-decoration: none;
}
.segmento-enlace i { transition: transform .2s ease; }
.segmento-enlace:hover i { transform: translateX(4px); }

/* --- que enciende cada uno --- */
#seg-1:checked ~ .segmentos-fondo .seg-foto--1,
#seg-2:checked ~ .segmentos-fondo .seg-foto--2,
#seg-3:checked ~ .segmentos-fondo .seg-foto--3,
#seg-4:checked ~ .segmentos-fondo .seg-foto--4,
#seg-5:checked ~ .segmentos-fondo .seg-foto--5 { opacity: 1; }

#seg-1:checked ~ .segmentos-caja .segmentos-lista label[for="seg-1"],
#seg-2:checked ~ .segmentos-caja .segmentos-lista label[for="seg-2"],
#seg-3:checked ~ .segmentos-caja .segmentos-lista label[for="seg-3"],
#seg-4:checked ~ .segmentos-caja .segmentos-lista label[for="seg-4"],
#seg-5:checked ~ .segmentos-caja .segmentos-lista label[for="seg-5"] {
    border-left-color: var(--acc-b);
    color: var(--ink);
    background: #fff;
}
#seg-1:focus-visible ~ .segmentos-caja .segmentos-lista label[for="seg-1"],
#seg-2:focus-visible ~ .segmentos-caja .segmentos-lista label[for="seg-2"],
#seg-3:focus-visible ~ .segmentos-caja .segmentos-lista label[for="seg-3"],
#seg-4:focus-visible ~ .segmentos-caja .segmentos-lista label[for="seg-4"],
#seg-5:focus-visible ~ .segmentos-caja .segmentos-lista label[for="seg-5"] {
    outline: 2px solid var(--acc-b);
    outline-offset: 2px;
}
#seg-1:checked ~ .segmentos-caja .segmento--1,
#seg-2:checked ~ .segmentos-caja .segmento--2,
#seg-3:checked ~ .segmentos-caja .segmento--3,
#seg-4:checked ~ .segmentos-caja .segmento--4,
#seg-5:checked ~ .segmentos-caja .segmento--5 {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .42s ease, transform .42s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .segmento { transition: opacity .2s linear, visibility 0s linear .2s; transform: none; }
    .seg-foto { transition: opacity .2s linear; }
}

/* Entre 861 y 1100 px el menu y la viñeta juntos no dejan foto que ver: se
   estrecha la viñeta antes que quitar nada. */
@media (max-width: 1180px) {
    .segmentos { --seg-menu: 260px; }
    .segmentos-caja { grid-template-columns: var(--seg-menu) minmax(0, 440px) minmax(0, 1fr); }
}

/* En movil la lista pasa a una fila de fichas que se arrastra de lado —en
   vertical se comeria media pantalla— y la foto deja de ser capa de fondo:
   pasa a ser una banda propia arriba, porque a ese ancho una foto detras del
   texto no se ve, solo lo ensucia. */
@media (max-width: 860px) {
    .segmentos { padding: 3rem 0 3.4rem; }
    .segmentos-fondo {
        position: relative;
        inset: auto;
        height: 240px;
        margin: 0 var(--seg-pad) 1.5rem;
        border-radius: 18px;
    }
    .segmentos-fondo::after { background: none; }
    .segmentos-caja {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
        min-height: 0;
    }
    .segmentos-menu, .segmentos-panel { grid-column: 1; }
    .segmentos-menu h2 { margin-bottom: 1.4rem; }
    .segmentos-lista {
        flex-direction: row;
        gap: .55rem;
        overflow-x: auto;
        padding-bottom: .4rem;
        scrollbar-width: none;
    }
    .segmentos-lista::-webkit-scrollbar { display: none; }
    .segmentos-lista label {
        flex: none;
        padding: .7rem 1.1rem;
        border-left: 0;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        font-size: .9rem;
        white-space: nowrap;
    }
    #seg-1:checked ~ .segmentos-caja .segmentos-lista label[for="seg-1"],
    #seg-2:checked ~ .segmentos-caja .segmentos-lista label[for="seg-2"],
    #seg-3:checked ~ .segmentos-caja .segmentos-lista label[for="seg-3"],
    #seg-4:checked ~ .segmentos-caja .segmentos-lista label[for="seg-4"],
    #seg-5:checked ~ .segmentos-caja .segmentos-lista label[for="seg-5"] {
        border-color: var(--acc-b);
        background: var(--acc-b);
        color: #06222F;
    }
    .segmento { box-shadow: 0 14px 36px rgba(20, 50, 70, .12); }
}


/* --- datos de contacto del pie ---
   Van bajo el telefono, dentro del bloque de la izquierda: ese lado es el de
   contacto, y ponerlos a la derecha los mezclaria con la navegacion. */
.pie-datos { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; }
.pie-datos li {
    display: flex;
    gap: .7rem;
    margin-bottom: .65rem;
    font-size: .93rem;
    line-height: 1.6;
    color: rgba(255,255,255,.74);
}
.pie-datos li:last-child { margin-bottom: 0; }
.pie-datos i { color: var(--acc-b); font-size: 1rem; line-height: 1.5; flex: none; width: 18px; text-align: center; }
.pie-datos a { color: rgba(255,255,255,.74); text-decoration: none; }
.pie-datos a:hover { color: #fff; }


/* ---------------------------------------------------------------------------
   23. EL COTIZADOR
   El formulario de contacto de la portada, rehecho: nombre, telefono,
   correo, servicios con opcion multiple, region, comuna, tamano y
   comentario. Los campos nuevos no llevan name a proposito: viajan dentro
   de asunto (ver cotizador.js), para que process-form.php reciba lo mismo
   de siempre.
   ------------------------------------------------------------------------ */

.cotiza {
    background: linear-gradient(180deg, #fff 0%, var(--bg) 140px,
                var(--bg) calc(100% - 140px), #fff 100%);
    padding: 2rem 1.5rem 2.2rem;      /* no cabia en pantalla */
}
.cotiza-caja { max-width: 880px; margin: 0 auto; }
.cotiza-cabecera { margin-bottom: 2.4rem; }
.cotiza-cabecera h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
    text-transform: none;
    text-wrap: balance;
}
.cotiza-cabecera h2 b { font-weight: 700; color: var(--blue2); }
.cotiza-lead { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--ink2); }
.cotiza-lead a { color: var(--blue2); font-weight: 600; }

.cotiza-formulario {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(1.5rem, 4vw, 2.6rem);
    box-shadow: 0 18px 50px rgba(20,50,70,.08);
}

.cotiza-reja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem 1.2rem;
}
.cotiza-campo--ancho { grid-column: 1 / -1; }
.cotiza-campo { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.cotiza-campo > label, .cotiza-servicios legend {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
}
.cotiza-pista { font-weight: 400; color: var(--ink3); }

.cotiza-campo input[type="text"],
.cotiza-campo input[type="tel"],
.cotiza-campo input[type="email"],
.cotiza-campo select,
.cotiza-campo textarea {
    width: 100%;
    min-height: 50px;
    padding: .7rem .95rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: .96rem;
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cotiza-campo textarea { min-height: 120px; resize: vertical; }
.cotiza-campo select {
    appearance: none;
    -webkit-appearance: none;
    /* la flechita, dibujada aqui mismo para no depender de nada */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2354636E' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
    padding-right: 2.4rem;
}
.cotiza-campo input::placeholder,
.cotiza-campo textarea::placeholder { color: var(--ink3); }
.cotiza-campo input:focus-visible,
.cotiza-campo select:focus-visible,
.cotiza-campo textarea:focus-visible {
    outline: none;
    border-color: var(--acc-b);
    box-shadow: 0 0 0 3px rgba(44,180,232,.22);
}
/* el aviso de campo mal relleno, solo cuando ya se intento enviar */
.cotiza-formulario.cotiza--avisada input:invalid,
.cotiza-formulario.cotiza--avisada select:invalid,
.cotiza-formulario.cotiza--avisada textarea:invalid {
    border-color: #D64545;
}

/* --- los servicios, como fichas que se marcan --- */
.cotiza-servicios { margin: 0; padding: 0; border: 0; }
.cotiza-servicios legend { margin-bottom: .55rem; padding: 0; }
.cotiza-opciones { display: flex; flex-wrap: wrap; gap: .55rem; }
.cotiza-opciones label { position: relative; display: block; cursor: pointer; }
.cotiza-opciones input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.cotiza-opciones span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 46px;
    padding: 0 1.15rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink2);
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.cotiza-opciones span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
    transition: background .18s ease;
}
.cotiza-opciones label:hover span { border-color: #BFD3DE; }
.cotiza-opciones input:checked + span {
    border-color: var(--blue2);
    background: #EAF4FA;
    color: var(--blue2);
}
.cotiza-opciones input:checked + span::before { background: var(--acc-b); }
.cotiza-opciones input:focus-visible + span {
    outline: 2px solid var(--acc-b);
    outline-offset: 2px;
}

.cotiza-archivo { font-size: .9rem; color: var(--ink2); }

.cotiza-error {
    margin: 1.1rem 0 0;
    font-size: .9rem;
    font-weight: 600;
    color: #D64545;
}

.cotiza-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-top: 1.4rem;
    padding: 0 2.2rem;
    border: 0;
    border-radius: 10px;
    background: var(--acc-b);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #06222F;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}
.cotiza-boton:hover { background: #56C8F0; }
.cotiza-boton:active { transform: translateY(1px); }

@media (max-width: 640px) {
    .cotiza { padding: 3.4rem 1.25rem 3.8rem; }
    .cotiza-reja { grid-template-columns: 1fr; }
    .cotiza-boton { width: 100%; }
}


/* ---------------------------------------------------------------------------
   24. LA OFERTA DE SERVICIOS
   La columna izquierda —titulo, texto y el indice— queda fija mientras las
   fichas de la derecha se desplazan. Es position: sticky, sin JavaScript: el
   comportamiento de la oferta de Sodexo, con la forma de la casa.
   ------------------------------------------------------------------------ */

.oferta { padding: 4.6rem 1.5rem 5rem; }
.oferta-caja {
    max-width: var(--caja);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

/* --- la columna que se queda --- */
.oferta-lado {
    position: sticky;
    top: 108px;                 /* la barra fija mas un respiro */
}
.oferta-lado h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
    text-transform: none;
}
.oferta-lado h2 b { font-weight: 700; color: var(--blue2); }
.oferta-lead {
    margin: 0 0 1.9rem;
    font-size: .98rem;
    line-height: 1.7;
    color: var(--ink2);
    text-wrap: pretty;
}
.oferta-indice { display: flex; flex-direction: column; }
.oferta-indice a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .8rem .15rem;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: color .18s ease, padding-left .18s ease;
}
.oferta-indice a:first-child { border-top: 1px solid var(--line); }
.oferta-indice i { color: var(--acc-b); transition: transform .18s ease; }
.oferta-indice a:hover { color: var(--blue2); padding-left: .45rem; }
.oferta-indice a:hover i { transform: translateX(4px); }

/* --- las fichas que se desplazan --- */
.oferta-lista { display: flex; flex-direction: column; gap: 26px; }
.oferta-ficha {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20,50,70,.04);
}
.oferta-foto { aspect-ratio: 16 / 7; background: var(--bg); }
.oferta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.oferta-cuerpo { padding: 1.7rem clamp(1.3rem, 3vw, 2.1rem) 1.9rem; }
.oferta-cuerpo h3 {
    margin: 0 0 .7rem;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 300;
    letter-spacing: -.015em;
    color: var(--ink);
}
.oferta-cuerpo h3 b { font-weight: 700; color: var(--blue2); }
.oferta-cuerpo p {
    margin: 0 0 1.15rem;
    font-size: .97rem;
    line-height: 1.72;
    color: var(--ink2);
    text-wrap: pretty;
}
.oferta-mas {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--blue2);
    text-decoration: none;
}
.oferta-mas i { transition: transform .2s ease; }
.oferta-mas:hover i { transform: translateX(4px); }

/* Las fichas tienen ancla desde el indice: que el salto no quede bajo la barra */
.oferta-ficha { scroll-margin-top: 68px; }

@media (max-width: 900px) {
    .oferta { padding: 3.4rem 1.25rem 3.8rem; }
    .oferta-caja { grid-template-columns: 1fr; gap: 2rem; }
    .oferta-lado { position: static; }   /* en una columna no hay nada que fijar */
    .oferta-foto { aspect-ratio: 16 / 9; }
}


/* ---------------------------------------------------------------------------
   25. EL AVISO DE COOKIES
   Franja abajo, de lado a lado, con los dos botones del MISMO peso visual: si
   "aceptar" destacara sobre "rechazar", el consentimiento no seria libre, que
   es justo lo que exigen estas leyes. El aviso solo lo monta cookies.js
   cuando la persona no ha elegido todavia.
   ------------------------------------------------------------------------ */

.cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    background: rgb(var(--velo));
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -12px 40px rgba(6,30,44,.28);
    transform: translateY(100%);
    transition: transform .45s cubic-bezier(.33, 0, .25, 1);
}
.cookies--dentro { transform: none; }
.cookies--fuera { transform: translateY(100%); }

.cookies-caja {
    max-width: var(--caja);
    margin: 0 auto;
    padding: 1.2rem clamp(1.25rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.4rem);
}
.cookies-texto {
    margin: 0;
    font-size: .92rem;
    line-height: 1.65;
    color: rgba(255,255,255,.78);
}
.cookies-texto a { color: var(--acc-b); text-decoration: underline; }
.cookies-texto a:hover { color: #fff; }

.cookies-botones { display: flex; gap: .7rem; flex: none; }
.cookies-boton {
    min-height: 46px;
    padding: 0 1.5rem;
    border-radius: 9px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
/* mismo tamano y misma prominencia para los dos */
.cookies-boton--si {
    border: 1.5px solid var(--acc-b);
    background: var(--acc-b);
    color: #06222F;
}
.cookies-boton--si:hover { background: #56C8F0; border-color: #56C8F0; }
.cookies-boton--no {
    border: 1.5px solid rgba(255,255,255,.5);
    background: transparent;
    color: #fff;
}
.cookies-boton--no:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.cookies-boton:active { transform: translateY(1px); }
.cookies-boton:focus-visible { outline: 3px solid var(--acc-b); outline-offset: 2px; }

@media (max-width: 760px) {
    .cookies-caja { flex-direction: column; align-items: stretch; gap: 1rem; }
    .cookies-botones { flex-direction: row; }
    .cookies-boton { flex: 1; padding: 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cookies { transition: none; }
}


/* ---------------------------------------------------------------------------
   26. PAGINAS LEGALES
   Una columna estrecha y mucho aire: un texto que hay que poder leer sin
   ganas de leerlo. Sin portada de foto, porque no la necesita.
   ------------------------------------------------------------------------ */

.pagina-legal { background: #fff; }

.legal {
    padding: 9rem clamp(1.25rem, 5vw, 3rem) 5rem;   /* sitio para la barra fija */
}
.legal-caja { max-width: 720px; margin: 0 auto; }

.legal h1 {
    margin: 0 0 .6rem;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--ink);
    text-transform: none;
}
.legal-fecha {
    margin: 0 0 3rem;
    font-size: .88rem;
    color: var(--ink3);
}
.legal h2 {
    margin: 3rem 0 .9rem;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--blue2);
    text-transform: none;
}
.legal h3 {
    margin: 1.9rem 0 .6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}
.legal p, .legal li {
    font-size: 1rem;
    line-height: 1.78;
    color: var(--ink2);
    text-wrap: pretty;
}
.legal p { margin: 0 0 1.1rem; }
.legal strong { color: var(--ink); font-weight: 700; }
.legal ul { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .6rem; }
.legal a { color: var(--blue2); font-weight: 600; }
.legal code {
    padding: .1em .4em;
    border-radius: 5px;
    background: var(--bg);
    font-size: .92em;
    color: var(--ink);
}

/* En la pagina legal la barra nace sobre blanco: sin fondo solido, sus
   enlaces blancos serian invisibles. */
.pagina-legal .barra { background: #fff; box-shadow: 0 1px 0 var(--line); }
.pagina-legal .barra::before { opacity: 0; }
.pagina-legal .barra .barra-nav a { color: var(--ink); }
.pagina-legal .barra .barra-trebol { background-color: var(--ink); }
.pagina-legal .barra .barra-cta { color: #06222F; }
.pagina-legal .barra-boton span { background: var(--ink); }

/* --- el enlace del pie --- */
.pie-legal {
    margin-left: 1.1rem;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    text-decoration: underline;
}
.pie-legal:hover { color: #fff; }


/* ---------------------------------------------------------------------------
   27. EL VERDE DE AREAS VERDES
   La palabra "verdes" va en verde y no en el celeste del resto. Sobre blanco
   toma la version oscurecida, la unica legible; sobre la foto de la portada
   toma el verde de marca, que ahi el contraste juega al reves y funciona.
   ------------------------------------------------------------------------ */

/* Los selectores llevan el contenedor delante porque las reglas que pintan
   los titulares (.oferta-cuerpo h3 b, por ejemplo) pesan mas que un ".verde"
   suelto y se lo comerian. */
.verde { color: var(--verde-txt); }
.oferta-cuerpo h3 .verde,
.segmento h3 .verde,
.cotiza-opciones .verde { color: var(--verde-txt); }

/* Sobre la foto de la portada de servicio manda el verde de marca: ahi el
   contraste juega al reves y el oscurecido se apagaria. */
.hero-servicio-txt h1 .verde { color: var(--acc-g); }


/* ---------------------------------------------------------------------------
   28. EL COTIZADOR, PARTIDO EN DOS
   Mitad foto y mitad formulario, dentro de una sola tarjeta: si fueran dos
   cajas se leerian como dos cosas puestas al lado, y esto es una.

   La foto va volteada (se preparo asi, no por CSS) para que ella mire hacia
   el formulario. El encuadre al 88% descubre el pano amarillo entero y algo
   de mesa, sin sacarla del cuadro.
   ------------------------------------------------------------------------ */

.cotiza-bloque {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* mitad y mitad */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(20,50,70,.10);
}
.cotiza-foto { position: relative; background: var(--bg); }
.cotiza-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 88% 28%;
    display: block;
}

.cotiza-panel { padding: clamp(1.5rem, 3.2vw, 2.6rem); }
.cotiza-cabecera { margin-bottom: 1.6rem; }
.cotiza-cabecera h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); margin-bottom: .7rem; }
.cotiza-lead { font-size: .93rem; }

/* dentro del bloque, el formulario pierde su propia tarjeta */
.cotiza-formulario {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.cotiza-reja { grid-template-columns: 1fr 1fr; gap: .95rem .9rem; }
.cotiza-campo { gap: .3rem; }
.cotiza-campo > label { font-size: .84rem; }
.cotiza-campo input,
.cotiza-campo select,
.cotiza-campo textarea { min-height: 44px; padding: .55rem .8rem; font-size: .93rem; }
.cotiza-campo textarea { min-height: 84px; }
.cotiza-boton { margin-top: 1.1rem; min-height: 50px; }

/* --- el telefono: el +56 pegado, dentro del mismo recuadro --- */
.cotiza-tel {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cotiza-tel:focus-within {
    border-color: var(--acc-b);
    box-shadow: 0 0 0 3px rgba(44,180,232,.22);
}
.cotiza-prefijo {
    display: flex;
    align-items: center;
    padding: 0 .5rem 0 .8rem;
    border-right: 1px solid var(--line);
    background: var(--bg);
    font-size: .93rem;
    color: var(--ink3);              /* gris: es un dato, no algo que rellenar */
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.cotiza-tel input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.cotiza-tel input:focus-visible { outline: none; box-shadow: none; }

/* la comuna, apagada mientras no haya region */
.cotiza-campo select:disabled {
    background-color: var(--bg);
    color: var(--ink3);
    cursor: not-allowed;
}

/* para lectores de pantalla, no para la vista */
.cotiza-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- los servicios, plegados --- */
.cotiza-plegable {
    /* referencia para el panel, que se abre FLOTANDO encima */
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
/* El campo que lo contiene tiene que quedar por delante de los de abajo:
   si no, el panel abierto se mete por detras del siguiente campo. */
.cotiza-campo:has(.cotiza-plegable[open]) { position: relative; z-index: 30; }
.cotiza-plegable summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 44px;
    padding: .55rem .8rem;
    font-size: .93rem;
    color: var(--ink3);
    cursor: pointer;
    list-style: none;
}
.cotiza-plegable summary::-webkit-details-marker { display: none; }
.cotiza-plegable summary i { color: var(--ink3); font-size: .8rem; transition: transform .2s ease; }
.cotiza-plegable[open] summary i { transform: rotate(180deg); }
.cotiza-plegable[open] { border-color: var(--acc-b); }
.cotiza-plegable summary:focus-visible {
    outline: 2px solid var(--acc-b);
    outline-offset: 2px;
    border-radius: 9px;
}
/* Una linea SIEMPRE: lo elegido se escribe aqui, recortado con puntos
   suspensivos si no cabe (la lista entera va en el title). Es lo que
   permite que la seccion no cambie de alto elija lo que se elija. */
.cotiza-resumen {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cotiza-resumen.tiene { color: var(--ink); font-weight: 600; }

/* El panel se abre FLOTANDO sobre lo que hay debajo, no empujandolo.
   Empujando pasaban dos cosas, las dos reportadas: los campos de abajo se
   corrian, y al crecer la seccion la capa de la foto de fondo —que se
   desplaza mas despacio que la pagina— recalculaba su posicion y la imagen
   parecia agrandarse. Sacando el panel del flujo, la seccion no cambia de
   alto y la foto se queda quieta. */
.cotiza-plegable .cotiza-opciones {
    position: absolute;
    top: calc(100% + 1px);
    right: -1.5px;
    left: -1.5px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: min(52vh, 340px);
    overflow-y: auto;
    padding: .35rem .35rem .45rem;
    border: 1.5px solid var(--acc-b);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(20, 50, 70, .18);
}
/* abierto, la caja de arriba y el panel son una sola pieza */
.cotiza-plegable[open] { border-radius: 10px 10px 0 0; }
.cotiza-plegable .cotiza-opciones label { display: block; }
.cotiza-plegable .cotiza-opciones span {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 40px;
    padding: 0 .5rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink2);
}
.cotiza-plegable .cotiza-opciones span::before {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid #C3D2D9;
    background: #fff;
}
.cotiza-plegable .cotiza-opciones label:hover span { background: var(--bg); }
.cotiza-plegable .cotiza-opciones input:checked + span {
    background: none;
    color: var(--ink);
    font-weight: 600;
}
.cotiza-plegable .cotiza-opciones input:checked + span::before {
    background: var(--acc-b);
    border-color: var(--acc-b);
    box-shadow: inset 0 0 0 3px #fff;
}

/* lo elegido, en fichas pequenas debajo */

@media (max-width: 940px) {
    .cotiza-bloque { grid-template-columns: 1fr; }
    .cotiza-foto { min-height: 280px; }
    .cotiza-foto img { position: static; height: 280px; object-position: 88% 22%; }
}
@media (max-width: 640px) {
    .cotiza-reja { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cotiza-plegable summary i { transition: none; }
}


/* ---------------------------------------------------------------------------
   29. EL COTIZADOR, A MEDIDA DE PANTALLA
   Medido: la seccion ocupaba 1.099 px y la ventana de un portatil son 700.
   Se recorta por tres frentes, porque con uno solo no bastaba: menos aire en
   la seccion, panel mas apretado, y nombre y telefono compartiendo fila.
   ------------------------------------------------------------------------ */

.cotiza-panel { padding: clamp(1.2rem, 2.4vw, 1.9rem); }
.cotiza-cabecera { margin-bottom: 1.1rem; }
.cotiza-cabecera h2 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); margin-bottom: .5rem; }
.cotiza-lead { font-size: .88rem; line-height: 1.6; }

.cotiza-reja { gap: .7rem .8rem; }
.cotiza-campo { gap: .25rem; }
.cotiza-campo > label { font-size: .8rem; }
.cotiza-campo input,
.cotiza-campo select,
.cotiza-campo textarea,
.cotiza-plegable summary { min-height: 42px; padding: .45rem .75rem; font-size: .91rem; }
.cotiza-campo textarea { min-height: 66px; }
.cotiza-plegable .cotiza-opciones span { min-height: 36px; font-size: .89rem; }
.cotiza-plegable .cotiza-opciones { padding: .15rem .3rem .35rem; }
.cotiza-boton { margin-top: .8rem; min-height: 46px; }

/* Nombre y telefono, en la misma fila: en media pagina caben los dos y se
   ahorra una linea entera. */
.cotiza-campo--medio { grid-column: auto; }

@media (max-width: 640px) {
    .cotiza-campo--medio { grid-column: 1 / -1; }
}

/* el ultimo apreton, para entrar en una ventana de 820 px con margen */
.cotiza-cabecera { margin-bottom: .85rem; }
.cotiza-cabecera h2 { margin-bottom: .35rem; }
.cotiza-lead { margin-bottom: 0; }
.cotiza-reja { gap: .6rem .8rem; }
.cotiza-boton { margin-top: .6rem; }


/* ---------------------------------------------------------------------------
   30. LAS VOCES: citas a la izquierda, fotos a la derecha
   Antes las fotos cruzaban por detras de las citas —la banda viva— y ademas
   habia frases flotando en el fondo. Las tres cosas competian entre si y el
   conjunto se leia sucio.

   Ahora cada cosa tiene su sitio: las citas en su columna y las fotos en la
   suya, donde se ven enteras. En la columna de fotos hay mezcla a proposito,
   unos mirando a camara y otros trabajando.
   ------------------------------------------------------------------------ */

.voces {
    position: relative;
    overflow: hidden;
    padding: 5rem 1.25rem 5.4rem;
    background: linear-gradient(168deg, #0C3E58 0%, var(--blue) 48%, #082B3D 100%);
}

.voces-caja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: var(--caja);
    margin: 0 auto;
}

/* El orden del HTML pone las fotos primero —para que carguen cuanto antes—
   pero en pantalla van a la derecha. */
.voces-texto { grid-column: 1; grid-row: 1; text-align: left; }
.voces-fotos { grid-column: 2; grid-row: 1; }

.voces-texto h2 {
    margin: 0 0 2.2rem;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}
.voces-texto h2 b { font-weight: 700; color: var(--acc-b); }
.voces-texto .baraja-puntos { justify-content: flex-start; }

/* --- el carrusel de fotos --- */
.voces-fotos {
    position: relative;
    aspect-ratio: 3 / 4;
    max-height: 520px;
    border-radius: 20px;
    overflow: hidden;
    background: #0A2A3B;
    box-shadow: 0 26px 64px rgba(3, 18, 28, .45);
}
.voz-foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.voz-foto.activa { opacity: 1; }

/* Un velo muy leve por abajo, para que el borde de la tarjeta no corte la
   foto en seco contra el azul. */
.voces-fotos::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6,30,44,0) 62%, rgba(6,30,44,.35) 100%);
}

@media (max-width: 900px) {
    .voces-caja { grid-template-columns: 1fr; gap: 2.2rem; }
    /* en movil la foto va primero: entra el rostro y luego la cita */
    .voces-fotos { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; max-height: 300px; }
    .voces-texto { grid-column: 1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .voz-foto { transition: none; }
}


/* ---------------------------------------------------------------------------
   31. LA REJA DEL COTIZADOR, A LA MEDIDA DE CADA CAMPO
   Con dos columnas iguales, un campo ocupaba media fila o la fila entera
   aunque su contenido pidiera mucho menos. El telefono es el caso claro:
   con el +56 delante no pasa de 210 px y se le daba la mitad de la fila.

   Doce columnas y cada campo toma las que necesita. Eso deja sitio para que
   "Tamano de la empresa" suba junto al correo, con lo que se ahorra una fila
   entera sin quitar ningun campo.
   ------------------------------------------------------------------------ */

.cotiza-reja { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.cotiza-campo--ancho { grid-column: span 12; }
.cotiza-campo--7     { grid-column: span 7; }
.cotiza-campo--6     { grid-column: span 6; }
.cotiza-campo--5     { grid-column: span 5; }

/* el comentario, algo mas bajo: dos lineas bastan para lo que se pide ahi */
.cotiza-campo textarea { min-height: 58px; }

@media (max-width: 640px) {
    .cotiza-campo--7,
    .cotiza-campo--6,
    .cotiza-campo--5 { grid-column: span 12; }
}

/* el ultimo apreton: con esto entra tambien en un portatil de 700 px utiles */
.cotiza { padding: 1.5rem 1.5rem 1.7rem; }
.cotiza-reja { gap: .5rem .75rem; }
.cotiza-lead { line-height: 1.5; }
.cotiza-boton { margin-top: .5rem; }

/* El numero se cortaba: pedia 125 px y tenia 98. El rotulo del +56 llevaba
   mas relleno del necesario, y el espaciado entre letras en un campo corto
   solo resta sitio. */
.cotiza-prefijo { padding: 0 .45rem 0 .6rem; }
.cotiza-tel input { letter-spacing: normal; }

/* El nombre mas largo de las 346 comunas no cabe por 8 px: mejor puntos
   suspensivos que un corte a hachazo. Al abrir el desplegable se lee entero. */
.cotiza-campo select { text-overflow: ellipsis; }


/* ---------------------------------------------------------------------------
   32. EL COTIZADOR: LA FOTO DETRAS, EL FORMULARIO ENCIMA
   Antes foto y formulario eran un solo bloque centrado de 880 px, con todo lo
   demas en blanco a los lados. Ahora son dos capas distintas y se usa el
   ancho entero:

     - La foto va a sangre desde el borde izquierdo de la pantalla y se
       desplaza mas despacio que la pagina, de modo que se lee como si
       estuviera DETRAS y no pegada al formulario.
     - El formulario es una tarjeta que flota encima, a la derecha, y monta
       un poco sobre la foto para que se note que son dos planos.
   ------------------------------------------------------------------------ */

.cotiza {
    position: relative;
    overflow: hidden;
    padding: 3rem 0 3.2rem;
    background: linear-gradient(180deg, #fff 0%, var(--bg) 120px,
                var(--bg) calc(100% - 120px), #fff 100%);
}

/* --- la capa de atras --- */
.cotiza-fondo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(300px, 54%, 900px);
    overflow: hidden;
    border-radius: 0 22px 22px 0;
}
/* El lienzo sobra por arriba y por abajo: ese sobrante es el recorrido que
   necesita el desplazamiento para no dejar huecos. */
.cotiza-lienzo {
    position: absolute;
    inset: -16% 0;
    background-size: cover;
    background-position: 88% 30%;
    will-change: transform;
}
/* Un velo hacia la derecha, donde arranca la tarjeta: sin el, la foto compite
   con el formulario justo en el borde. */
.cotiza-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6,30,44,0) 55%, rgba(6,30,44,.28) 100%);
}

/* --- la capa de delante --- */
.cotiza-caja {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    align-items: center;
}

.cotiza-panel {
    grid-column: 2;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(20,50,70,.20);
    padding: clamp(1.3rem, 2.4vw, 2rem);
}

@media (max-width: 1080px) {
    .cotiza-caja { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
    .cotiza-fondo { width: 46%; }
}

@media (max-width: 860px) {
    /* En estrecho no hay sitio para dos capas: la foto se pone arriba, con su
       alto propio, y el formulario debajo. */
    .cotiza { padding: 0 0 2.4rem; }
    .cotiza-fondo {
        position: relative;
        width: 100%;
        height: 260px;
        border-radius: 0;
        margin-bottom: -2.6rem;
    }
    .cotiza-lienzo { inset: 0; background-position: 88% 22%; }
    .cotiza-fondo::after {
        background: linear-gradient(180deg, rgba(6,30,44,0) 45%, rgba(6,30,44,.35) 100%);
    }
    .cotiza-caja { grid-template-columns: 1fr; padding: 0 1rem; }
    .cotiza-panel { grid-column: 1; }
}

/* La foto tiene que pasar POR DETRAS de la tarjeta, no quedarse antes: es el
   solape lo que hace ver que son dos planos y no dos piezas pegadas. */
.cotiza-fondo { width: clamp(320px, 66%, 1150px); }
.cotiza { padding: 2rem 0 2.2rem; }
.cotiza-panel { padding: clamp(1.2rem, 2.2vw, 1.8rem); }

@media (max-width: 860px) {
    .cotiza-fondo { width: 100%; }
    .cotiza { padding: 0 0 2.2rem; }
}

/* La columna de fotos estaba reducida y las personas se veian pequenas. Gana
   peso frente al texto y pasa a proporcion de retrato. */
.voces-caja { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.voces-fotos { aspect-ratio: 4 / 5; max-height: 600px; }

@media (max-width: 900px) {
    .voces-caja { grid-template-columns: 1fr; }
    .voces-fotos { aspect-ratio: 4 / 3; max-height: 320px; }
}


/* ---------------------------------------------------------------------------
   33. LAS CITAS FANTASMA VUELVEN AL FONDO DE LOS TESTIMONIOS
   Al pasar las fotos a su propia columna, el fondo de la seccion quedo liso.
   Estas frases estaban antes y hacian falta: son fragmentos de las mismas
   citas, a muy baja opacidad, derivando despacio. Dan textura sin pedir que
   nadie las lea. Son 36, repartidas en cuatro planos de profundidad
   (scratchpad/aplicar_frases.py las coloca sin que se pisen).

   Van pegadas al fondo real de la seccion (z-index 0), y todo lo demas —
   citas y fotos— pasa por encima. Donde caen bajo la tarjeta blanca o la
   foto sencillamente no se ven: son un fondo, no un elemento mas.
   ------------------------------------------------------------------------ */

.voces-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    /* Sin esto, una frase que pasa por detras de la foto reaparece al otro
       lado convertida en un trozo sin sentido ("...solver problemas"). El
       degradado la apaga antes de llegar, y se adapta solo a cualquier ancho
       —no hay que ir colocando cada frase a mano. */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 74%);
            mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 74%);
}
/* La profundidad no se dibuja: se deduce. Lo que esta lejos se ve mas
   pequeño, mas apagado, recorre menos y tarda mas. Las cuatro cosas salen
   aqui del MISMO numero —el tamaño, --s— para que ninguna contradiga a las
   otras; si la opacidad fuera plana, como antes, todo caeria en un unico
   plano por muchas frases que hubiera. Por eso tambien hay el doble de
   pequeñas que de grandes: es lo que hace parecer que siguen hacia atras. */
.voces-fondo span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: calc(.95rem * var(--s, 1));
    font-style: italic;
    white-space: nowrap;
    color: rgba(255, 255, 255, calc(.022 + var(--s, 1) * .072));
    /* El recorrido es un bucle cerrado, no un vaiven: un vaiven se lee como
       que algo desliza, y un bucle como que algo esta suspendido. Lo cercano
       recorre mas y va mas rapido —1,3 px/s frente a 0,7— y la profundidad
       aguanta. Los retardos negativos, todos distintos, evitan que floten a
       una.

       La amplitud salia antes de var(--s) DENTRO de los fotogramas, exacta
       por frase. El precio, medido: una animacion con var() en sus
       fotogramas no puede irse al compositor, asi que las 36 iban al hilo
       principal en cada cuadro —38 % del hilo en reposo, y en un equipo
       flojo la pagina entera a 36 cuadros—. Estos cuatro planos con valores
       ya resueltos dicen lo mismo (el error maximo es de 2 px en recorridos
       de 10-23) y cuestan cero: corren en el compositor. Tamaño, opacidad y
       duracion siguen saliendo de --s, que ahi se resuelve una sola vez. */
    animation-duration: calc(10s + var(--s, 1) * 6s);
    animation-timing-function: ease-in-out;
    animation-delay: var(--r, 0s);
    animation-iteration-count: infinite;
}
.voces-fondo span.plano-1 { animation-name: flotarCita1; }
.voces-fondo span.plano-2 { animation-name: flotarCita2; }
.voces-fondo span.plano-3 { animation-name: flotarCita3; }
.voces-fondo span.plano-4 { animation-name: flotarCita4; }
@keyframes flotarCita1 {
      0% { transform: translate3d(0, 0, 0); }
     25% { transform: translate3d(6.0px, -8.9px, 0); }
     50% { transform: translate3d(9.9px, -3.0px, 0); }
     75% { transform: translate3d(3.5px, 5.5px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes flotarCita2 {
      0% { transform: translate3d(0, 0, 0); }
     25% { transform: translate3d(7.3px, -10.9px, 0); }
     50% { transform: translate3d(12.2px, -3.6px, 0); }
     75% { transform: translate3d(4.3px, 6.7px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes flotarCita3 {
      0% { transform: translate3d(0, 0, 0); }
     25% { transform: translate3d(10.4px, -15.6px, 0); }
     50% { transform: translate3d(17.3px, -5.2px, 0); }
     75% { transform: translate3d(6.0px, 9.5px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes flotarCita4 {
      0% { transform: translate3d(0, 0, 0); }
     25% { transform: translate3d(13.6px, -20.4px, 0); }
     50% { transform: translate3d(22.7px, -6.8px, 0); }
     75% { transform: translate3d(8.0px, 12.5px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Sin esto la caja —que no esta posicionada— quedaria por debajo del fondo,
   que si lo esta. */
.voces-caja { position: relative; z-index: 1; }

/* En movil no hay hueco vacio que texturizar: la foto y la cita ocupan la
   seccion entera y cualquier frase cae encima del contenido —una llegaba a
   quedar bajo el titular, leyendose como si fuera su subtitulo. */
@media (max-width: 720px) {
    .voces-fondo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* Los planos van nombrados para que este apagado tambien los alcance:
       .voces-fondo span a secas pierde contra .voces-fondo span.plano-N. */
    .voces-fondo span,
    .voces-fondo span.plano-1, .voces-fondo span.plano-2,
    .voces-fondo span.plano-3, .voces-fondo span.plano-4 { animation: none; }
}


/* ---------------------------------------------------------------------------
   35. LA BURBUJA DE WHATSAPP
   Un enlace de verdad, no un boton con guion: funciona aunque el JavaScript
   falle y el navegador puede abrirlo en otra pestaña o copiar la direccion
   como cualquier enlace.

   Va en verde de WhatsApp a proposito, no en los colores del sitio: en esa
   esquina el verde se reconoce sin leer nada, y esa es toda su gracia.
   ------------------------------------------------------------------------ */

.wsp {
    position: fixed;
    right: clamp(1rem, 2.4vw, 1.6rem);
    bottom: clamp(1rem, 2.4vw, 1.6rem);
    /* por debajo del aviso de cookies (1500) y del telon de la portada
       (1400): mientras el telon esta puesto no tiene nada que hacer ahi */
    z-index: 1300;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(6, 30, 44, .26),
                0 0 0 8px rgba(37, 211, 102, .16);
    /* entra cuando se ha bajado un poco; sobre la portada solo estorbaria */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .3s ease, transform .3s ease,
                visibility 0s linear .3s, background-color .2s ease;
}
.wsp--dentro {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease,
                visibility 0s, background-color .2s ease;
}
.wsp:hover { background: #1FBE5B; }
.wsp:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 8px 22px rgba(6, 30, 44, .26), 0 0 0 7px rgba(37, 211, 102, .55);
}

/* El aviso de cookies es una franja al pie de pagina y taparia la burbuja:
   mientras esta puesto, la burbuja se sube por encima. El aviso lo inyecta
   cookies.js al final del body, asi que no vale un selector de hermanos. */
body:has(.cookies--dentro) .wsp {
    bottom: calc(clamp(1rem, 2.4vw, 1.6rem) + 104px);
}

@media (max-width: 560px) {
    .wsp { width: 52px; height: 52px; font-size: 1.55rem; }
    body:has(.cookies--dentro) .wsp {
        bottom: calc(clamp(1rem, 2.4vw, 1.6rem) + 132px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wsp { transform: none; transition: opacity .2s linear, visibility 0s linear .2s; }
    .wsp--dentro { transition: opacity .2s linear, visibility 0s; }
}


/* ---------------------------------------------------------------------------
   36. EL ESQUELETO DE LAS LANDINGS DE SERVICIO
   La forma de la pagina de limpieza de ISS, en el lenguaje de CleanVip:
   portada partida, barra de saltos, tarjetas de beneficio, tarjetas de otros
   servicios y cierre sobre foto.

   Se toma su ESTRUCTURA, no su aspecto. Ellos usan beige y tarjetas azules
   solidas; aqui va el gris azulado del sitio y las tarjetas blancas de
   siempre. Copiar su color seria parecerse a ISS, que es justo lo que no se
   quiere; copiar su estructura es aprender de ella.
   --------------------------------------------------------------------------- */

.hero-partida {
    /* la barra deja de ser transparente en estas paginas (ver mas abajo), asi
       que el relleno de arriba tiene que dejarla pasar */
    padding: calc(70px + 3rem) clamp(1rem, 4vw, 3rem) 3.6rem;
    background: linear-gradient(160deg, #EDF2F6 0%, #E3EBF1 55%, #DCE6ED 100%);
}
.hero-partida-caja {
    max-width: var(--caja);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: center;
}
.hero-partida-txt .kicker { text-align: left; margin-bottom: .5rem; }
.hero-partida-txt h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--ink);
    text-wrap: balance;
}
.hero-partida-txt h1 b { font-weight: 700; color: var(--blue2); }
.hero-partida-lead {
    max-width: 52ch;
    margin: 0 0 1.7rem;
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--ink2);
    text-wrap: pretty;
}
.hero-partida-acciones {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}
.hero-partida-tel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--blue2);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}
.hero-partida-tel:hover { text-decoration: underline; }
.hero-partida-foto {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(20, 50, 70, .22);
}
.hero-partida-foto img {
    width: 100%;
    height: auto;                 /* ver la nota de .incluye-tarjeta img */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.hero-partida-foto .incluye-hueco { aspect-ratio: 4 / 3; }

/* La barra superior nace transparente y con el texto en blanco porque esta
   pensada para una foto a sangre oscura. Sobre la banda clara de la portada
   partida no se lee, asi que en estas paginas nace solida.

   Va con :has() y no con una clase puesta a mano porque barra.js hace
   toggle() en cada scroll y se la quitaria al volver arriba. */
body:has(.hero-partida) .barra {
    background: #fff;
    box-shadow: 0 1px 0 var(--line), 0 8px 28px rgba(20, 50, 70, .09);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
body:has(.hero-partida) .barra::before { opacity: 0; }
body:has(.hero-partida) .barra-trebol { background-color: var(--ink); }
body:has(.hero-partida) .barra-nav a { color: var(--ink); }
body:has(.hero-partida) .barra-boton span { background: var(--ink); }

/* --- la barra de saltos --- */
.saltos {
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.saltos-caja {
    max-width: var(--caja);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
    display: flex;
    gap: clamp(1.2rem, 4vw, 3rem);
    /* en movil se desliza en vez de apilarse: apilada ocuparia media pantalla
       antes de que empiece la pagina */
    overflow-x: auto;
    scrollbar-width: none;
}
.saltos-caja::-webkit-scrollbar { display: none; }
.saltos-caja a {
    flex: none;
    padding: 1.05rem 0;
    border-bottom: 2px solid transparent;
    color: var(--ink2);
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}
.saltos-caja a:hover {
    color: var(--blue2);
    border-bottom-color: var(--acc-b);
}

/* El salto tiene que dejar aire por arriba: la barra superior es fija y sin
   esto el titulo de la seccion queda debajo de ella. */
#servicio, #modo, #respaldo, #otras, #cotizar { scroll-margin-top: 68px; }

@media (max-width: 860px) {
    .hero-partida { padding-top: calc(64px + 2.2rem); padding-bottom: 2.6rem; }
    .hero-partida-caja { grid-template-columns: 1fr; }
    /* la foto primero: es lo que ancla, y el texto queda entero debajo */
    .hero-partida-foto { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
    .saltos-caja a { transition: none; }
}


/* --- el respaldo: las cifras de la landing ---
   La forma es la del bloque de cifras de ISS: banda oscura sobre foto,
   titular a un lado, texto al otro, y las cifras en fichas debajo.

   El contenido va al reves a proposito. De las seis cifras de ISS, dos son de
   tamaño y cuatro de resultado; y en tamaño CleanVip pierde contra 51.525
   personas. Asi que la de resultado —la rotacion— va primera y grande, y las
   de tamaño quedan detras, de apoyo. La rotacion bajo 10% es justo lo que una
   empresa de 51.525 personas no puede prometer. */
.respaldo {
    position: relative;
    padding: 4.2rem clamp(1rem, 4vw, 3rem) 4.6rem;
    background: url(../img/respaldo-fondo.webp) center / cover no-repeat;
    background-attachment: scroll;
}
.respaldo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(168deg, rgba(8, 40, 58, .93) 0%,
                rgba(6, 30, 44, .90) 55%, rgba(4, 22, 33, .94) 100%);
}
.respaldo-caja { position: relative; max-width: var(--caja); margin: 0 auto; }
.respaldo-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.2rem, 4vw, 3rem);
    margin-bottom: 2.4rem;
}
.respaldo-intro h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}
.respaldo-intro h2 b { font-weight: 700; color: var(--acc-b); }
.respaldo-txt p {
    margin: 0 0 .9rem;
    font-size: .98rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, .82);
    text-wrap: pretty;
}
.respaldo-txt p:last-child { margin-bottom: 0; }
.respaldo-reja {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.respaldo-dato {
    padding: 1.5rem 1.4rem 1.6rem;
    border-radius: 16px;
    /* translucido y no color plano: deja ver la foto de detras y ata la ficha
       a la banda, en vez de flotar como un recorte pegado encima */
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
}
.respaldo-num {
    display: block;
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
    /* tabulares: al contar, "8" y "10" ocupan lo mismo y la ficha no baila */
    font-variant-numeric: tabular-nums;
}
.respaldo-dato h3 {
    margin: .6rem 0 .35rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--acc-b);
}
.respaldo-dato p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74);
    text-wrap: pretty;
}
/* Las fichas sin dato: el mismo trato que las fotos pendientes. Se ven, para
   que se sepa que falta, pero no se leen como una cifra real. */
.respaldo-dato--falta {
    background: rgba(255, 255, 255, .035);
    border-style: dashed;
}
.respaldo-num--falta { color: rgba(255, 255, 255, .38); }
.respaldo-dato--falta h3 { color: rgba(255, 255, 255, .55); }
.respaldo-dato--falta p { color: rgba(255, 255, 255, .5); }

@media (max-width: 900px) {
    .respaldo-intro { grid-template-columns: 1fr; }
    .respaldo-reja { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .respaldo-reja { grid-template-columns: 1fr; }
}


/* Los sectores que todavia no tienen foto propia. No se pone una
   parecida: una imagen de oficina bajo "salud" seria mentir justo en
   el recinto que se esta prometiendo saber tratar. */
.seg-foto--falta {
    background-image:
        repeating-linear-gradient(-45deg, #E7EDF2 0 14px, #DFE7ED 14px 28px);
}
.seg-foto--falta::after {
    content: "Foto pendiente";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #8FA3B0;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
   37. EL EQUIPO
   Delante de las cifras, pegado a ellas: este bloque declara y la
   rotacion y la accidentabilidad, justo debajo, lo prueban. Comparte el
   fondo gris con ellas para leerse como una sola pieza.
   --------------------------------------------------------------------------- */
.gente {
    padding: 4.2rem clamp(1rem, 4vw, 3rem) 4rem;
    background: var(--bg);
}
.gente-caja { max-width: var(--caja); margin: 0 auto; }
.gente-txt { max-width: 62ch; margin-bottom: 2rem; }
.gente-txt h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}
.gente-txt h2 b { font-weight: 700; color: var(--blue2); }
.gente-txt p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--ink2);
    text-wrap: pretty;
}
/* Sin cajas, a peticion del cliente: icono, titulo y texto a pelo sobre
   el fondo de la seccion. El aire entre columnas hace de separador. */
.gente-lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.9rem 2.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Las cuatro cajas de icono, identicas. Los iconos de fuente traen la caja
   de linea de su tamano —22x31— y el casco dibujado mide 22x22, asi que sin
   igualarlas el casco quedaba 3 px mas abajo y su titulo 9 px mas arriba.
   Con line-height 1 la caja del glifo vale lo que el glifo. */
.gente-lista i,
.gente-lista .icono-casco {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--acc-b);
}
.gente-lista h3 {
    margin: .7rem 0 .35rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink);
}
.gente-lista p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ink2);
    text-wrap: pretty;
}
@media (max-width: 1000px) {
    .gente-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .gente-lista { grid-template-columns: 1fr; }
}



/* ---------------------------------------------------------------------------
   38. PANTALLAS GRANDES
   Medido en el monitor de 27" del cliente: con la caja fija en 1180 px
   sobraban 370 px de margen vacio a cada lado y el contenido ocupaba el 61 %
   de la pantalla.

   El primer intento uso escalones fijos —min-width 1600/1920/2400— y NO
   funciono en su pantalla: el navegador y su barra lateral se comen unos
   60 px, el area util quedaba en ~1860 y el salto de 1920 no llegaba a
   entrar. Los escalones fijos fallan justo asi, y en silencio.

   Ahora todo es fluido y no depende de acertar un numero:

     --caja  crece con vw hasta un tope (arriba, en :root).
     La LETRA sube con la pantalla. Importa tanto como el ancho: el sitio
     esta medido en rem, asi que subir la raiz escala titulares, textos,
     espaciados y botones a la vez. Ensanchar sin agrandar dejaria el mismo
     texto pequeño en una caja mayor, que se ve peor que antes.
       1440 -> 16 px   1860 -> 16,9   1920 -> 17,1   2560 -> 18,5 (tope)
   --------------------------------------------------------------------------- */
html { font-size: clamp(16px, 12.8px + 0.223vw, 18.5px); }

/* La banda de sectores va mas ancha que las cajas de texto: su foto ocupa
   media seccion y con el ancho de una caja normal se queda estrecha. */
.segmentos { --seg-caja: clamp(1400px, 92vw, 1900px); }


/* ---------------------------------------------------------------------------
   39. EL AVISO DE SECCION EN CONSTRUCCION
   Mientras se terminan los servicios, Noticias y Trabajar, sus enlaces no
   llevan a una pagina en blanco con un cartel —eso es un callejon sin
   salida— sino a un aviso centrado que se cierra y deja seguir leyendo.

   Todo el comportamiento esta en javascript.js/construccion.js, incluida la
   lista de secciones. Cuando una se termine, se le quita de esa lista.
   --------------------------------------------------------------------------- */
.obra {
    position: fixed;
    inset: 0;
    z-index: 1400;              /* por encima de la barra y de la burbuja */
    display: grid;
    place-items: center;
    padding: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.obra--dentro {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility 0s;
}
.obra-velo {
    position: absolute;
    inset: 0;
    background: rgba(6, 30, 44, .62);
    backdrop-filter: blur(2px);
}
.obra-caja {
    position: relative;
    width: min(100%, 470px);
    max-height: calc(100dvh - 2.4rem);
    overflow-y: auto;
    padding: 2.4rem clamp(1.4rem, 5vw, 2.6rem) 2rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(3, 18, 28, .45);
    text-align: center;
    /* entra subiendo un poco: sin movimiento parece que ya estaba ahi */
    transform: translateY(14px) scale(.98);
    transition: transform .32s cubic-bezier(.33, 0, .25, 1);
}
.obra--dentro .obra-caja { transform: none; }
.obra-cerrar {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink3);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.obra-cerrar svg { width: 17px; height: 17px; }
.obra-cerrar:hover { background: var(--bg); color: var(--ink); }
.obra-cerrar:focus-visible { outline: 2px solid var(--acc-b); outline-offset: 2px; }
.obra-dibujo { width: min(220px, 62%); height: auto; display: block; margin: 0 auto 1.2rem; }
.obra-caja h2 {
    margin: 0 0 .7rem;
    font-size: clamp(1.2rem, 3.4vw, 1.5rem);
    font-weight: 300;
    line-height: 1.24;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}
.obra-caja h2 b { font-weight: 700; color: var(--blue2); }
.obra-caja p {
    margin: 0 0 1.6rem;
    font-size: .96rem;
    line-height: 1.65;
    color: var(--ink2);
    text-wrap: pretty;
}
.obra-acciones { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.obra-wsp {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.obra-wsp i { color: #25D366; font-size: 1.05rem; }
.obra-wsp:hover { border-color: #25D366; background: #F2FBF5; }

/* el fondo no se mueve mientras el aviso esta puesto */
.obra-quieto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .obra, .obra-caja, .obra-cerrar, .obra-wsp { transition: none; }
    .obra-caja { transform: none; }
}

/* --- el personaje trapeando ---
   Cada pieza gira sobre SU articulacion y las tres animaciones duran lo
   mismo y arrancan a la vez: si no, las partes se mueven por su cuenta y la
   figura se descoyunta.

   El origen va en coordenadas ABSOLUTAS del lienzo (transform-box:
   view-box), que es lo que permite poner el eje donde de verdad esta la
   articulacion. Con fill-box se cuenta desde la caja de cada pieza y el eje
   cae en otro sitio: es el mismo error que costo el latido del logotipo. */
.obra-mopa {
    transform-box: view-box;
    transform-origin: 212px 78px;      /* la mano */
    animation: obraBarrer 2.4s ease-in-out infinite alternate;
}
.obra-brazo {
    transform-box: view-box;
    transform-origin: 232px 56px;      /* el hombro */
    animation: obraBrazo 2.4s ease-in-out infinite alternate;
}
.obra-torso {
    transform-box: view-box;
    transform-origin: 236px 92px;      /* la cadera */
    animation: obraTorso 2.4s ease-in-out infinite alternate;
}
/* el brillo del suelo respira con el barrido: recien pasada la mopa, mas */
.obra-charco, .obra-brillo {
    animation: obraBrillo 2.4s ease-in-out infinite alternate;
}
@keyframes obraBarrer { from { transform: rotate(-10deg); }
                          to { transform: rotate(9deg); } }
@keyframes obraBrazo  { from { transform: rotate(4deg); }
                          to { transform: rotate(-5deg); } }
@keyframes obraTorso  { from { transform: rotate(-2.5deg); }
                          to { transform: rotate(1.5deg); } }
@keyframes obraBrillo { from { opacity: .5; } to { opacity: .22; } }

@media (prefers-reduced-motion: reduce) {
    .obra-mopa, .obra-brazo, .obra-torso,
    .obra-charco, .obra-brillo { animation: none; }
}