/* Web pública de MEYGA (réplica de meyga.net). CSS a mano, sin framework:
   tokens medidos de la web original (Framer). Un solo color de texto con
   escalera de opacidad, un solo acento (amarillo).

   MOVIMIENTO: todos los valores (distancias, retardos, duraciones y curvas)
   están medidos en la web de Framer con el navegador, no elegidos a ojo:
   - Muelle de aparición: spring(stiffness 150, damping 40, mass 1) ≈ 1,48 s.
   - Palabras del hero: desenfoque 10px → 0, 3,25 s (título) y 2,8 s (párrafo).
   - Hover: 0,4 s ease-in-out (botones, tarjetas); O2 con rebote. */

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/geist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --fondo-exterior: #f2f2f2;
    --blanco: #ffffff;
    --crema: #f8f7f4;
    --oscuro: #1f1f1f;
    --tinta: #262626;
    --tinta-suave: #5e5e5e;
    --tinta-muda: #8a8a8a;
    --linea: rgba(38, 38, 38, 0.1);
    --linea-nav: #ebebeb;
    --acento: #ffc127;
    --acento-suave: rgba(255, 193, 39, 0.2);
    --marino: #272969;
    --whatsapp: #25d366;
    --radio: 12px;
    --radio-chico: 8px;
    --ancho: 1200px;
    --fuente: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Curvas. Las de abajo son aproximaciones; @supports las sustituye por
       las curvas exactas (linear()) en navegadores modernos. */
    --hover: cubic-bezier(0.44, 0, 0.56, 1);
    --muelle: cubic-bezier(0.22, 1, 0.36, 1);
    --curva-titulo: cubic-bezier(0.1, 0.8, 0.2, 1);
    --curva-parrafo: cubic-bezier(0.1, 0.8, 0.2, 1);
    --rebote: cubic-bezier(0.34, 1.35, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --muelle: linear(0, 0.1423 4.2%, 0.3278 8.3%, 0.4793 12.5%, 0.5981 16.7%, 0.6893 20.8%, 0.7597 25%, 0.8146 29.2%, 0.8567 33.3%, 0.8894 37.5%, 0.9145 41.7%, 0.9339 45.8%, 0.949 50%, 0.9606 54.2%, 0.9695 58.3%, 0.9765 62.5%, 0.9818 66.7%, 0.9859 70.8%, 0.9892 75%, 0.9916 79.2%, 0.9935 83.3%, 0.995 87.5%, 0.9961 91.7%, 0.997 95.8%, 1);
        --curva-titulo: linear(0, 0.2396 3.1%, 0.4704 6.2%, 0.6319 9.3%, 0.7441 12.3%, 0.8221 15.4%, 0.8763 18.5%, 0.914 21.6%, 0.9402 24.7%, 0.9585 27.8%, 0.9711 30.9%, 0.9799 33.9%, 0.986 37%, 0.9903 40.1%, 0.9933 43.2%, 0.9953 46.3%, 0.9967 49.4%, 0.9977 52.5%, 0.9984 55.5%, 0.9989 58.6%, 0.9992 61.7%, 0.9995 64.8%, 0.9996 67.9%, 0.9997 71%, 0.9998 74.1%, 1 77.1%, 1);
        --curva-parrafo: linear(0, 0.2829 3.2%, 0.5081 6.5%, 0.6626 9.7%, 0.7686 12.9%, 0.8413 16.1%, 0.8911 19.4%, 0.9253 22.6%, 0.9488 25.8%, 0.9649 29%, 0.9759 32.3%, 0.9835 35.5%, 0.9887 38.7%, 0.9922 41.9%, 0.9947 45.2%, 0.9963 48.4%, 0.9975 51.6%, 0.9983 54.8%, 0.9988 58.1%, 0.9992 61.3%, 0.9994 64.5%, 0.9996 67.7%, 0.9997 71%, 0.9998 74.2%, 1 77.4%, 1);
    }
}

*, *::before, *::after { box-sizing: border-box; }

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

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

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.1; letter-spacing: -0.05em; }
p, li, label, input, textarea, select, .boton { letter-spacing: -0.03em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.pagina { max-width: var(--ancho); margin: 0 auto; background: var(--blanco); overflow: clip; }
.contenedor { padding-left: 20px; padding-right: 20px; }

/* ---------- Iconos ---------- */
/* Cada trazo lleva su propio fill/stroke (currentColor): el color se cambia con `color`. */
.icono { width: 1em; height: 1em; flex: none; }

/* ---------- Botones (hover: se vuelven oscuros con texto blanco, 0,4 s) ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 20px 32px; border-radius: var(--radio-chico); border: 0; line-height: 1.5; letter-spacing: -0.02em;
    background: var(--acento); color: var(--tinta); font-size: 16px; font-weight: 500;
    transition: background-color 0.4s var(--hover), color 0.4s var(--hover);
}
.boton:hover { background: var(--tinta); color: var(--blanco); }
.boton--claro:hover, .pie .boton--claro:hover { background: var(--blanco); color: var(--tinta); }
.boton:disabled { opacity: 0.5; cursor: default; }
.boton:disabled:hover { background: var(--acento); color: var(--tinta); }
.boton .icono { font-size: 20px; }
.boton--bloque { width: 100%; font-size: 17px; line-height: 1.4; letter-spacing: -0.03em; gap: 8px; }

/* ---------- Barra superior ---------- */
.barra-superior { background: var(--oscuro); color: var(--blanco); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.barra-superior ul { display: flex; justify-content: center; gap: 36px; padding: 12px 20px; flex-wrap: wrap; line-height: 1.5; }
.barra-superior li { display: flex; align-items: center; gap: 8px; letter-spacing: 0; }
.barra-superior .icono { font-size: 18px; color: var(--acento); }

/* ---------- Cabecera (pegada, sin sombra ni desenfoque: solo un filete) ---------- */
.cabecera {
    position: sticky; top: 0; z-index: 40;
    background: var(--blanco); border-bottom: 1px solid var(--linea-nav);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; padding-left: 26px; padding-right: 26px; }
.cabecera__logo img { height: 60px; width: auto; }
.menu { display: flex; gap: 30px; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; color: var(--marino); }
.menu a { position: relative; padding: 0 0 3px; transition: color 0.4s var(--hover); }
.menu a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acento); transition: width 0s; }
.menu a:hover, .menu a.activo { color: var(--acento); }
.menu a.activo::after { width: 100%; transition: width 0.4s var(--hover); }
.cabecera__accion .boton { padding: 14px 16px; }
.hamburguesa { display: none; background: none; border: 0; padding: 8px; color: var(--tinta); }
.hamburguesa .icono { font-size: 30px; }

/* Menú móvil: panel desplegable dentro de la cabecera (solo ≤ 809 px). En reposo mide
   0 (grid-template-rows: 0fr) y al abrir crece en 0,2 s empujando la página. */
.menu-movil { display: none; }
.hamburguesa .icono--cerrar { display: none; }
.cabecera.abierta .hamburguesa .icono--menu { display: none; }
.cabecera.abierta .hamburguesa .icono--cerrar { display: block; }

/* ---------- Secciones ---------- */
.seccion { padding-top: 50px; padding-bottom: 80px; }
#o2.seccion { padding-bottom: 70px; }
#nosotros.seccion { padding-bottom: 160px; }
#contacto.seccion { padding-top: 60px; padding-bottom: 60px; }
#resenas.seccion { padding-bottom: 50px; }
.seccion--oscura { background: var(--oscuro); color: var(--blanco); }
.titulo { font-size: 48px; }
.titulo--centrado { text-align: center; }
.subtitulo { margin-top: 15px; font-size: 18px; line-height: 1.3; color: var(--tinta-suave); }
.seccion--oscura .subtitulo { color: #ebebeb; }
.subtitulo--centrado { text-align: center; margin-top: 28px; }

/* ---------- Hero ---------- */
.hero { padding-top: 50px; padding-bottom: 50px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.hero__cifra { font-size: 35px; font-weight: 500; letter-spacing: -0.03em; display: flex; align-items: center; gap: 12px; line-height: 1.1; }
.hero__cifra .sufijo-hero { margin-left: -10px; }
.avatares { display: flex; }
.avatares img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--blanco); margin-left: -10px; object-fit: cover; }
.avatares img:first-child { margin-left: 0; }
.hero__texto { margin-top: 16px; font-size: 18px; line-height: 1.3; color: var(--tinta-suave); max-width: 240px; }
.hero__cta { margin-top: 118px; }
.hero__nota { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0; line-height: 1.5; color: #666666; }
.hero__nota .icono { font-size: 14px; }
.hero__derecha { padding-left: 43px; }
.hero__derecha .pastilla, .hero__parrafo { margin-left: 10px; }
.pastilla {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 8px; border-radius: var(--radio-chico);
    background: var(--crema); font-size: 13px; letter-spacing: 0; line-height: 1.5; color: var(--tinta);
}
.pastilla .icono { color: var(--acento); font-size: 12px; }
.hero__titulo { margin-top: 30px; font-size: 60px; line-height: 1; max-width: 800px; letter-spacing: -0.04em; }
.hero__parrafo { margin-top: 32px; font-size: 18px; line-height: 1.3; color: var(--tinta-suave); max-width: 600px; }

/* Contadores: un «11.000» oculto reserva el ancho final para que nada baile
   mientras cuenta; el valor vivo va encima, pegado a la izquierda. */
.contador { position: relative; display: inline-block; font-variant-numeric: tabular-nums; }
.contador__medida { visibility: hidden; }
.contador__valor { position: absolute; left: 0; top: 0; }

/* Vídeo pegado: se queda clavado arriba y el resto de la página le pasa por
   encima al bajar (position: sticky + z-index más bajo que lo que sigue). */
.hero-video { position: sticky; top: 0; z-index: 1; height: clamp(300px, 60.8vw, 730px); background: #0b1730; overflow: hidden; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; }
.tras-video { position: relative; z-index: 2; background: var(--blanco); }
.pie { position: relative; z-index: 2; }

/* Cintillo de servicios en movimiento (marquesina, 60 px/s; no se para al pasar el ratón) */
.cintillo { background: var(--oscuro); color: var(--blanco); overflow: hidden; padding: 10px 0; }
.cintillo__pista { display: flex; width: max-content; animation: marquesina var(--duracion, 50s) linear infinite; }
.cintillo ul { display: flex; align-items: center; height: 42px; gap: 56px; padding: 0 28px; }
.cintillo li { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 1.4; letter-spacing: -0.03em; white-space: nowrap; }
.cintillo .icono { color: var(--acento); font-size: 22px; }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Servicios ---------- */
/* La tarjeta tiene dos estados (como la variante hover de Framer, 0,4 s):
   en reposo, foto + título + texto; al pasar el ratón el título baja desde
   arriba de la foto, la foto se desplaza 47 px, el texto se desvanece y el
   botón «Contáctanos» sube desde debajo del borde. */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding: 0 11px; }
.tarjeta {
    position: relative; overflow: hidden; background: var(--crema); border-radius: var(--radio-chico); padding: 20px;
    display: block; color: inherit;
}
.tarjeta__titulo-arriba, .tarjeta__imagen, .tarjeta__texto, .tarjeta__boton {
    transition: transform 0.4s var(--hover), opacity 0.4s var(--hover);
}
.tarjeta__titulo-arriba { position: absolute; left: 20px; right: 20px; top: 17px; font-size: 24px; line-height: 1.4; transform: translateY(calc(-100% - 24px)); }
.tarjeta__imagen { border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 2; }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__texto { margin-top: 20px; }
.tarjeta__texto h3 { font-size: 24px; line-height: 1.4; }
.tarjeta__texto p { margin-top: 15px; font-size: 15px; line-height: 1.5; color: var(--tinta-suave); letter-spacing: -0.01em; }
.tarjeta__boton { position: absolute; left: 20px; bottom: 20px; padding: 14px; transform: translateY(92px); }
.tarjeta:hover .tarjeta__titulo-arriba { transform: none; }
.tarjeta:hover .tarjeta__imagen { transform: translateY(47px); }
.tarjeta:hover .tarjeta__texto { opacity: 0; transform: translateY(42px); }
.tarjeta:hover .tarjeta__boton { transform: none; }

/* ---------- Nosotros (cifras) ---------- */
.nosotros { position: relative; }
.nosotros__titulo { font-size: 40px; line-height: 1.1; max-width: 800px; letter-spacing: -0.05em; }
/* Título que se descubre con el scroll: cada palabra tiene una copia gris y
   una tapa blanca encima recortada con clip-path (--corte la mueve el guion). */
.revela .palabra { position: relative; display: inline-block; }
.revela__base { color: var(--tinta-suave); }
.revela__tapa { position: absolute; left: 0; top: 0; color: var(--blanco); clip-path: inset(0 var(--corte, 0%) 0 0); }
.cifras { margin-top: 60px; width: 700px; max-width: 100%; display: grid; grid-template-columns: repeat(2, 306px); gap: 80px 88px; }
.cifra__valor { font-size: 90px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; white-space: nowrap; display: flex; align-items: baseline; }
.cifra__valor .sufijo { color: var(--acento); font-size: 60px; letter-spacing: -0.05em; }
.cifra__nombre { margin-top: 20px; font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -0.05em; }
.nosotros__portatil { position: absolute; left: 527px; top: 118px; }
.nosotros__portatil img { width: 641px; max-width: none; }

/* ---------- O2 (hover: escala 1,1 con rebote; la pieza central queda encima) ---------- */
.o2__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 1px solid var(--linea); padding-bottom: 20px; }
.o2__cabeza .subtitulo { margin-top: 20px; }
.o2__cabeza img { width: 96px; height: 96px; }
.o2__galeria { margin-top: 30px; display: grid; grid-template-columns: 268px 1fr 268px; gap: 10px; align-items: center; }
.o2__pieza { position: relative; height: 340px; display: flex; justify-content: center; align-items: center; transition: transform 0.45s var(--rebote); }
.o2__pieza--tarifas { z-index: 1; cursor: zoom-in; }
.o2__pieza:hover { transform: scale(1.1); z-index: 2; }
.o2__pieza video { height: 100%; width: auto; max-width: 100%; border-radius: var(--radio-chico); }
.o2__pieza img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio-chico); }

/* Lightbox de la tarifa (clic en la imagen central): fondo negro al 80 %, imagen con 20 px de margen */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.8); padding: 20px; display: grid; place-items: center; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.lightbox.abierto { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform: scale(0.96); transition: transform 0.25s var(--hover); }
.lightbox.abierto img { transform: none; }

/* ---------- Contacto ---------- */
.contacto__cabeza { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.contacto__cabeza .titulo { grid-column: 1 / -1; text-align: center; font-size: 48px; color: var(--crema); }
.contacto__cabeza .subtitulo { grid-column: 2; text-align: right; font-size: 20px; line-height: 1.4; max-width: 604px; margin-top: 6px; }
.formulario-caja {
    margin: 60px auto 0; max-width: 900px; background: var(--crema); color: var(--tinta);
    border-radius: var(--radio-chico); padding: 32px 24px;
}
.formulario-caja h3 { font-size: 24px; line-height: 1.4; }
.formulario-caja > p { margin-top: 24px; font-size: 18px; line-height: 1.3; color: var(--tinta-suave); max-width: 600px; }
.formulario { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.campo { display: grid; gap: 8px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--tinta); background: var(--blanco);
    border: 0; border-radius: 6px; padding: 12px; line-height: 1.4; letter-spacing: -0.02em; outline: none;
    transition: box-shadow 0.2s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { box-shadow: 0 0 0 2px var(--acento); }
.campo textarea { min-height: 150px; resize: vertical; }
.campo .error, .campo--ancho .error { display: block; margin-top: 6px; font-size: 13px; color: #c0392b; }
.campo--trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.aviso-ok {
    grid-column: 1 / -1; padding: 14px 16px; border-radius: var(--radio-chico);
    background: #e7f7ea; color: #1d6b32; border: 1px solid #b9e5c3; font-size: 15px;
}

.datos-contacto { margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 50px; }
.dato { width: 300px; height: 200px; background: var(--crema); color: var(--tinta); border-radius: var(--radio-chico); padding: 16px; display: flex; flex-direction: column; }
.dato--ancho { width: 480px; }
.dato .icono { font-size: 60px; color: var(--acento); }
.dato__nombre { margin-top: auto; font-size: 20px; line-height: 1.4; letter-spacing: -0.03em; color: var(--tinta-suave); }
.dato__valor { display: block; margin-top: 16px; font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -0.05em; }
a.dato__valor:hover { text-decoration: underline; }

/* ---------- Reseñas (dos marquesinas a 55 px/s, una en cada sentido; no se paran) ---------- */
.resenas { overflow: hidden; }
.resenas__pista { display: flex; width: max-content; gap: 16px; animation: marquesina var(--duracion, 60s) linear infinite; }
.resenas__pista--inversa { animation-direction: reverse; }
.resenas__fila { overflow: hidden; margin-top: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent); }
.resenas__filas { margin-top: 60px; }
.resenas__lista { display: none; }
.resena {
    width: 370px; background: var(--crema); border-radius: var(--radio-chico); padding: 32px 24px;
    display: flex; flex-direction: column; height: 327px; overflow: hidden;
}
/* Anchos alternos como en el original: fila 1 = 370, 446, 370, 446; fila 2 al revés. */
.resenas__pista .resena:nth-child(even), .resenas__pista--inversa .resena:nth-child(odd) { width: 446px; }
.resenas__pista--inversa .resena:nth-child(even) { width: 370px; }
.resena__texto { font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--tinta-suave); flex: 1; }
.resena__meta { margin-top: 28px; display: flex; justify-content: space-between; font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--tinta-suave); padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.resena__meta span { display: flex; align-items: center; gap: 6px; }
.resena__meta .icono { color: var(--acento); font-size: 20px; }
.resena__pie { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
.resena__pie > div { min-width: 0; }
.resena__pie img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.resena__nombre { font-size: 18px; font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resena__tipo { font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--tinta-suave); }
.estrellas { margin-left: auto; display: flex; gap: 2px; flex: none; }
.estrellas .icono { font-size: 18px; color: var(--acento); }
.estrellas .icono.vacia { color: #e4e4e4; }

/* ---------- Pie ---------- */
.pie { padding-top: 50px; padding-bottom: 10px; }
.pie > .contenedor { padding-left: 30px; padding-right: 30px; }
.pie__columnas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.pie h4 { color: var(--acento); font-size: 24px; line-height: 1.4; }
.pie ul { margin-top: 25px; display: grid; gap: 21px; font-size: 18px; font-weight: 500; line-height: 1.3; }
.pie li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pie li .icono { color: var(--acento); font-size: 20px; }
.pie a { transition: color 0.4s var(--hover); }
.pie a:hover { color: var(--acento); }
.pie__bajo { margin-top: 39px; padding: 20px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pie__bajo img { height: 70px; }
.pie__bajo .boton { padding: 10px 15px; }
.pie__copy { font-size: 18px; }

/* ---------- Legal ---------- */
.legal { max-width: 860px; margin: 0 auto; padding: 56px 20px 80px; }
.legal h1 { font-size: 40px; }
.legal h2 { margin-top: 36px; font-size: 22px; }
.legal p, .legal li { margin-top: 12px; color: var(--tinta-suave); font-size: 16px; line-height: 1.6; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal a { color: var(--marino); text-decoration: underline; }

/* ---------- WhatsApp flotante (como el widget del original) ---------- */
.wa-flotante { position: fixed; right: 39px; bottom: 24px; z-index: 45; display: grid; justify-items: end; gap: 22px; }
.wa-flotante__boton {
    width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--whatsapp); color: var(--blanco);
    display: grid; place-items: center; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s var(--hover);
}
.wa-flotante__boton:hover { transform: scale(1.06); }
.wa-flotante__boton .icono { font-size: 28px; }
.wa-caja {
    width: 307px; max-width: calc(100vw - 48px); background: rgba(255, 255, 255, 0.96); border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2); padding: 15px 16px 16px; color: #1f2937;
    visibility: hidden; opacity: 0; transform: translateY(16px) scale(0.96);
    transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.wa-caja.abierta { visibility: visible; opacity: 1; transform: none; }
.wa-caja__cabeza { display: flex; align-items: center; gap: 12px; }
.wa-caja__avatar {
    position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, #3b82f6, #1e40af); color: var(--blanco); font-size: 15px; font-weight: 600;
    display: grid; place-items: center;
}
.wa-caja__avatar::after { content: ''; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--whatsapp); border: 2px solid var(--blanco); }
.wa-caja__quien { display: grid; line-height: 1.2; }
.wa-caja__quien strong { font-size: 18px; font-weight: 700; }
.wa-caja__quien span { font-size: 13px; color: #6b7280; margin-top: 3px; }
.wa-caja__cerrar { margin-left: auto; width: 27px; height: 27px; border-radius: 50%; border: 0; background: none; color: #9ca3af; font-size: 18px; line-height: 1; }
.wa-caja__cerrar:hover { background: #f3f4f6; }
.wa-caja__mensaje { margin-top: 14px; font-size: 13px; line-height: 1.55; color: #4b5563; }
.wa-caja__entrada { width: 100%; margin-top: 13px; height: 52px; padding: 0 14px; font: inherit; font-size: 14px; color: #111827; background: var(--blanco); border: 1px solid #bbf7d0; border-radius: 12px; outline: none; }
.wa-caja__entrada:focus { border-color: var(--whatsapp); }
.wa-caja__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; height: 46px; border-radius: 12px;
    background: var(--whatsapp); color: var(--blanco); font-size: 15px; font-weight: 700; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    transition: filter 0.2s;
}
.wa-caja__cta:hover { filter: brightness(1.05); }
.wa-caja__cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cookies ---------- */
.cookies {
    position: fixed; left: 20px; bottom: 20px; z-index: 46; width: 300px; max-width: calc(100vw - 40px);
    background: var(--blanco); border-radius: var(--radio); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.16);
    padding: 18px; display: none; font-size: 13px; color: var(--tinta-suave);
}
.cookies.visible { display: block; }
.cookies strong { display: block; color: var(--tinta); font-size: 14px; margin-bottom: 8px; }
.cookies a { text-decoration: underline; }
.cookies__botones { margin-top: 14px; display: flex; gap: 8px; }
.cookies__botones button { flex: 1; padding: 9px; border-radius: var(--radio-chico); border: 1px solid var(--linea); background: var(--blanco); font-size: 13px; }
.cookies__botones .aceptar { background: var(--acento); border-color: var(--acento); }

/* ---------- Aparición (al cargar y al bajar) ---------- */
/* El estado por defecto es VISIBLE: solo se oculta si el guion está listo para
   volver a enseñarlo (clase `aparece-armado` en <html>). Cada bloque sube
   desde `--desde` (su data-aparece en px) con el muelle de Framer (1,48 s) y
   su `--retardo`. Los bloques anidados (60 + 24) se suman solos. */
[data-aparece] { --desde: 24px; }
[data-aparece="16"] { --desde: 16px; }
[data-aparece="18"] { --desde: 18px; }
[data-aparece="20"] { --desde: 20px; }
[data-aparece="26"] { --desde: 26px; }
[data-aparece="32"] { --desde: 32px; }
[data-aparece="60"] { --desde: 60px; }
[data-aparece="-48"] { --desde: -48px; }
.aparece-armado [data-aparece] {
    transition: opacity 1.48s var(--muelle), transform 1.48s var(--muelle);
    transition-delay: var(--retardo, 0ms);
}
.aparece-armado [data-aparece]:not(.visto) { opacity: 0.001; transform: translateY(var(--desde)); }

/* Palabras del hero: cada una aparece desenfocada y con retardo escalonado.
   Es CSS puro (sin depender del guion): base + paso × índice de palabra. */
.palabras .palabra { display: inline-block; }
.palabras--titulo { --base: 500ms; --paso: 50ms; --dur: 3.25s; --curva: var(--curva-titulo); }
.palabras--parrafo { --base: 1500ms; --paso: 40ms; --dur: 2.8s; --curva: var(--curva-parrafo); }
.palabras--titulo .palabra, .palabras--parrafo .palabra {
    opacity: 0.001; filter: blur(10px);
    animation: palabra var(--dur) var(--curva) both;
    animation-delay: calc(var(--base) + var(--i, 0) * var(--paso));
}
@keyframes palabra { to { opacity: 1; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .aparece-armado [data-aparece] { opacity: 1 !important; transform: none !important; transition: none; }
    .palabras .palabra { opacity: 1; filter: none; animation: none; }
    .cintillo__pista, .resenas__pista { animation: none; }
    .revela__tapa { clip-path: none; }
    .hero-video { position: relative; }
}

/* ---------- Responsive ---------- */
/* Framer corta en 809 px (móvil) y 1199 px (tableta). El móvil está medido
   elemento a elemento en la web original a 375 px de ancho. */
@media (max-width: 1100px) {
    .nosotros__portatil { left: auto; right: -40px; }
    .nosotros__portatil img { width: 480px; }
    .o2__galeria { grid-template-columns: 200px 1fr 200px; }
}
@media (max-width: 1024px) {
    .tarjetas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809px) {
    /* Cabecera: solo logo (138×45) y hamburguesa, 70 px */
    .barra-superior, .menu, .cabecera__accion { display: none; }
    .hamburguesa { display: block; margin-right: -8px; }
    .hamburguesa .icono { font-size: 30px; color: var(--tinta); }
    .cabecera__fila { height: 69px; padding-left: 20px; padding-right: 20px; } /* 69 + 1 de filete = 70 */
    .menu-movil { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease-out; }
    .cabecera.abierta .menu-movil { grid-template-rows: 1fr; }
    .menu-movil__panel { overflow: hidden; min-height: 0; padding: 0 20px; display: flex; flex-direction: column; align-items: center; }
    .cabecera.abierta .menu-movil__panel { padding-bottom: 34px; }
    .menu-movil__lista { width: 100%; display: grid; gap: 20px; padding: 13px 0 28px; }
    .menu-movil__lista .enlace { font-size: 18px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; padding-bottom: 3px; color: var(--marino); }
    .menu-movil .boton { padding: 14px 16px; }
    .cabecera__logo img { height: 45px; }
    .aviso-cierre { font-size: 14px; }

    /* Hero en columna: pastilla, título, párrafo, y debajo cifra, texto, botón, nota */
    .hero { display: flex; flex-direction: column; gap: 40px; padding: 40px 20px 50px; }
    .hero__derecha { order: -1; padding-left: 0; }
    .hero__derecha .pastilla, .hero__parrafo { margin-left: 4px; }
    .hero__titulo { margin-top: 24px; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; max-width: none; }
    .hero__parrafo { margin-top: 24px; max-width: none; }
    .hero__cifra { font-size: 36px; }
    .avatares img { margin-left: -14px; }
    .hero__texto { margin-top: 16px; max-width: none; }
    .hero__cta { margin-top: 20px; }
    .hero__cta .boton { width: 100%; }
    .hero__nota { margin-top: 12px; padding-left: 20px; }

    /* Vídeo: en móvil no va pegado; misma proporción que en escritorio */
    .hero-video { position: relative; z-index: auto; height: auto; aspect-ratio: 1200 / 730; }
    .cintillo ul { gap: 24px; padding: 0 12px; }

    /* Secciones */
    .seccion, #o2.seccion { padding: 50px 20px; }
    /* Estas llevan .contenedor dentro (que ya pone los 20 px): sin sangría propia */
    #contacto.seccion, #resenas.seccion, #nosotros.seccion { padding: 50px 0; }
    .titulo, .contacto__cabeza .titulo { font-size: 32px; }
    .subtitulo { margin-top: 16px; }

    /* Servicios: una columna, botón siempre visible y sin estado hover */
    .tarjetas { grid-template-columns: 1fr; gap: 16px; padding: 0; }
    .tarjeta { overflow: visible; }
    .tarjeta__titulo-arriba { display: none; }
    .tarjeta__imagen, .tarjeta__texto, .tarjeta__boton { transition: none; }
    .tarjeta:hover .tarjeta__imagen, .tarjeta:hover .tarjeta__texto, .tarjeta:hover .tarjeta__boton { transform: none; opacity: 1; }
    .tarjeta__texto h3 { font-size: 20px; }
    .tarjeta__boton { position: static; display: flex; width: 100%; margin-top: 16px; transform: none; }

    /* Nosotros: sin portátil, contadores a 40 px en dos columnas */
    .nosotros__titulo { font-size: 32px; letter-spacing: -0.03em; }
    .cifras { margin-top: 40px; width: auto; grid-template-columns: 1fr 1fr; gap: 40px 20px; }
    .cifra__valor, .cifra__valor .sufijo { font-size: 40px; }
    .cifra__nombre { margin-top: 20px; font-size: 20px; }
    .nosotros__portatil { display: none; }

    /* O2: título discreto, imagen de tarifas primero y los vídeos apilados a lo alto */
    .o2__cabeza { align-items: flex-start; gap: 10px; padding-bottom: 20px; }
    .o2__cabeza .titulo { font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -0.03em; }
    .o2__cabeza .subtitulo { margin-top: 5px; font-size: 17px; line-height: 1.4; }
    .o2__cabeza img { width: 95px; height: 95px; }
    .o2__galeria { margin-top: 20px; display: flex; flex-direction: column; gap: 40px; }
    .o2__pieza { height: auto; }
    .o2__pieza--tarifas { order: -1; }
    .o2__pieza video { width: 100%; height: auto; aspect-ratio: 335 / 596; object-fit: cover; }
    .o2__pieza img { height: auto; }
    .o2__pieza:hover { transform: none; }

    /* Contacto: todo en columna, tarjetas de 200 px a todo el ancho */
    .contacto__cabeza { display: block; }
    .contacto__cabeza .titulo, .contacto__cabeza .subtitulo { text-align: left; }
    .contacto__cabeza .subtitulo { margin-top: 30px; max-width: none; }
    .formulario-caja { margin-top: 40px; }
    .formulario-caja h3 { font-size: 20px; }
    .formulario { margin-top: 40px; grid-template-columns: 1fr; gap: 24px; }
    .campo--seguido { margin-top: -8px; } /* nombre/email y teléfono/tipo van a 16 */
    .datos-contacto { margin-top: 40px; flex-direction: column; gap: 40px; }
    .dato, .dato--ancho { width: 100%; height: 200px; }
    .dato__valor { white-space: normal; font-size: 20px; letter-spacing: -0.01em; }

    /* Reseñas: lista vertical (sin marquesina) con cinco reseñas */
    .subtitulo--centrado { margin-top: 20px; }
    .resenas__filas { display: none; }
    .resenas__lista { display: grid; gap: 24px; margin-top: 20px; padding: 0 20px; }
    .resenas__lista .resena { width: auto; height: auto; }
    .resenas__lista .resena__meta { margin-top: 44px; }
    .resenas__lista .resena__pie { margin-top: 22px; }

    /* Pie: tres columnas apiladas (sin «Nuestros servicios»), logo y copyright */
    .pie { padding: 60px 0 10px; }
    .pie > .contenedor { padding-left: 20px; padding-right: 20px; }
    .pie__columnas { grid-template-columns: 1fr; gap: 30px; }
    .pie__col--servicios { display: none; }
    .pie h4 { font-size: 20px; }
    .pie ul { margin-top: 10px; gap: 10px; }
    .pie li { white-space: normal; }
    .pie__bajo { margin-top: 40px; padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 40px; }
    .pie__bajo .boton { display: none; }
    .pie__bajo img { margin: 10px 0 10px 10px; }

    .wa-flotante { right: 16px; bottom: 16px; }
    .cookies { left: 16px; bottom: 90px; }
}