/* ============================================================================
   CAT'S BEER — Diseño nuevo (2026)
   Dirección: ilustrada y juguetona, con el gato como personaje.
   Motion design moderado: easing suave, entradas escalonadas (offset y delay),
   máscaras, parallax y zoom lento. Sin recuadros que parezcan botón.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   COLORES
   --------------------------------------------------------------------------- */
:root {           /* Paleta "Afiche" (la de "Hemos vuelto"): crema, azul marino, mostaza y el rojo del gato */
    /* Contraste revisado (WCAG): todo texto chico ≥ 4,5 sobre fondo, fondo-2 y papel */
    --fondo: #F1E6D2;  --fondo-2: #E2CFAE;  --fondo-3: #F8F1E4;  --papel: #FFFDF8;
    --tinta: #1E2A3A;  --tinta-2: #4A5668;  --tinta-3: #4E5764;
    --acento: #E1251B; --acento-osc: #B3170F; --acento-2: #D4A23A;
    --acento-texto: #A3140B;  --acento-2-texto: #7E540B;   /* rojo y mostaza cuando son texto chico */
    --oscuro: #1E2A3A; --sobre-oscuro: #F1E6D2; --sobre-oscuro-2: #B9C0CB;
    --franja: #D4A23A; --franja-tinta: #1E2A3A;
    --linea: rgba(30,42,58,.24);
}
:root {
    --f-titulo: 'Playfair Display', Georgia, serif;
    --f-marcador: 'Permanent Marker', cursive;
    --f-cuerpo: 'Inter', system-ui, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);          /* salida suave: rápido al inicio, lento al llegar */
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --barra-h: 66px;
    --franja-h: 40px;
    --ancho: 1800px;
    --radio: 18px;
}

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--fondo); color: var(--tinta);
    font-family: var(--f-cuerpo); font-size: 17px; line-height: 1.65;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
    transition: background-color .5s ease, color .5s ease;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--f-titulo); font-style: italic; font-weight: 700;
    line-height: 1.08; text-align: center; letter-spacing: -.01em;
}
/* Textos largos: justificados con la última línea centrada. Nada a la izquierda. */
p { text-align: justify; text-align-last: center; -moz-text-align-last: center; hyphens: auto; -webkit-hyphens: auto; }

.contenedor { width: 96%; max-width: var(--ancho); margin: 0 auto; }
.contenedor.angosto { max-width: 1200px; }

.seccion { position: relative; padding: clamp(40px, 4vw, 76px) 0; }
/* La sección que sigue a la portada deja lugar al sello que gira en el borde */
.hero + .seccion { padding-top: clamp(90px, 7vw, 118px); }
.seccion-alterna { background: var(--fondo-2); }
.seccion-suave { background: var(--fondo-3); }
.seccion-oscura { background: var(--oscuro); color: var(--sobre-oscuro); }

/* Cabecera de sección: antetítulo a mano, título grande, bajada */
.cabecera { text-align: center; margin: 0 auto clamp(22px, 2.2vw, 40px); max-width: 1340px; }
.antetitulo {
    font-family: var(--f-marcador); font-size: clamp(17px, 1.4vw, 22px);
    color: var(--acento-texto); text-align: center; text-align-last: center;
    margin-bottom: 12px; transform: rotate(-2deg);
}
.cabecera h2 { font-size: clamp(36px, 4.2vw, 78px); margin-bottom: 14px; }
.cabecera .subtitulo { font-size: clamp(17px, 1.3vw, 21px); color: var(--tinta-2); max-width: 1100px; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   BOTONES Y ENLACES — un solo botón real por bloque; lo demás es enlace
   --------------------------------------------------------------------------- */
.btn, .btn-rojo {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--acento); color: #fff;
    font-family: var(--f-cuerpo); font-weight: 700; font-size: 14px;
    letter-spacing: 1.4px; text-transform: uppercase;
    padding: 17px 34px; border-radius: 999px; border: 0; cursor: pointer;
    position: relative; overflow: hidden;
    transition: transform .45s var(--ease), background-color .3s ease, box-shadow .45s var(--ease);
    box-shadow: 0 10px 26px -10px var(--acento);
}
.btn::after {      /* reflejo que cruza */
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); animation: reflejo 4.5s var(--ease-io) infinite;
}
.btn:hover, .btn-rojo:hover { transform: translateY(-3px); background: var(--acento-osc); box-shadow: 0 18px 34px -12px var(--acento); }
.btn-linea {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase;
    padding: 15px 30px; border-radius: 999px; border: 2px solid currentColor; color: var(--tinta);
    transition: transform .45s var(--ease);
}
.btn-linea:hover { transform: translateY(-3px); }
.btn.btn-linea { background: transparent; color: var(--tinta); border: 2px solid var(--tinta); box-shadow: none; }
.btn.btn-linea::after { display: none; }
.btn.btn-linea:hover { background: var(--tinta); color: var(--fondo); }
.btn-chico { padding: 12px 24px; font-size: 12.5px; }
@keyframes reflejo { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

.enlace-flecha {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; color: var(--acento-texto);
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    padding-bottom: 3px; transition: background-size .5s var(--ease);
}
.enlace-flecha::after { content: '→'; transition: transform .5s var(--ease); }
.enlace-flecha:hover { background-size: 100% 2px; }
.enlace-flecha:hover::after { transform: translateX(6px); }

/* ---------------------------------------------------------------------------
   TRANSICIÓN ENTRE PÁGINAS — fundido a negro, el gato abre los ojos y parpadea
   --------------------------------------------------------------------------- */
.transicion {
    position: fixed; inset: 0; z-index: 9000; background: #000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .45s ease-in-out;
}
.transicion.activa { opacity: 1; pointer-events: all; animation: seguroTransicion 0s 4s forwards; }
/* Seguro: si el JS no corre, el negro se va solo a los 4 s y no tapa la página */
@keyframes seguroTransicion { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* Secuencia (la maneja motion.js), siempre con fundidos suaves:
   1) la página se funde a negro   2) aparece el gato y pestañea
   3) en la página nueva el gato se desvanece   4) la página nueva aparece */
.transicion .gato-cara { width: min(1240px, 96vw, 126vh); opacity: 0; transform: scale(.97); transition: opacity .4s ease-in-out, transform 1.2s var(--ease); }
.transicion.con-gato .gato-cara { opacity: 1; transform: scale(1); }
.transicion.parpadea .parpado { animation: parpadeoDos .9s .15s ease-in-out; }

.gato-cara { position: relative; }
.gato-cara img { width: 100%; height: auto; }
/* Párpados: cubren los ojos del dibujo (medidos sobre la imagen de 1024 × 768) */
.parpado {
    position: absolute; top: 28.5%; width: 12.4%; height: 14.5%;
    background: #000; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0;
}
.parpado.izq { left: 33.4%; }
.parpado.der { left: 55.2%; }
@keyframes parpadeoDos { 0%, 100% { transform: scaleY(0); } 18% { transform: scaleY(1.05); } 36% { transform: scaleY(0); } 56% { transform: scaleY(1.05); } 76% { transform: scaleY(0); } }
@keyframes parpadeo { 0%, 92%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1.05); } }

/* ---------------------------------------------------------------------------
   FRANJA DE AVISO + BARRA SUPERIOR
   --------------------------------------------------------------------------- */
.franja-aviso {
    height: var(--franja-h); overflow: hidden; display: flex; align-items: center;
    background: var(--franja); color: var(--franja-tinta);
    font-weight: 700; font-size: 14.5px; cursor: pointer; position: relative; z-index: 1001;
}
.franja-pista { display: flex; width: max-content; animation: correr 38s linear infinite; }
.franja-pista span { white-space: nowrap; padding: 0 28px; }
.franja-pista span::after { content: '✦'; margin-left: 56px; opacity: .7; }
.franja-aviso:hover .franja-pista { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

.barra {
    position: sticky; top: 0; z-index: 1000; height: var(--barra-h);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 max(2%, 14px);
    background: var(--oscuro); color: var(--sobre-oscuro);
    transition: box-shadow .4s ease;
}
.barra.compacto { box-shadow: 0 10px 30px -14px rgba(0,0,0,.5); }

.menu-boton { justify-self: start; display: flex; align-items: center; gap: 6px; height: 46px; }
.menu-boton .lineas { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
/* La frase junto a las rayas: el gato pide cariño y se menea de vez en cuando */
.menu-frase {
    font-family: var(--f-marcador); font-size: 16px; color: #fff; white-space: nowrap;
    display: inline-block; transform: rotate(-4deg); animation: menear 4.5s ease-in-out infinite;
}
@keyframes menear { 0%, 80%, 100% { transform: rotate(-4deg); } 85% { transform: rotate(3deg) scale(1.06); } 90% { transform: rotate(-7deg); } 95% { transform: rotate(1deg); } }
.menu-boton .lineas span {
    position: absolute; left: 9px; width: 28px; height: 2.5px; border-radius: 2px;
    background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease), width .5s var(--ease);
}
.menu-boton .lineas span:first-child { top: 17px; }
.menu-boton .lineas span:last-child  { top: 27px; width: 20px; }
.menu-boton:hover .lineas span:last-child { width: 28px; }
.menu-boton.abierto .lineas span:first-child { top: 22px; transform: rotate(45deg); }
.menu-boton.abierto .lineas span:last-child  { top: 22px; width: 28px; transform: rotate(-45deg); }

.barra-marca { display: flex; align-items: center; gap: 12px; }
.marca-logo { width: 46px; height: 46px; transition: transform .8s var(--ease); }
.barra-marca:hover .marca-logo { transform: rotate(-12deg) scale(1.06); }
.marca-letras { height: 25px; width: auto; max-width: none; flex-shrink: 0; }

.barra-redes { justify-self: end; display: flex; gap: 6px; }
.barra-redes a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .3s ease, transform .4s var(--ease); }
.barra-redes a:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.barra-redes svg { width: 21px; height: 21px; fill: currentColor; }

/* ---------------------------------------------------------------------------
   MENÚ — panel que entra hacia la derecha; foto y subsecciones que cambian lento
   --------------------------------------------------------------------------- */
.menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, 106px); z-index: 999;
    display: grid; grid-template-columns: minmax(380px, 40%) 1fr;
    background: var(--oscuro); color: var(--sobre-oscuro);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .85s var(--ease), visibility 0s linear .85s;
}
.menu.abierto { transform: none; visibility: visible; transition: transform .85s var(--ease), visibility 0s; }
body.menu-abierto { overflow: hidden; }

.menu-lista { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(4px, 1vh, 12px); padding: 30px 20px; overflow-y: auto; }
.menu-lista a {
    display: flex; align-items: center; gap: 14px; color: var(--sobre-oscuro-2);
    font-family: var(--f-titulo); font-style: italic; font-size: clamp(24px, 2.3vw, 40px); line-height: 1.25;
    opacity: 0; transform: translateX(-40px);
    transition: opacity .6s var(--ease), transform .8s var(--ease), color .3s ease;
}
.menu.abierto .menu-lista a { opacity: 1; transform: none; transition-delay: calc(.22s + var(--i, 0) * 55ms), calc(.22s + var(--i, 0) * 55ms), 0s; }
.menu-lista .raya { display: block; height: 1.5px; width: 0; background: currentColor; transition: width .6s var(--ease); }
.menu-lista a.activo { color: var(--sobre-oscuro); }
.menu-lista a.activo .raya { width: clamp(50px, 5vw, 96px); }
.menu-lista a.actual .txt { color: var(--acento-2); }

.menu-lado { position: relative; overflow: hidden; }
.menu-fotos img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.12) translateX(2%);
    transition: opacity .9s ease, transform 7s linear;      /* el cambio es lento, como en Garage Project */
}
.menu-fotos img.activa { opacity: 1; transform: scale(1.02) translateX(0); }
.menu-lado::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.35) 100%); }
.menu-subs { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.menu-subs ul { position: absolute; list-style: none; text-align: center; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); pointer-events: none; }
.menu-subs ul.activa { pointer-events: auto; }
.menu-subs li { opacity: 0; transform: translateX(34px); transition: opacity .45s ease, transform .9s var(--ease); }
.menu-subs ul.activa li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms); }
.menu-subs a { color: #fff; font-weight: 600; font-size: clamp(19px, 1.6vw, 27px); text-shadow: 0 2px 14px rgba(0,0,0,.5); transition: color .3s ease; }
.menu-subs a:hover { color: var(--acento-2); }

/* ---------------------------------------------------------------------------
   PORTADA
   --------------------------------------------------------------------------- */
.hero {
    position: relative; min-height: calc(100vh - var(--barra-h) - var(--franja-h));
    display: flex; align-items: center; justify-content: center;
    padding: 56px 0 110px;
}
.hero-texto { position: relative; z-index: 2; width: min(1000px, 52vw); text-align: center; }
.hero-lugar { margin-bottom: 18px; }
.hero h1 { font-size: clamp(50px, 5.6vw, 108px); line-height: 1.02; margin-bottom: 30px; }
.hero h1 em, .cierre h2 em { color: var(--acento); }
.hero .bajada { font-size: clamp(17px, 1.35vw, 21px); color: var(--tinta-2); max-width: 860px; margin: 0 auto 38px; }
.hero-acciones { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }

/* Título con máscara: cada línea sube desde abajo, escalonada */
.titulo-mascara .l { display: block; overflow: hidden; padding: 0 .06em .1em; }
.titulo-mascara .l > span { display: inline-block; transform: translateY(105%); transition: transform 1.15s var(--ease); }
.titulo-mascara.visible .l > span { transform: none; }
.titulo-mascara .l:nth-child(2) > span { transition-delay: .09s; }
.titulo-mascara .l:nth-child(3) > span { transition-delay: .18s; }

/* El resto de la portada entra en cascada después del título */
.hero-texto > :not(h1), .cabeza-texto > :not(h1) { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform 1s var(--ease); }
.lista .hero-texto > :not(h1), .lista .cabeza-texto > :not(h1) { opacity: 1; transform: none; }
.lista .hero-lugar      { transition-delay: 0s; }
.lista .bajada          { transition-delay: .35s; }
.lista .hero-acciones   { transition-delay: .48s; }

/* Fotos como pegatinas: giradas, flotando, con parallax al hacer scroll */
.hero-fotos { position: absolute; inset: 0; pointer-events: none; }
.pegatina {
    position: absolute; width: clamp(150px, calc(23vw - 120px), 360px); aspect-ratio: 4 / 5;
    border: 7px solid var(--papel); border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 50px -22px rgba(0,0,0,.55);
    transform: translateY(var(--py, 0px)) rotate(var(--rot, 0deg)) scale(.6);
    opacity: 0;
    transition: opacity .7s ease, transform 1.2s var(--ease);
    animation: flotar 7s ease-in-out infinite alternate;
}
.pegatina img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s linear; }
.lista .pegatina { opacity: 1; transform: translateY(var(--py, 0px)) rotate(var(--rot, 0deg)) scale(1); }
.lista .pegatina img { transform: scale(1.12); }
.p1 { --rot: -8deg; left: 2.5%; top: 6%;    animation-delay: -1s; }
.p2 { --rot: 6deg;  left: 5%;  bottom: 9%;  animation-delay: -3s; }
.p3 { --rot: 7deg;  right: 2.5%; top: 5%;   animation-delay: -2s; }
.p4 { --rot: -5deg; right: 5.5%; bottom: 8%; animation-delay: -4s; }
.p5 { display: none; }
.hero.lista .p1 { transition-delay: .25s; }
.hero.lista .p3 { transition-delay: .35s; }
.hero.lista .p2 { transition-delay: .45s; }
.hero.lista .p4 { transition-delay: .55s; }
@keyframes flotar { from { translate: 0 0; } to { translate: 0 -16px; } }

/* Sello que gira, montado entre la portada y la sección siguiente */
.sello {
    position: absolute; left: 50%; bottom: -78px; z-index: 5;
    width: 156px; height: 156px; margin-left: -78px;
    display: flex; align-items: center; justify-content: center;
}
.sello svg { position: absolute; inset: 0; animation: girar 22s linear infinite; }
.sello text { font-family: var(--f-cuerpo); font-size: 13px; font-weight: 700; letter-spacing: .5px; fill: var(--tinta); }
.sello img { width: 92px; height: 92px; transition: transform .8s var(--ease); }
.sello:hover img { transform: rotate(-14deg) scale(1.08); }
.sello::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--fondo); z-index: -1; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   ENTRADAS ESCALONADAS (offset y delay) — lo maneja motion.js
   Los elementos de un grupo aparecen uno tras otro, separados por ~80 ms.
   --------------------------------------------------------------------------- */
.rev { opacity: 0; transform: translateY(34px); transition: opacity .75s ease, transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 85ms); }
.rev.dentro { opacity: 1; transform: none; }
.mascara { clip-path: inset(12% 12% 12% 12% round 22px); transition: clip-path 1.3s var(--ease); }
.mascara.dentro { clip-path: inset(0 0 0 0 round 22px); }
.mascara img { transform: scale(1.18); transition: transform 1.8s var(--ease); }
.mascara.dentro img { transform: scale(1); }

/* ---------------------------------------------------------------------------
   QUÉ HACEMOS — lista interactiva: al pasar el mouse aparece la foto
   --------------------------------------------------------------------------- */
.servicios { position: relative; border-bottom: 1px solid var(--linea); }
.servicio {
    position: relative; display: grid; align-items: center;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.8fr) 200px; gap: 40px;
    padding: clamp(18px, 1.8vw, 30px) 10px; border-top: 1px solid var(--linea);
    text-align: center;
}
.servicio::before {      /* barrido de color al pasar el mouse */
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fondo-2);
    transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease);
}
.servicio:hover::before { transform: scaleY(1); }
.servicio h3 { font-size: clamp(36px, 3.7vw, 68px); transition: color .4s ease, transform .6s var(--ease); }
.servicio:hover h3 { color: var(--acento); }
.servicio p { color: var(--tinta-2); font-size: 16.5px; }
.servicio .enlace-flecha { justify-self: center; }
.servicio:hover .enlace-flecha { background-size: 100% 2px; }
/* En PC la foto vive en la misma celda del nombre: se descubre como cortina al pasar
   el mouse y el nombre queda en blanco encima. No tapa la descripción ni mueve nada. */
@media (min-width: 901px) {
    .servicio { --pad: clamp(18px, 1.8vw, 30px); }
    .servicio-foto, .servicio h3 { grid-column: 1; grid-row: 1; }
    .servicio-foto {
        position: relative; z-index: 1; align-self: stretch; margin: calc(-1 * var(--pad) + 10px) 0;
        border-radius: 14px; overflow: hidden;
        clip-path: inset(0 100% 0 0 round 14px);
        transition: clip-path .8s var(--ease), margin .8s var(--ease), box-shadow .8s var(--ease);
    }
    /* Al pasar el mouse, el recuadro crece hacia arriba y abajo (sobresale de la fila
       como una tarjeta que se levanta) para que la foto se vea casi completa */
    .servicio:has(.servicio-foto):hover { z-index: 3; }
    .servicio:hover .servicio-foto { margin: calc(-1 * var(--pad) - 95px) 0; box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
    .servicio:first-child:hover .servicio-foto { margin-top: calc(-1 * var(--pad) - 30px); margin-bottom: calc(-1 * var(--pad) - 160px); }
    /* La primera foto crece más hacia abajo: el título baja lo mismo (la mitad de la diferencia) para quedar al centro */
    .servicio:first-child h3 { transition: color .4s ease, transform .8s var(--ease); }
    .servicio:first-child:has(.servicio-foto):hover h3 { transform: translateY(65px); }
    .servicio-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1.6s var(--ease); }
    .servicio-foto::after { content: ''; position: absolute; inset: 0; background: rgba(10,12,18,.42); }
    .servicio h3 { position: relative; z-index: 2; }
    .servicio:hover .servicio-foto { clip-path: inset(0 0 0 0 round 14px); }
    .servicio:hover .servicio-foto img { transform: scale(1); }
    .servicio:has(.servicio-foto):hover h3 { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.45); }
}

/* ---------------------------------------------------------------------------
   AGENDA — la arma main.js; aquí solo se le da el estilo nuevo, sin recuadros
   --------------------------------------------------------------------------- */
.actividades { display: flex; flex-direction: column; gap: 0; border-bottom: 1px solid var(--linea); }
.actividad {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border-top: 1px solid var(--linea); padding: 24px 0;
    transition: background-color .4s ease;
}
.actividad:hover { background: color-mix(in srgb, var(--papel) 45%, transparent); }
.act-fecha { padding-bottom: 20px; }
.cals { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.cal { width: 124px; flex-shrink: 0; transition: transform .6s var(--ease); }
.actividad:hover .cals.son-dos .cal:first-child { transform: rotate(-3deg) translateY(-4px); }
.actividad:hover .cals.son-dos .cal:last-child  { transform: rotate(3deg) translateY(-4px); }
.cal-papel { background: var(--papel); border-radius: 12px; overflow: hidden; box-shadow: 0 16px 30px -16px rgba(0,0,0,.45), 0 0 0 1px var(--linea); }
.cal-mes { background: var(--acento); color: #fff; text-align: center; font-weight: 700; font-size: 15px; padding: 8px 6px; text-transform: capitalize; }
.cal-cuerpo { padding: 8px 6px 14px; text-align: center; }
.cal-sub { font-size: 11px; font-weight: 700; color: #6C6A73; text-transform: capitalize; }
.cal-num { font-weight: 700; font-size: 50px; line-height: 1; color: #1E2A3A; margin-top: 2px; }
.act-cuerpo { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.act-tipo { font-family: var(--f-marcador); font-size: 18px; color: var(--acento-texto); margin-bottom: 6px; transform: rotate(-2deg); }
.actividad h3 { font-size: clamp(28px, 2.6vw, 44px); margin-bottom: 12px; }
.act-detalle { color: var(--tinta-2); max-width: 760px; }
.act-lado { display: flex; flex-direction: column; align-items: center; padding: 18px 20px 0; }
.act-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; color: var(--tinta-2); font-size: 15.5px; margin-bottom: 12px; }
.act-estado { font-weight: 700; font-size: 14px; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; }
.act-estado::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: latido 1.8s ease-in-out infinite; }
.act-estado.abierto { color: #175A33; }
.act-estado.ultimos { color: #774607; }
.act-estado.agotado { color: var(--tinta-3); }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 60% { box-shadow: 0 0 0 7px transparent; } }

@media (min-width: 1000px) {
    .actividad { display: grid; grid-template-columns: 340px 1.3fr 1fr; align-items: center; padding: 28px 0; }
    .act-fecha { padding: 0; }
    .act-lado { padding: 0 20px; }
}

.agenda-vacia { text-align: center; padding: 40px 0; }
.agenda-vacia .emoji { display: none; }
.agenda-vacia h3 { font-size: 34px; margin-bottom: 12px; }
.agenda-vacia p { color: var(--tinta-2); max-width: 680px; margin: 0 auto 24px; }

/* ---------------------------------------------------------------------------
   CIFRAS Y RAZONES — sin cajas: líneas finas y tipografía
   --------------------------------------------------------------------------- */
.cifras { display: flex; justify-content: center; max-width: 1240px; margin: 0 auto clamp(30px, 3vw, 50px); }
.cifra { flex: 1; max-width: 420px; text-align: center; padding: 4px 26px; }
.cifra + .cifra { border-left: 1px solid var(--linea); }
.cifra .num { font-family: var(--f-titulo); font-style: normal; font-weight: 700; font-size: clamp(50px, 4.4vw, 82px); line-height: 1; color: var(--acento); font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.cifra .num.contado { animation: golpe .5s var(--ease); }
.cifra .txt { color: var(--tinta-2); max-width: 360px; margin: 6px auto 0; font-size: 16px; line-height: 1.45; }
@keyframes golpe { 40% { transform: scale(1.12); } }

.razones { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.2vw, 40px); max-width: 1600px; margin: 0 auto; }
.razon { text-align: center; padding-top: 18px; border-top: 3px solid var(--acento-2); }
.razon h3 { font-size: clamp(22px, 1.7vw, 29px); margin-bottom: 8px; }
.razon p { color: var(--tinta-2); font-size: 16px; line-height: 1.55; text-align: center; hyphens: manual; -webkit-hyphens: manual; }

/* ---------------------------------------------------------------------------
   QUIÉNES SOMOS — banda oscura con el gato mirando (y parpadeando)
   --------------------------------------------------------------------------- */
.seccion-oscura { overflow: hidden; padding-top: clamp(190px, 17vw, 290px); }
.gato-fondo {
    position: absolute; top: clamp(-60px, -3vw, -20px); left: 50%; width: min(760px, 110vw);
    transform: translateX(-50%); mix-blend-mode: screen; pointer-events: none;
}
.gato-fondo .parpado { animation: parpadeo 5.5s ease-in-out infinite; }
.nosotros { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 100px); align-items: center; position: relative; z-index: 2; }
.nosotros-foto { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; }
.nosotros-foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotros-texto { text-align: center; }
.nosotros-texto h2 { font-size: clamp(36px, 3.8vw, 68px); margin-bottom: 24px; }
.nosotros-texto p { color: var(--sobre-oscuro-2); font-size: 17.5px; margin-bottom: 16px; }
.nosotros-texto .antetitulo { color: var(--acento-2); }
.nosotros-texto .enlace-flecha { color: var(--acento-2); margin-top: 8px; }

/* ---------------------------------------------------------------------------
   GALERÍA EN MOVIMIENTO — dos cintas en sentidos opuestos
   --------------------------------------------------------------------------- */
.galeria-cinta { background: var(--fondo-3); padding: clamp(26px, 2.6vw, 46px) 0; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.cinta-pista { display: flex; gap: 16px; width: max-content; animation: correr 70s linear infinite; }
.cinta[data-dir="der"] .cinta-pista { animation-direction: reverse; animation-duration: 80s; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-pista img {
    height: clamp(170px, 19vw, 320px); width: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px;
    transition: transform .7s var(--ease), filter .5s ease;
}
.cinta-pista img:hover { transform: scale(1.05) rotate(-1.5deg); }

/* ---------------------------------------------------------------------------
   FORMULARIO DE AVISOS — campos con línea, sin cajas
   --------------------------------------------------------------------------- */
form.cotizar { max-width: 960px; margin: 0 auto; text-align: center; }
form.cotizar .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin-bottom: 20px; }
form.cotizar label { display: block; font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }
/* Campos para rellenar: fondo claro propio para distinguirlos del resto */
form.cotizar input, form.cotizar select, form.cotizar textarea {
    width: 100%; background: var(--papel); border: 1.5px solid rgba(30,42,58,.22); border-radius: 12px;
    padding: 13px 16px; font: inherit; font-size: 17px; color: var(--tinta); text-align: center;
    box-shadow: inset 0 2px 4px rgba(30,42,58,.06);
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
form.cotizar input:hover, form.cotizar select:hover, form.cotizar textarea:hover { border-color: rgba(30,42,58,.4); }
form.cotizar input:focus, form.cotizar select:focus, form.cotizar textarea:focus {
    outline: none; background: #fff; border-color: var(--acento);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent);
}
form.cotizar input::placeholder, form.cotizar textarea::placeholder { color: #8A8F98; }
form.cotizar input[type="checkbox"] { width: 20px; height: 20px; padding: 0; accent-color: var(--acento); box-shadow: none; flex-shrink: 0; }
form.cotizar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23A3140B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer;
}
form.cotizar label { margin-bottom: 7px; }
.turnstile-caja { display: flex; justify-content: center; margin: 18px 0; min-height: 65px; }
.form-nota { font-size: 14px; color: var(--tinta-3); margin-top: 16px; text-align: center; }
.form-estado, .form-ok, .form-error { text-align: center; margin-top: 16px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   CIERRE + PIE
   --------------------------------------------------------------------------- */
.cierre { background: var(--acento); color: #fff; text-align: center; padding: clamp(40px, 4vw, 70px) 20px clamp(80px, 6.5vw, 108px); }
.cierre h2 { font-size: clamp(44px, 5.4vw, 100px); margin-bottom: 18px; }
.cierre h2 em { color: var(--franja); }
.cierre p { max-width: 820px; margin: 0 auto 26px; font-size: clamp(17px, 1.3vw, 21px); }
.cierre .btn { background: #fff; color: var(--acento); box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); }
.cierre .btn:hover { background: var(--fondo); }
/* El gato vikingo (SVG animado: respira, parpadea, la abeja zumba, salen burbujas) */
.cierre-grilla { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 70px); max-width: 1300px; margin: 0 auto; }
.cierre-texto { flex: 0 1 760px; }
.gato-vikingo { width: clamp(220px, 21vw, 360px); height: auto; flex-shrink: 0; filter: drop-shadow(0 22px 26px rgba(0,0,0,.28)); transition: transform .7s var(--ease); cursor: pointer; }
.gato-vikingo:hover { transform: translateY(-14px) rotate(-3deg) scale(1.03); }
.gato-vikingo.salta { animation: saltoGato .7s var(--ease); }
@keyframes saltoGato { 30% { transform: translateY(-34px) rotate(-6deg); } 60% { transform: translateY(0) rotate(2deg); } }

.pie { position: relative; background: var(--oscuro); color: var(--sobre-oscuro); padding: 64px 0 22px; }
.pie-gato { position: absolute; left: 50%; top: -62px; width: 220px; margin-left: -110px; fill: var(--oscuro); stroke: var(--oscuro); }
.pie-gato .cola { transform-origin: 180px 70px; animation: cola 3.2s ease-in-out infinite; }
@keyframes cola { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
.pie-grilla { width: 96%; max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; text-align: center; }
.pie-grilla h4 { font-size: 22px; margin-bottom: 14px; color: var(--acento-2); }
.pie-grilla a { display: block; color: var(--sobre-oscuro-2); padding: 3px 0; transition: color .3s ease; }
.pie-grilla a:hover { color: var(--sobre-oscuro); }
.pie-marca img { width: 96px; margin: 0 auto 14px; }
.pie-marca p { color: var(--sobre-oscuro-2); font-size: 15px; max-width: 360px; margin: 0 auto; }
.pie-abajo { text-align: center; color: var(--sobre-oscuro-2); font-size: 13.5px; margin-top: 36px; opacity: .8; }

.wa-flotante {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 60px; height: 60px; border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,.45); transition: transform .5s var(--ease);
}
.wa-flotante svg { width: 31px; height: 31px; fill: #fff; }
.wa-flotante:hover { transform: scale(1.08) rotate(-6deg); }
.wa-flotante::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: halo 2.6s ease-out infinite; }
@keyframes halo { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* ---------------------------------------------------------------------------
   FICHA DE ACTIVIDAD / CURSO EN MODAL (la arma main.js)
   --------------------------------------------------------------------------- */
.modal-curso {
    position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center;
    padding: 2vh 2vw; background: rgba(10,12,18,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-curso.abierto { display: flex; animation: aparecer .35s ease; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subirPanel { from { opacity: 0; transform: translateY(40px) scale(.98); } }
.mc-panel {
    position: relative; width: min(1150px, 96vw); max-height: 96vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--fondo); color: var(--tinta); border-radius: 24px;
    box-shadow: 0 50px 110px -30px rgba(0,0,0,.7); animation: subirPanel .6s var(--ease);
}
.mc-cabecera { position: relative; height: clamp(92px, 11vh, 140px); flex-shrink: 0; overflow: hidden; }
.mc-cabecera img { width: 100%; height: 100%; object-fit: cover; }
.mc-cabecera::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,18,.45), rgba(10,12,18,.72)); }
.mc-encabezado { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 76px; }
.mc-encabezado h2 { font-size: clamp(24px, 3vw, 40px); color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.6); }
.mc-encabezado .mce-logo { width: clamp(48px, 5vw, 70px); height: auto; margin-right: 16px; flex-shrink: 0; }
.mc-cuerpo { flex: 1; overflow-y: auto; padding: clamp(24px, 3.2vw, 46px) clamp(20px, 3.8vw, 54px); text-align: center; }
.mc-bajada { font-size: clamp(16px, 1.4vw, 19px); color: var(--tinta-2); max-width: 1000px; margin: 0 auto 30px; }
.mc-cuerpo h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 36px 0 20px; }
.mc-cuerpo h3::after { content: ''; display: block; width: 50px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: var(--acento); }
.mc-bloques { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.mc-bloque { flex: 1 1 320px; max-width: 580px; padding: 24px 22px; border-top: 3px solid var(--acento); background: var(--papel); border-radius: 0 0 16px 16px; box-shadow: 0 14px 28px -18px rgba(30,42,58,.4), 0 0 0 1px rgba(30,42,58,.12); }
.mc-bloque h4 { font-size: 22px; margin-bottom: 10px; }
.mc-bloque p { color: var(--tinta-2); font-size: 15.5px; }
.mc-incluye { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 26px; padding-top: 12px; }
/* Notas de papel pegadas con cinta, levemente giradas */
.mc-item {
    --r: -2deg; position: relative; flex: 1 1 200px; max-width: 250px; text-align: center;
    background: var(--papel); color: #1E2A3A; padding: 26px 18px 20px; border-radius: 4px;
    box-shadow: 0 18px 30px -16px rgba(30,42,58,.45), 0 0 0 1px rgba(30,42,58,.14);
    transform: rotate(var(--r)); transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.mc-item:nth-child(2n) { --r: 1.6deg; }
.mc-item:nth-child(3n) { --r: -.8deg; }
.mc-item:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 36px -20px rgba(0,0,0,.55); }
.mc-item::before {      /* cinta adhesiva */
    content: ''; position: absolute; top: -11px; left: 50%; width: 78px; height: 22px; margin-left: -39px;
    background: color-mix(in srgb, var(--acento-2) 55%, transparent); transform: rotate(-4deg);
}
.mc-item .ic { display: none; }     /* sin emojis-ícono: se sienten artificiales */
.mc-item h4 { font-size: 21px; margin-bottom: 6px; color: var(--acento-texto); }
.mc-item p { font-size: 14.5px; color: #4A5668; text-align: center; text-align-last: center; }
/* Dónde y cupos, en una línea bajo las fechas */
.mce-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 26px auto 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; color: var(--tinta); }
.mce-datos span + span::before { content: '✦'; color: var(--acento-2); margin: 0 18px; font-size: .8em; }
.mc-aviso { border-top: 1px solid var(--linea); padding-top: 22px; margin-top: 10px; }
.mc-aviso p { color: var(--tinta-2); }
.mc-pie { flex-shrink: 0; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 18px clamp(20px, 4vw, 54px); border-top: 1px solid var(--linea); background: var(--fondo-2); }
.mc-cerrar {
    position: absolute; top: 14px; right: 16px; z-index: 10; width: 48px; height: 48px; border-radius: 50%;
    background: rgba(10,12,18,.75); color: #fff; font-size: 28px; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: transform .5s var(--ease), background-color .3s ease;
}
.mc-cerrar:hover, .mc-cerrar:focus-visible { background: var(--acento); transform: rotate(90deg); outline: none; }
body.modal-abierto { overflow: hidden; }
.mc-cuerpo .act-estado { margin-bottom: 10px; }

.lista-check { list-style: none; margin-top: 10px; }
.lista-check li { padding: 8px 4px; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 15px; text-align: center; }
.lista-check li:first-child { border-top: 0; }

.precios { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.precio { position: relative; flex: 1 1 180px; max-width: 260px; text-align: center; padding: 18px 16px; }
.precio + .precio { border-left: 1px solid var(--linea); }
.precio .personas { font-weight: 700; color: var(--acento-texto); font-size: 14px; letter-spacing: .5px; margin-bottom: 6px; }
.precio .monto { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; }
.precio .unitario { font-size: 13.5px; color: var(--tinta-3); margin-top: 6px; }
.precio .cinta { position: absolute; top: -10px; left: 0; right: 0; font-family: var(--f-marcador); color: var(--acento-2-texto); font-size: 15px; transform: rotate(-3deg); }

/* Ficha con video/afiche a la izquierda */
.mce-columna { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.mce-media { background: #000; flex-shrink: 0; }
.mce-media video, .mce-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 961px) {
    .mc-panel.con-media { width: min(1560px, 96vw); height: min(940px, 94vh); flex-direction: row; }
    .mc-panel.con-media .mce-media { width: min(34%, calc(94vh * 9 / 16)); }
}
@media (max-width: 960px) {
    .mc-panel.con-media { overflow-y: auto; }
    .mc-panel.con-media .mce-media img { height: auto; }
    .mc-panel.con-media .mce-media video { height: auto; max-height: 75vh; }
    .mc-panel.con-media .mce-columna { flex: none; min-height: auto; }
    .mc-panel.con-media .mc-cuerpo { overflow: visible; flex: none; }
    .mc-panel.con-media .mc-pie { position: sticky; bottom: 0; z-index: 5; gap: 4px; padding-bottom: 8px; }
    .mc-panel.con-media .mc-pie .mce-seguir { width: auto; border: 0; padding: 6px 10px; font-size: 12.5px; letter-spacing: 0; text-transform: none; text-decoration: underline; color: var(--tinta-3); }
    .mc-panel.con-media .mc-cerrar { position: sticky; top: 10px; margin: 10px 12px -58px auto; flex-shrink: 0; }
}
.mce-nota { max-width: 1000px; margin: 0 auto 22px; padding: 16px 22px; border-left: 4px solid var(--acento-2); border-right: 4px solid var(--acento-2); background: color-mix(in srgb, var(--acento-2) 14%, transparent); font-size: clamp(15px, 1.3vw, 17px); }
.mce-nota strong { color: var(--acento-texto); }
.mce-jcab { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.mce-jcab .cals { flex-shrink: 0; }
.mce-jinfo { flex: 1; min-width: 0; text-align: center; }
.mce-num { display: block; font-family: var(--f-marcador); color: var(--acento-texto); font-size: 16px; margin-bottom: 2px; }
.mce-jornada h4 { margin-bottom: 6px; }
.mce-jornada .mce-cuando { font-weight: 700; color: var(--tinta); font-size: 17px; line-height: 1.5; text-align: center; }
.mce-seguir { display: none; }
.mc-evento.es-bienvenida .mce-seguir { display: inline-flex; }

/* ---------------------------------------------------------------------------
   PANTALLAS MEDIANAS Y CELULAR
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .servicio { grid-template-columns: 1fr 1.6fr; }
    .servicio .enlace-flecha { grid-column: 1 / -1; }
    .razones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .menu { grid-template-columns: 1fr; }
    .menu-lado { display: none; }
    .hero { flex-direction: column; padding: 36px 0 100px; min-height: 0; }
    .hero-texto { width: 92%; }
    .hero-fotos { position: static; order: 2; display: flex; justify-content: center; gap: 10px; margin-top: 30px; padding: 0 10px; }
    .pegatina { position: relative; inset: auto; width: 31%; max-width: 200px; border-width: 5px; }
    .p4, .p5 { display: none; }
    .servicio { grid-template-columns: 1fr; gap: 8px; padding: 22px 6px; }
    .servicio .enlace-flecha { grid-column: auto; }
    .servicio-foto { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 8px; }
    .servicio-foto img { width: 100%; height: 100%; object-fit: cover; }
    .servicio:hover h3 { transform: none; }
    .nosotros { grid-template-columns: 1fr; }
    .cierre-grilla { flex-direction: column; gap: 6px; }
    .gato-vikingo { width: 190px; }
    .pie-grilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    :root { --barra-h: 60px; --franja-h: 36px; }
    body { font-size: 16px; }
    .contenedor { width: calc(100% - 28px); }
    .marca-letras { height: 21px; }
    .marca-logo { width: 40px; height: 40px; }
    .menu-frase { display: none; }     /* en celular solo las rayitas */
    .barra-marca { gap: 8px; }
    .barra-redes { gap: 0; }
    .barra-redes a { width: 36px; height: 36px; }
    .barra-redes svg { width: 20px; height: 20px; }
    .menu-lista a { font-size: 27px; }
    .cifras { flex-direction: column; align-items: center; }
    .cifra + .cifra { border-left: 0; border-top: 1px solid var(--linea); padding-top: 14px; margin-top: 10px; }
    .razones { grid-template-columns: 1fr; }
    form.cotizar .fila { grid-template-columns: 1fr; }
    .pie-grilla { grid-template-columns: 1fr; }
    .sello { width: 128px; height: 128px; margin-left: -64px; bottom: -64px; }
    .sello img { width: 74px; height: 74px; }
    .wa-flotante { width: 54px; height: 54px; right: 14px; bottom: 14px; }
    .mce-jcab { gap: 14px; }
    .mce-jcab .cal { width: 96px; }
    .mce-jcab .cal-num { font-size: 38px; }
    .mc-pie .btn { width: 100%; }
}


/* ===========================================================================
   PÁGINAS INTERNAS (las arma herramientas/construir_sitio_nuevo.py)
   =========================================================================== */

/* Cabecera de página: texto a la izquierda, dos fotos-pegatina a la derecha */
.cabeza-pagina {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
    gap: clamp(20px, 3vw, 60px); width: 96%; max-width: var(--ancho); margin: 0 auto;
    padding: clamp(34px, 4vw, 70px) 0 clamp(40px, 4.5vw, 80px);
}
.cabeza-texto { text-align: center; }
.cabeza-pagina h1 { font-size: clamp(44px, 5vw, 92px); line-height: 1.04; margin-bottom: 20px; }
.cabeza-pagina h1 em { color: var(--acento); }
.cabeza-pagina .bajada { font-size: clamp(16px, 1.3vw, 20px); color: var(--tinta-2); max-width: 820px; margin: 0 auto 28px; }
.cabeza-fotos { position: relative; height: clamp(300px, 30vw, 520px); }
.cabeza-fotos .pegatina { width: clamp(170px, 18vw, 330px); animation-duration: 8s; }
.cabeza-fotos .q1 { --rot: -6deg; left: 4%; top: 2%; }
.cabeza-fotos .q2 { --rot: 5deg; right: 4%; bottom: 0; animation-delay: -3s; }
.lista .cabeza-fotos .q1 { transition-delay: .25s; }
.lista .cabeza-fotos .q2 { transition-delay: .4s; }

/* Listas de ítems (cursos, tipos de cata, servicios): como "Qué hacemos" pero más livianas */
.lista-items .servicio h3 { font-size: clamp(28px, 2.6vw, 46px); }
.lista-items .servicio { padding-top: clamp(16px, 1.5vw, 24px); padding-bottom: clamp(16px, 1.5vw, 24px); }
button.enlace-flecha { font: inherit; font-weight: 700; cursor: pointer; }
/* Servicios que traen además una lista de puntos (asesorías): columna propia */
@media (min-width: 1101px) {
    .lista-items .servicio:has(.lista-check) { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) 150px; }
}
.servicio .lista-check { margin-top: 0; }
.servicio .lista-check li { padding: 4px; font-size: 14.5px; border-top: 0; }

/* Pasos: una línea que los une, sin números ni cajas */
.pasos { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(18px, 2.4vw, 44px); }
.pasos:not(:has(.con-foto))::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 9px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--acento-2) 0 10px, transparent 10px 18px);
}
.paso { position: relative; text-align: center; }
.paso:not(.con-foto)::before {
    content: ''; display: block; width: 20px; height: 20px; margin: 0 auto 16px; border-radius: 50%;
    background: var(--acento); box-shadow: 0 0 0 5px var(--fondo), 0 0 0 7px var(--acento-2);
}
.seccion-alterna .paso:not(.con-foto)::before { box-shadow: 0 0 0 5px var(--fondo-2), 0 0 0 7px var(--acento-2); }
.seccion-suave .paso:not(.con-foto)::before { box-shadow: 0 0 0 5px var(--fondo-3), 0 0 0 7px var(--acento-2); }
.paso h3 { font-size: clamp(22px, 1.8vw, 30px); margin-bottom: 8px; }
.paso p { color: var(--tinta-2); font-size: 16px; text-align: center; }
.paso-foto { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 16px; box-shadow: 0 20px 36px -24px rgba(0,0,0,.5); }
.paso-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.paso:hover .paso-foto img { transform: scale(1.06); }

/* Biografías */
.bios { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 80px); max-width: 1400px; margin: 0 auto; }
.bio { text-align: center; }
.bio-foto {
    display: block; width: clamp(150px, 13vw, 210px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 0 auto 18px;
    border: 7px solid var(--papel); box-shadow: 0 20px 36px -22px rgba(0,0,0,.5);
}
.bio-logo { object-fit: contain; background: var(--papel); padding: 18px; }
.bio h3 { font-size: clamp(26px, 2.2vw, 38px); margin-bottom: 4px; }
.bio .rol { font-family: var(--f-marcador); color: var(--acento-texto); font-size: 17px; margin-bottom: 14px; transform: rotate(-1.5deg); }
.bio p { color: var(--tinta-2); margin-bottom: 10px; }

/* Galería: mosaico con zoom al pasar el mouse */
.galeria { columns: 3 260px; column-gap: 16px; }
.galeria figure { break-inside: avoid; margin-bottom: 16px; border-radius: 16px; overflow: hidden; }
.galeria img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.galeria figure:hover img { transform: scale(1.05); }

/* Formulario + datos de contacto */
.form-caja { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 80px); align-items: start; max-width: 1500px; margin: 0 auto; }
.form-caja form.cotizar { max-width: none; margin: 0; }
form.cotizar > div { margin-bottom: 18px; }
form.cotizar .fila > div { margin-bottom: 0; }
form.cotizar select { appearance: none; -webkit-appearance: none; text-align-last: center; }
form.cotizar textarea { min-height: 110px; resize: vertical; text-align: center; }
form.cotizar label[style] { justify-content: center; color: var(--tinta-2) !important; }
.info-contacto { text-align: center; border-left: 3px solid var(--acento-2); padding-left: clamp(20px, 3vw, 50px); }
.info-contacto h3 { font-size: clamp(24px, 2vw, 32px); margin-bottom: 18px; }
.info-contacto .dato { padding: 12px 0; border-top: 1px solid var(--linea); color: var(--tinta-2); }
.info-contacto .dato:first-of-type { border-top: 0; }
.info-contacto .ic { display: none; }
.info-contacto a { color: var(--acento-texto); font-weight: 700; }

/* Filtros de la agenda: texto con subrayado, no botones */
.filtros { display: flex; justify-content: center; gap: clamp(14px, 3vw, 44px); margin-bottom: 26px; flex-wrap: wrap; }
.filtro { font-weight: 700; font-size: 17px; color: var(--tinta-3); padding: 6px 2px; background: linear-gradient(var(--acento), var(--acento)) 50% 100% / 0 3px no-repeat; transition: background-size .5s var(--ease), color .3s ease; }
.filtro:hover { color: var(--tinta); }
.filtro.activo { color: var(--tinta); background-size: 100% 3px; }

@media (max-width: 900px) {
    .cabeza-pagina { grid-template-columns: 1fr; padding-top: 28px; }
    .cabeza-fotos { height: auto; display: flex; justify-content: center; gap: 12px; }
    .cabeza-fotos .pegatina { position: relative; inset: auto; width: 42%; max-width: 220px; }
    .bios, .form-caja { grid-template-columns: 1fr; }
    .info-contacto { border-left: 0; border-top: 3px solid var(--acento-2); padding: 20px 0 0; }
    .pasos:not(:has(.con-foto))::before { display: none; }
}