/* =========================================================
   BAX Estudio · estilos
   Tipografía: Gotham (si se agrega la licencia web) → Montserrat
   ========================================================= */
:root {
    --verde: #134b5f;
    --verde-osc: #0f3d4e;
    --amarillo: #e4e34e;
    --amarillo-claro: #f1f0a6;
    --texto: #1d1d1b;
    --gris: #6f6f6f;
    --gris-claro: #d9d9d9;
    --pie: #13191d;
    --fuente: "Gotham", "Montserrat", system-ui, sans-serif;
    --ancho: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --bh: clamp(300px, 19vw, 365px); /* alto del banner de páginas internas */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--fuente);
    font-weight: 400;
    color: var(--texto);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.2; margin: 0; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.contenedor--texto { max-width: calc(880px + var(--gutter) * 2); }
.seccion { position: relative; padding: clamp(48px, 7vw, 90px) 0; overflow: hidden; }

.titulo { font-size: clamp(36px, 4.4vw, 52px); font-weight: 300; color: var(--verde); letter-spacing: .01em; }
.titulo strong { font-weight: 600; }
.titulo--centro { text-align: center; }
.barra { display: block; width: 68px; height: 9px; border-radius: 9px; background: var(--amarillo); margin: 22px 0 36px; }
.barra--centro { margin-left: auto; margin-right: auto; }

.texto { font-size: clamp(15px, 1.1vw, 17px); font-weight: 300; line-height: 1.85; letter-spacing: .015em; }
.texto p { margin: 0 0 1.6em; }
.texto strong { font-weight: 600; }
.texto h2 { font-size: 22px; font-weight: 600; margin: 1.6em 0 .6em; color: var(--verde); }
.texto h3 { font-size: 18px; font-weight: 600; margin: 1.4em 0 .5em; }
.texto a { color: var(--verde); }
.solo-desk { display: none; }
@media (min-width: 900px) { .solo-desk { display: inline; } }

.boton {
    display: inline-block; background: var(--amarillo); color: var(--verde-osc); border: 0; border-radius: 40px;
    padding: 12px 46px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px;
    text-decoration: none; transition: background .2s, transform .2s;
}
.boton:hover { background: #d6d53a; transform: translateY(-1px); }
.boton[disabled] { opacity: .6; cursor: wait; }

/* ---------- Cabecera ---------- */
/* Fija arriba. Transparente sobre el video/banner; al hacer scroll toma fondo y el logo baja al 80% */
.cabecera {
    --cab-pad: 46px;
    position: fixed; inset: 0 0 auto; z-index: 50; color: #fff;
    transition: background-color .35s ease, box-shadow .35s ease;
}
.cabecera.compacta {
    --cab-pad: 12px;
    background-color: rgba(19, 75, 95, .94);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}
@supports (backdrop-filter: blur(8px)) {
    .cabecera.compacta { background-color: rgba(19, 75, 95, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
html { scroll-padding-top: 110px; }
.cabecera__in {
    max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: var(--cab-pad) var(--gutter) 12px;
    display: flex; justify-content: center; position: relative; transition: padding .35s ease;
}
/* Compacta: mismo aire arriba y abajo del logo */
.cabecera.compacta .cabecera__in { padding-bottom: var(--cab-pad); }
.logo { --logo-w: clamp(120px, 11vw, 196px); display: flex; align-items: center; text-decoration: none; color: #fff; position: relative; transform-origin: 50% 0; transition: transform .35s ease, margin .35s ease; }
/* La escala no achica la caja del logo: el margen negativo descuenta el 20% de su alto (alto ≈ ancho × 0,33) */
.cabecera.compacta .logo { transform: scale(.8); margin-bottom: calc(var(--logo-w) * -.066); }
.logo img { width: var(--logo-w); height: auto; }
.logo__r { position: absolute; left: -16px; top: -2px; font-size: 13px; }
.logo__estudio { font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: clamp(11px, .95vw, 15px); margin: 18px 0 0 12px; }
.logo__sep { width: 2px; height: 30px; background: #fff; margin: 14px 26px 0; }
.logo__lema { font-weight: 500; text-transform: uppercase; font-size: clamp(10px, .75vw, 13px); line-height: 1.4; letter-spacing: .04em; margin-top: 14px; }

.menu { position: absolute; right: var(--gutter); top: var(--cab-pad); text-align: right; transition: top .35s ease; }
.menu__boton {
    background: none; border: 0; color: #fff; text-transform: uppercase; font-weight: 500; font-size: 13px;
    letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
}
.menu__hamb { width: 11px; height: 9px; border-top: 2px solid; border-bottom: 2px solid; position: relative; }
.menu__hamb::after { content: ""; position: absolute; left: 0; right: 0; top: 1.5px; border-top: 2px solid; }
.menu__tri { font-size: 10px; margin-left: 4px; transition: transform .25s; }
.menu__boton[aria-expanded="true"] .menu__tri { transform: rotate(180deg); }
.menu__lista {
    list-style: none; margin: 0; padding: 22px 18px 0 0; display: flex; flex-direction: column; gap: 14px;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s;
}
.menu.abierto .menu__lista { opacity: 1; visibility: visible; transform: none; }
.menu__lista a {
    text-decoration: none; text-transform: uppercase; font-size: 13px; font-weight: 500; letter-spacing: .03em;
    color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); transition: color .2s;
}
.menu__lista a:hover, .menu__lista a[aria-current="page"] { color: var(--amarillo); }
/* Cuando el menú queda sobre fondo blanco (scroll o páginas internas) se le da un fondo */
.es-interna .menu.abierto .menu__lista, .cabecera.compacta .menu.abierto .menu__lista { background: rgba(19, 75, 95, .92); padding: 18px 20px; margin-top: 10px; border-radius: 4px; }

@media (max-width: 760px) {
    .cabecera { --cab-pad: 26px; }
    .cabecera.compacta { --cab-pad: 10px; }
    .cabecera__in { justify-content: flex-start; }
    .logo__sep, .logo__lema { display: none; }
    .logo { margin-left: 14px; transform-origin: 0 0; }
    .menu { margin-top: 4px; }
    .menu.abierto .menu__lista { background: rgba(19, 75, 95, .95); padding: 18px 22px; margin-top: 10px; border-radius: 4px; }
    .menu__lista a { font-size: 15px; }
}

/* ---------- Banner con degradé y grano ---------- */
.banner {
    position: relative; height: var(--bh); display: flex; align-items: center; justify-content: center;
    padding: clamp(120px, 8vw, 140px) 0 clamp(40px, 3vw, 60px); overflow: hidden; color: #fff;
    background: linear-gradient(90deg, #e4e35a 0%, #c9d05b 18%, #93ad62 38%, #5b8a63 52%, #2f6765 66%, #184f5f 80%, #134b5f 100%);
}
.banner::after { /* grano */
    content: ""; position: absolute; inset: 0; opacity: .38; mix-blend-mode: overlay; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.banner--foto { background: var(--verde-osc) var(--banner-img) center / cover no-repeat; }
.banner--foto::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.banner--foto::after { display: none; }
.banner__titulo { position: relative; z-index: 1; font-size: clamp(32px, 3vw, 44px); font-weight: 300; letter-spacing: .02em; margin: 0; text-align: center; padding: 0 16px; }

/* ---------- Líneas que cruzan del banner (blancas) al cuerpo (amarillas) ----------
   El SVG está dibujado en coordenadas del diseño (1920 px de ancho, banner de 365 px).
   --u = 1 px del diseño en esta pantalla. El SVG se ubica de modo que la línea y=365
   del diseño caiga siempre justo en el borde inferior real del banner (--bh). */
main { position: relative; overflow: clip; }
.trazos {
    --u: max(calc(100vw / 1920), .45px);
    position: absolute; top: 0; left: 0; right: 0; height: calc(var(--bh) + 1100 * var(--u));
    pointer-events: none; z-index: 0;
}
.trazos__capa { position: absolute; left: 0; right: 0; overflow: hidden; }
.trazos__capa--banner { top: 0; height: var(--bh); color: #fff; opacity: .55; }
.trazos__capa--cuerpo { top: var(--bh); bottom: 0; color: var(--amarillo); opacity: .85; }
.trazos svg { position: absolute; left: 0; width: calc(1920 * var(--u)); height: calc(1700 * var(--u)); overflow: visible; }
/* el viewBox empieza en y=-300, así que y=365 del diseño está a 665 unidades del borde superior del SVG */
.trazos__capa--banner svg { top: calc(var(--bh) - 665 * var(--u)); }
.trazos__capa--cuerpo svg { top: calc(-665 * var(--u)); }
.trazos svg * { vector-effect: non-scaling-stroke; stroke-width: 1.3px; }
.trazos__capa--cuerpo svg * { stroke-width: 1.6px; }
/* El contenido de la página queda por encima de las líneas */
.seccion > .contenedor, .trabajos, .banner__titulo { position: relative; z-index: 1; }
@media (max-width: 760px) { .trazos__capa--cuerpo { opacity: .45; } }

/* ---------- Home ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; background: #1a2a33; color: #fff; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Video propio: cubre todo el bloque (como background-size: cover). Aparece con un fundido apenas tiene imagen */
.hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
    opacity: 0; transition: opacity .6s ease;
}
.hero__video.listo { opacity: 1; }
.hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.08) 35%, rgba(0,0,0,.4)); }
.hero__texto { position: absolute; left: 0; right: 0; bottom: clamp(70px, 8vw, 140px); z-index: 2; }
.hero h1 { font-weight: 700; text-transform: uppercase; font-size: clamp(17px, 1.45vw, 24px); letter-spacing: .04em; line-height: 1.5; }
.hero h1 span { display: block; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.hero h1 .hero__destacado { color: var(--amarillo); font-size: 1.22em; margin-bottom: .3em; }

.somos__texto { max-width: 820px; }
/* Textos de la portada alineados con el comienzo del texto del primer integrante (lo calcula un script en home.php) */
.alineado { margin-left: var(--alineacion-home, 0px); }
.equipo__texto { display: inline-block; text-align: center; }
.somos__cierre { font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .02em; margin-top: 2em !important; }
.somos__cierre span { color: var(--verde); }

.equipo { list-style: none; padding: 0; margin: clamp(60px, 8vw, 120px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; text-align: center; }
.equipo__foto {
    display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; background: var(--gris-claro); margin: 0 auto 44px;
    box-shadow: 0 0 0 0 var(--amarillo-claro); transition: box-shadow .3s;
}
.equipo__persona:hover .equipo__foto { box-shadow: 0 0 0 12px var(--amarillo-claro); }
@media (max-width: 760px) { .equipo__foto { width: 130px; height: 130px; margin-bottom: 28px; } }
.equipo h3 { color: var(--verde); text-transform: uppercase; font-size: 16px; font-weight: 700; letter-spacing: .05em; }
.equipo__titulo { color: var(--gris); margin: 4px 0 2px; font-size: 16px; }
.equipo__rol { margin: 0; font-weight: 500; font-size: 16px; }
@media (max-width: 760px) { .equipo { grid-template-columns: 1fr; } }

/* ---------- Hacemos ---------- */
.hacemos__intro { text-align: center; font-weight: 600; font-size: clamp(15px, 1.15vw, 18px); max-width: 720px; margin: 0 auto clamp(48px, 5vw, 70px); line-height: 1.6; }
.servicios { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 0 clamp(30px, 5vw, 90px); font-size: clamp(15px, 1.15vw, 18px); font-weight: 300; }
.servicios ul { margin: 0; padding: 0; list-style: none; }
.servicios li { position: relative; padding-left: 28px; margin-bottom: 8px; max-width: 360px; }
.servicios li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); }
.servicios strong { font-weight: 600; }
@media (max-width: 760px) { .servicios { grid-template-columns: 1fr; } }

/* ---------- En acción ---------- */
.trabajos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.trabajo-tarjeta { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; text-decoration: none; background: #222; }
.trabajo-tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.trabajo-tarjeta::after { content: ""; position: absolute; inset: 0; background: rgba(10, 20, 25, .45); transition: background .3s; }
.trabajo-tarjeta__nombre {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; white-space: nowrap;
    font-weight: 600; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: .02em; padding: 12px 32px; transition: background .3s;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.trabajo-tarjeta:hover img, .trabajo-tarjeta:focus-visible img { transform: scale(1.05); }
.trabajo-tarjeta:hover::after { background: rgba(10, 20, 25, .2); }
.trabajo-tarjeta:hover .trabajo-tarjeta__nombre { background: rgba(40, 40, 40, .75); }
@media (max-width: 900px) { .trabajos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trabajos { grid-template-columns: 1fr; } }

.clientes__grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(30px, 5vw, 80px) clamp(20px, 3vw, 50px); align-items: center; }
.clientes__grilla img { width: 100%; max-width: 130px; max-height: 90px; object-fit: contain; margin: 0 auto; filter: grayscale(1) opacity(.55); transition: filter .3s; }
.clientes__grilla li:hover img { filter: grayscale(1) opacity(1) contrast(1.2); }
@media (max-width: 900px) { .clientes__grilla { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .clientes__grilla { grid-template-columns: repeat(3, 1fr); } }

/* Página de un trabajo */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 36px; font-size: 15px; }
.migas li + li::before { content: "I"; margin-right: 6px; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--verde); }
.migas h1 { display: inline; font-size: inherit; font-weight: 600; }
.trabajo .seccion, .trabajo { padding-top: 40px; }
.trabajo .video-16x9 { max-width: 750px; margin: 0 auto; }
.trabajo__volver { text-align: center; margin: 32px 0 0; }
.trabajo__volver a { color: var(--verde); text-decoration: none; font-weight: 500; }

.video-16x9 { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lite__boton { position: absolute; inset: 0; border: 0; padding: 0; background: #000; width: 100%; height: 100%; }
.video-lite__boton img { width: 100%; height: 100%; object-fit: cover; }
.video-lite__play { position: absolute; left: 50%; top: 50%; width: 68px; transform: translate(-50%, -50%); transition: transform .2s; }
.video-lite__boton:hover .video-lite__play { transform: translate(-50%, -50%) scale(1.1); }

/* Modal de video (home) */
.modal-video { border: 0; padding: 0; background: transparent; width: min(92vw, 1100px); max-width: none; overflow: visible; }
.modal-video::backdrop { background: rgba(0, 0, 0, .85); }
.modal-video__cerrar { position: absolute; right: 0; top: -46px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; }

/* ---------- Manifiesto ---------- */
.manifiesto__mas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s ease; }
.manifiesto__mas > * { min-height: 0; }
.manifiesto__mas { overflow: hidden; }
.manifiesto.abierto .manifiesto__mas { grid-template-rows: 1fr; }
.manifiesto__mas-in { overflow: hidden; }
.manifiesto__final { font-weight: 700; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; letter-spacing: .02em; }
.manifiesto__pie { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; }
.manifiesto__pie .barra { margin: 0; }
.boton-flecha {
    width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--amarillo); color: #fff;
    display: grid; place-items: center; transition: transform .3s, background .2s;
}
.boton-flecha svg { width: 26px; height: 26px; transition: transform .4s; }
.boton-flecha:hover { background: #d6d53a; }
.boton-flecha[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- En foco ---------- */
.en-foco__lema { text-align: center; color: var(--verde); font-weight: 600; font-size: clamp(22px, 2vw, 30px); letter-spacing: .02em; line-height: 1.25; }
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px clamp(24px, 3vw, 54px); margin-top: 20px; }
.nota-tarjeta__enlace { display: block; text-decoration: none; }
.nota-tarjeta img { width: 100%; aspect-ratio: 346 / 208; object-fit: cover; margin-bottom: 26px; transition: opacity .25s; }
.nota-tarjeta time { font-size: 12px; font-weight: 300; }
.nota-tarjeta h3 { font-size: 17px; font-weight: 600; margin: 4px 0 22px; letter-spacing: .02em; }
.nota-tarjeta p { font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; }
.nota-tarjeta__enlace:hover img { opacity: .85; }
.nota-tarjeta__enlace:hover h3 { color: var(--verde); }
.nota-tarjeta.entrando { animation: aparecer .5s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 900px) { .notas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .notas { grid-template-columns: 1fr; } }

.cargar-mas { display: flex; flex-direction: column; align-items: center; margin-top: 56px; gap: 12px; }
.cargar-mas__enlace { font-size: 14px; color: var(--verde); }
.spinner { width: 52px; height: 52px; display: none; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 10%, #777 10% 14%, transparent 14% 22.5%, #777 22.5% 26.5%, transparent 26.5% 35%, #777 35% 39%, transparent 39% 47.5%, #777 47.5% 51.5%, transparent 51.5% 60%, #777 60% 64%, transparent 64% 72.5%, #777 72.5% 76.5%, transparent 76.5% 85%, #777 85% 89%, transparent 89% 97.5%, #777 97.5% 100%);
    -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%); mask: radial-gradient(circle, transparent 42%, #000 43%); animation: girar 1s steps(8) infinite; }
.cargar-mas.js .spinner { display: block; visibility: hidden; }
.cargar-mas.js .cargar-mas__enlace { position: absolute; opacity: 0; pointer-events: none; }
.cargar-mas.cargando .spinner { visibility: visible; }
@keyframes girar { to { transform: rotate(360deg); } }
.paginado { text-align: center; margin-top: 30px; }
.vacio { text-align: center; color: var(--gris); }

/* Nota */
.nota__cuerpo { max-width: 680px; }
.nota__cabecera h1 { font-size: clamp(24px, 2vw, 30px); font-weight: 600; letter-spacing: .02em; }
.nota__cabecera time { font-size: 13px; font-weight: 300; }
.nota__linea { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 30px; }
.nota__linea .barra { margin: 0; width: 60px; }
.nota__imagen { width: 100%; margin-bottom: 50px; }
.nota__contenido { font-size: 16px; }
.compartir { position: relative; }
.compartir__boton { background: none; border: 0; color: var(--verde); width: 36px; height: 36px; padding: 4px; }
.compartir__menu { position: absolute; right: 0; top: 100%; z-index: 5; list-style: none; margin: 6px 0 0; padding: 8px 0; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.15); border-radius: 6px; min-width: 170px; }
.compartir__menu a, .compartir__menu button { display: block; width: 100%; text-align: left; padding: 8px 18px; background: none; border: 0; text-decoration: none; font-size: 14px; }
.compartir__menu a:hover, .compartir__menu button:hover { background: #f3f3f3; }
.similares { border-top: 1px solid #ccc; margin-top: 60px; padding-top: 40px; max-width: 980px; }
.similares h2 { font-size: clamp(22px, 1.8vw, 27px); font-weight: 600; letter-spacing: .02em; margin-bottom: 36px; }
.notas--chicas { gap: 40px clamp(20px, 3vw, 46px); margin: 0; }

/* ---------- Contacto ---------- */
.contacto__grilla { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
.contacto__principal { max-width: 790px; }
.contacto__intro { font-weight: 500; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; margin: 0 0 50px; }
.contacto__lateral { display: flex; flex-direction: column; justify-content: space-between; padding-top: 10px; }
.contacto__lateral-abajo { padding-bottom: 6px; }
.datos-contacto { font-style: normal; color: var(--verde); text-align: right; border-right: 8px solid var(--amarillo); border-radius: 0 4px 4px 0; padding: 0 26px 0 0; font-size: 17px; line-height: 1.5; }
.datos-contacto p { margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.datos-contacto a { text-decoration: none; }
.datos-contacto__tels a { font-weight: 600; }
.datos-contacto__sep { font-weight: 700; margin: 0 6px; }
.datos-contacto__icono { width: 24px; display: inline-flex; }
.datos-contacto__icono svg { width: 24px; height: 24px; }
@media (max-width: 1000px) {
    .contacto__grilla { grid-template-columns: 1fr; }
    .contacto__lateral { order: -1; }
    .contacto__lateral-abajo { display: none; }
    .datos-contacto { text-align: left; border-right: 0; border-left: 8px solid var(--amarillo); padding: 0 0 0 18px; }
    .datos-contacto p { justify-content: flex-start; }
}

.contacto__aviso { background: #eef6e6; border-left: 6px solid #6ea13a; padding: 14px 18px; margin-bottom: 30px; font-weight: 500; }
.contacto__aviso--error { background: #fbeaea; border-color: #c0392b; }

.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 600px) { .formulario__fila { grid-template-columns: 1fr; } }
.campo { position: relative; margin-bottom: 26px; }
.campo input {
    width: 100%; border: 0; border-bottom: 1px solid #222; padding: 22px 0 8px; font: inherit; font-size: 15px; background: transparent; border-radius: 0;
}
.campo input:focus { outline: none; border-bottom: 2px solid var(--verde); }
.campo label { position: absolute; left: 0; top: 22px; color: var(--gris); font-size: 14px; pointer-events: none; transition: all .2s; }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label { top: 0; font-size: 12px; color: var(--verde); }
.campo__error { display: block; color: #c0392b; font-size: 13px; margin-top: 4px; }
.campo input[aria-invalid="true"] { border-bottom-color: #c0392b; }
.trampa { position: absolute; left: -9999px; }

.desafios { border: 0; padding: 0; margin: 50px 0 40px; }
.desafios legend { padding: 0; margin-bottom: 26px; font-size: 15px; line-height: 1.4; }
.desafios legend span { display: block; font-size: 14px; font-weight: 300; }
.check { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; font-size: 14px; letter-spacing: .02em; cursor: pointer; }
.check input { appearance: none; width: 21px; height: 21px; border: 2px solid #222; margin: 0; flex: none; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--verde); border-color: var(--verde); }
.check input:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check--chico { font-size: 13px; gap: 14px; margin: 30px 0 4px; }

.campo--area { margin-top: 40px; }
.campo--area label { position: static; display: block; color: var(--texto); font-size: 14px; pointer-events: auto; padding-right: 60px; }
.campo--area label span { display: block; font-weight: 300; }
.campo--area textarea { width: 100%; border: 0; border-bottom: 1px solid #222; resize: vertical; font: inherit; font-size: 15px; padding: 10px 0; min-height: 44px; background: transparent; }
.campo--area textarea:focus { outline: none; border-bottom: 2px solid var(--verde); }
.contador { position: absolute; right: 0; top: 0; font-size: 13px; }
.formulario__enviar { text-align: right; margin-top: 20px; }

/* ---------- Transición entre páginas ----------
   Chrome, Edge y Safari 18+: View Transitions nativas (la cabecera y el pie quedan quietos,
   el contenido sale hacia arriba con fundido y el nuevo entra desde abajo).
   Firefox y navegadores viejos: solo un fundido de entrada. */
@view-transition { navigation: auto; }
.cabecera { view-transition-name: cabecera; }
.pie { view-transition-name: pie; }
.banner__titulo { view-transition-name: banner-titulo; }

::view-transition-old(root) { animation: vt-salir .35s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-entrar .55s cubic-bezier(.2, .7, .2, 1) .1s both; }
::view-transition-old(banner-titulo) { animation: vt-salir .3s ease both; }
::view-transition-new(banner-titulo) { animation: vt-titulo .7s cubic-bezier(.2, .7, .2, 1) .15s both; }
::view-transition-group(cabecera), ::view-transition-group(pie) { animation-duration: .4s; }

@keyframes vt-salir { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(36px); } }
@keyframes vt-titulo { from { opacity: 0; transform: translateY(18px); letter-spacing: .12em; } }

@supports not (view-transition-name: none) {
    main { animation: vt-entrar .6s cubic-bezier(.2, .7, .2, 1) both; }
}

/* Si el sistema pide reducir movimiento: solo fundido, sin desplazamiento */
@media (prefers-reduced-motion: reduce) {
    @keyframes vt-salir { to { opacity: 0; } }
    @keyframes vt-entrar { from { opacity: 0; } }
    @keyframes vt-titulo { from { opacity: 0; } }
}

/* ---------- Pie ---------- */
.pie { background: var(--pie); color: #fff; --icono-fondo: var(--pie); }
.pie__in {
    max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: 24px var(--gutter);
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 20px 40px; font-size: 14px;
}
.pie p { margin: 0; }
.pie__redes { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.pie__redes a { display: block; width: 22px; height: 22px; color: #fff; transition: color .2s; }
.pie__redes a:hover { color: var(--amarillo); }
.pie__redes svg { width: 100%; height: 100%; }
.pie__copy { text-align: center; text-transform: uppercase; letter-spacing: .02em; }
.pie__copy strong { color: var(--amarillo); font-weight: 600; }
.pie__dev { font-size: 11px; }
.pie__dev a { text-decoration: none; }
.idioma {
    display: flex; align-items: center; gap: 2px; background: none; border: 0; color: #fff;
    font-size: 11px; font-weight: 700; padding: 4px 0; letter-spacing: .02em;
}
.idioma span { opacity: .55; transition: opacity .2s, color .2s; }
.idioma span.activo { opacity: 1; color: var(--amarillo); }
.idioma svg { width: 28px; height: 28px; color: var(--amarillo); margin-left: 12px; transition: transform .5s ease; }
.idioma:hover svg { transform: rotate(180deg); }

/* Ocultar la interfaz de Google Translate (barra superior, globos y resaltados) */
body { top: 0 !important; position: static !important; }
body > .skiptranslate, .goog-te-banner-frame, iframe.skiptranslate, #goog-gt-tt, .goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display: none !important; }
font[style] { background: none !important; box-shadow: none !important; }
@media (max-width: 900px) {
    .pie__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}