/* Diseño del sitio, pasado de la maqueta aprobada de Inicio (versión 8). Paleta: carbón, gris claro y crema, con el
   verde de la marca. El verde brillante va en lo decorativo y sobre fondos oscuros; botones y textos verdes sobre
   claro usan el verde oscuro, que cumple AA con texto blanco (5.75). El texto corrido chico usa var(--texto-XX). */

/* Fuentes del propio sitio, solo latín (licencia SIL Open Font) */
@font-face{font-family:"Anton";font-weight:400;font-style:normal;font-display:swap;src:url(/fuentes/anton-400-latin.woff2) format("woff2")}
@font-face{font-family:"Bebas Neue";font-weight:400;font-style:normal;font-display:swap;src:url(/fuentes/bebas-neue-400-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/fuentes/barlow-400-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(/fuentes/barlow-500-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(/fuentes/barlow-600-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(/fuentes/barlow-700-latin.woff2) format("woff2")}

:root {
  --carbon: #2B3137; --carbon-2: #363D44; --carbon-3: #22272C; --gris-claro: #E4E6E8; --crema: #F1EEE9; --blanco: #FFFFFF;
  --texto-claro: #D5D9DD; --gris: #55606C; --gris-tenue: #A3ABB4; --linea: rgba(43,49,55,.14); --linea-clara: rgba(255,255,255,.12);
  --acento: #3AAD55; --acento-osc: #1D7537; --acento-hover: #1B6A31; --acento-suave: #E9F5EC; --acento-suave-osc: rgba(58,173,85,.16);
  --ancho: 1320px; --gutter: clamp(16px, 4vw, 72px);
  --alto-barra: 84px; --alto-flotante: 80px;
  --foco: #1D7537; --saltar-fondo: #22272C; --saltar-texto: #F1EEE9;
}
/* Prueba con ?acento=naranja (solo en modo prueba) */
html.naranja { --acento: #EE7623; --acento-osc: #A94A0B; --acento-hover: #8F3F09; --acento-suave: #FCEBDD; --acento-suave-osc: rgba(238,118,35,.16); }

body { font-family: "Barlow", "Helvetica Neue", Arial, sans-serif; background: var(--gris-claro); color: var(--carbon); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
main { overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
/* En fondos oscuros, el anillo de foco va en crema */
.nav, .portada-texto, .cursos, .modalidades, .contacto-texto, .pie, .visor, .ls-cta { --foco: #F1EEE9; }

/* Botones y textos comunes */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--acento-osc); color: #fff; font-weight: 700; font-size: 17px; padding: 15px 24px; border-radius: 6px; border: 0; cursor: pointer; font-family: inherit; transition: background .2s, transform .2s; }
.btn:hover { background: var(--acento-hover); }
.btn.borde { background: transparent; color: var(--crema); border: 2px solid rgba(241,238,233,.7); padding: 13px 22px; }
.btn.borde:hover { background: rgba(255,255,255,.08); }
/* Sobre la foto de la portada el botón secundario va blanco sólido: con borde y fondo transparente se perdía contra la ciudad */
.portada-texto .btn.borde { background: var(--blanco); color: var(--carbon); border-color: var(--blanco); }
.portada-texto .btn.borde:hover { background: var(--gris-claro); border-color: var(--gris-claro); }
.btn.chico { font-size: 15px; padding: 11px 18px; white-space: nowrap; }
.btn.ancho { width: 100%; }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 2.4px; color: var(--acento); text-transform: uppercase; }
.kicker.oscuro { color: var(--acento-osc); }
.h2 { font-family: "Anton"; font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.1; letter-spacing: .4px; margin-top: 12px; color: var(--carbon); }
.h2.claro { color: var(--crema); }
.parrafo { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--gris); margin-top: 16px; max-width: 720px; }
.parrafo.claro { color: var(--texto-claro); }
.encabezado { margin-bottom: clamp(32px, 4vw, 56px); }

/* Barra superior */
.nav { position: sticky; top: 0; z-index: 30; background: var(--carbon); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-in { display: flex; align-items: center; height: var(--alto-barra); max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; min-height: 44px; }
.logo img { width: 50px; height: auto; flex-shrink: 0; }
.marca { line-height: 1.05; }
.marca b { font-family: "Bebas Neue"; font-weight: 400; font-size: 30px; letter-spacing: 1.5px; display: block; color: var(--crema); }
.marca span { font-size: 14px; color: var(--texto-claro); }
.menu { margin-left: auto; display: flex; align-items: center; font-size: 17px; font-weight: 500; color: var(--texto-claro); }
.menu-liga, .menu-boton { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 14px 15px; white-space: nowrap; }
.menu-liga:hover, .menu-boton:hover, .menu-boton[aria-expanded="true"] { color: #fff; }
.menu-boton { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.menu-boton svg { width: 12px; height: 8px; transition: transform .2s; }
.menu-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.desplegable { position: relative; }
.submenu { list-style: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: 700px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 8px; padding: 14px; background: var(--carbon-3); border: 1px solid var(--linea-clara); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.submenu[hidden] { display: none; }
.submenu a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 6px; white-space: nowrap; line-height: 1.25; color: var(--texto-claro); }
.submenu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.solo-escritorio { margin-left: 34px; }
.solo-movil { display: none; }
.hamburguesa { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; }
.hamburguesa span { display: block; height: 2px; background: var(--crema); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav.abierto .hamburguesa span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.nav.abierto .hamburguesa span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 1. Portada */
.portada { background: var(--gris-claro); padding-bottom: 28px; }
.foto-zona { position: absolute; left: 0; right: 0; top: 0; height: clamp(560px, 46vw, 680px); overflow: hidden; background: var(--carbon); }
.foto-zona picture { display: block; height: 100%; }
.foto-zona img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.velo { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(36,41,46,.93) 0%, rgba(36,41,46,.88) 48%, 60.8%, rgba(36,41,46,.2) 70%, rgba(36,41,46,0) 100%); }
.portada-texto { position: relative; z-index: 2; padding-top: clamp(56px, 6vw, 92px); padding-bottom: clamp(52px, 4.5vw, 64px); min-height: clamp(400px, 34vw, 500px); }
.titular { font-family: "Anton"; font-weight: 400; text-transform: uppercase; color: var(--crema); line-height: 1.02; letter-spacing: .5px; font-size: clamp(46px, 5.6vw, 92px); margin-top: 18px; }
.titular em { font-style: normal; color: var(--acento); }
/* Etiqueta sobre la foto: el verde claro de las demás etiquetas sobre fondo oscuro, que cumple AA contra la foto */
.portada .kicker { color: #6CC983; }
.bajada { margin-top: 20px; max-width: 640px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; color: var(--blanco); font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.servicios { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.serv { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; border-top: 4px solid transparent; box-shadow: 0 10px 30px rgba(43,49,55,.18); transition: transform .25s, box-shadow .25s; }
.serv:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(43,49,55,.24); }
.serv .ft { height: 168px; overflow: hidden; }
.serv .ft img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.serv:hover .ft img { transform: scale(1.05); }
.serv[data-servicio="capacitacion"] img { object-position: center 62%; }
.serv .cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.serv h2 { font-family: "Bebas Neue"; font-weight: 400; font-size: 28px; letter-spacing: .6px; line-height: 1; color: var(--carbon); }
.serv p { font-size: 16px; line-height: 1.4; color: var(--gris); margin-top: 8px; flex: 1; }
.serv .liga { margin-top: 12px; font-weight: 700; font-size: 16px; color: var(--acento-osc); }
.pie-portada { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; align-items: center; margin-top: 22px; color: var(--gris); font-size: 15px; }
.pie-portada a { display: inline-flex; align-items: center; min-height: 44px; }

/* 2. Capacitación todo el año: texto a la izquierda y selector de cursos a la derecha */
.cursos { background: var(--carbon); color: var(--crema); padding: clamp(64px, 8vw, 110px) 0; margin-top: clamp(40px, 5vw, 72px); }
.cursos-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.chips li { font-size: 15px; font-weight: 600; padding: 9px 14px; border: 1px solid var(--linea-clara); border-radius: 30px; color: var(--crema); background: rgba(255,255,255,.04); }
.cursos-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.liga-clara { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 17px; color: var(--crema); border-bottom: 2px solid var(--acento); }
.liga-clara:hover { color: #fff; }
/* Selector: cada actividad es una casilla real con forma de píldora; la casilla queda oculta pero recibe el foco */
.selector { background: var(--carbon-3); border: 1px solid var(--linea-clara); border-radius: 12px; padding: 28px 26px 26px; }
.selector h3 { font-family: "Bebas Neue"; font-weight: 400; font-size: 30px; letter-spacing: .6px; line-height: 1; color: var(--crema); }
.selector fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.selector legend { padding: 0; margin-top: 8px; font-size: 16px; color: var(--texto-claro); }
.sel-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sel-opciones label { position: relative; display: inline-flex; cursor: pointer; }
.sel-opciones input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sel-opciones span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 30px; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--crema); background: rgba(255,255,255,.04); transition: background .2s, border-color .2s; }
.sel-opciones span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gris-tenue); box-sizing: border-box; }
.sel-opciones label:hover span { border-color: rgba(255,255,255,.4); }
.sel-opciones input:checked + span { background: var(--acento-osc); border-color: var(--acento); color: #fff; }
.sel-opciones input:checked + span::before { border: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3L11.6 5.6' fill='none' stroke='%231D7537' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sel-opciones input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.sel-resultado { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea-clara); }
.sel-cuenta { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--texto-claro); }
.sel-cuenta b { font-family: "Anton"; font-weight: 400; font-size: 34px; line-height: 1; color: #6CC983; }
.sel-lista { list-style: none; display: grid; gap: 8px; margin: 14px 0 22px; }
.sel-lista li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.35; color: var(--crema); }
.sel-lista li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.sel-lista .etiqueta { margin-left: 6px; font-size: 13px; padding: 2px 7px; vertical-align: 1px; }

/* 3. Trayectoria */
.trayectoria { background: var(--crema); padding: clamp(64px, 8vw, 110px) 0; }
.tray-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.tray-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.tray-foto figcaption { margin-top: 12px; font-size: var(--texto-14); color: var(--gris); }
.mision { margin-top: 26px; padding: 6px 0 6px 22px; border-left: 4px solid var(--acento); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; font-weight: 600; color: var(--carbon); }
.mision cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--gris); letter-spacing: 1.5px; text-transform: uppercase; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--linea); }
.cifras b { display: block; font-family: "Anton"; font-weight: 400; font-size: clamp(38px, 3.4vw, 54px); line-height: 1; color: var(--acento-osc); }
.cifras span { display: block; margin-top: 8px; font-size: var(--texto-15); line-height: 1.3; color: var(--gris); }
.credenciales { list-style: none; margin-top: 28px; display: grid; gap: 10px; }
.credenciales li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.4; color: var(--carbon); }
.credenciales li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--acento-osc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* 4. Ocho etapas */
.metodo { background: var(--blanco); padding: clamp(64px, 8vw, 110px) 0; }
.etapas { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.etapas li { position: relative; padding: 0 26px 40px 0; }
.etapas li::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--linea); }
.etapas li:nth-child(4n)::before { right: 26px; }
.etapas .n { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--carbon); color: var(--crema); font-family: "Anton"; font-size: 22px; letter-spacing: .5px; box-shadow: 0 0 0 8px var(--blanco); transition: background .3s; }
.etapas li:hover .n { background: var(--acento-osc); }
/* Al pasar el cursor, una línea verde sale del círculo hacia la siguiente etapa y remata en flecha. La flecha se
   recorta con clip-path sobre una franja de 12 px; la línea crece con width porque scaleX deformaría la punta */
.etapas .n { z-index: 1; }
@media (hover: hover) and (min-width: 641px) {
  .etapas li::after { content: ""; position: absolute; left: 28px; top: 22px; width: 0; height: 12px; background: var(--acento-osc);
    clip-path: polygon(0 5px, calc(100% - 11px) 5px, calc(100% - 11px) 0, 100% 6px, calc(100% - 11px) 12px, calc(100% - 11px) 7px, 0 7px);
    transition: width .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
  .etapas li:hover::after { width: calc(100% - 28px - 12px); }
  .etapas li:nth-child(4n):hover::after { width: calc(100% - 28px - 26px); }
}
@media (hover: hover) and (min-width: 641px) and (max-width: 1180px) {
  .etapas li:nth-child(4n):hover::after { width: calc(100% - 28px - 12px); }
  .etapas li:nth-child(2n):hover::after { width: calc(100% - 28px - 26px); }
}
@media (prefers-reduced-motion: reduce) { .etapas li::after { transition: none; } }
/* Inicio: las ocho etapas como tarjetas conectadas. La línea gris cruza el espacio entre tarjetas y la flecha del
   cursor llega hasta la siguiente; la tarjeta que sigue queda encima de la línea porque va después en el HTML */
.metodo .etapas { gap: 20px; }
.metodo .etapas li { background: #F4F2EE; border-radius: 18px; padding: 28px 26px 30px; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s; }
.metodo .etapas .n { box-shadow: none; }
.metodo .etapas p { max-width: none; }
.metodo .etapas li::before { left: 54px; right: -20px; top: 55px; }
.metodo .etapas li:nth-child(4n)::before { right: 26px; }
@media (hover: hover) {
  .metodo .etapas li:hover { transform: translateY(-4px); background: var(--blanco); box-shadow: 0 14px 34px rgba(43,49,55,.12); }
}
@media (hover: hover) and (min-width: 641px) {
  .metodo .etapas li::after { left: 54px; top: 50px; }
  .metodo .etapas li:hover::after { width: calc(100% - 54px + 20px + 14px); }
  .metodo .etapas li:nth-child(4n):hover::after { width: calc(100% - 54px - 26px); }
}
@media (hover: hover) and (min-width: 641px) and (max-width: 1180px) {
  .metodo .etapas li:nth-child(4n):hover::after { width: calc(100% - 54px + 20px + 14px); }
  .metodo .etapas li:nth-child(2n):hover::after { width: calc(100% - 54px - 26px); }
}
@media (max-width: 1180px) {
  .metodo .etapas li:nth-child(4n)::before { right: -20px; }
  .metodo .etapas li:nth-child(2n)::before { right: 26px; }
}
@media (max-width: 640px) {
  .metodo .etapas { gap: 14px; }
  .metodo .etapas li { padding: 22px 20px 24px 92px; min-height: 0; }
  .metodo .etapas li .n { left: 20px; top: 22px; }
  .metodo .etapas li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .metodo .etapas li { transition: none; } }
/* Inicio: tarjetas con ícono en lugar de número. La línea de la última tarjeta remata en la meta, dentro de la tarjeta;
   al pasar el cursor la línea llega sin punta de flecha y la meta se llena */
.etapas.con-icono .n svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.metodo .etapas.con-meta li:last-child::before { right: 66px; }
.etapas .meta { position: absolute; right: 26px; top: 36px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--acento-osc); color: var(--acento-osc); display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.etapas .meta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (min-width: 641px) {
  .metodo .etapas.con-meta li:last-child::after { clip-path: polygon(0 5px, 100% 5px, 100% 7px, 0 7px); }
  .metodo .etapas.con-meta li:last-child:hover::after { width: calc(100% - 120px); }
  .metodo .etapas.con-meta li:last-child:hover .meta { background: var(--acento-osc); color: #fff; transition-delay: .4s; }
}
@media (max-width: 640px) { .etapas .meta { display: none; } }
@media (prefers-reduced-motion: reduce) { .etapas .meta { transition: none; } }
.etapas h3 { margin-top: 20px; font-family: "Bebas Neue"; font-weight: 400; font-size: 30px; letter-spacing: .6px; line-height: 1; }
.etapas p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--gris); max-width: 270px; }

/* 5. Modalidades */
.modalidades { background: var(--carbon-2); padding: clamp(64px, 8vw, 110px) 0; }
.modalidades .kicker { color: #6CC983; }
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.modo { background: var(--carbon); border: 1px solid var(--linea-clara); border-radius: 12px; padding: 32px 30px 30px; color: var(--crema); }
.modo.destacado { border-color: var(--acento); box-shadow: inset 0 4px 0 var(--acento); }
.modo-ic { width: 52px; height: 52px; color: var(--acento); }
.modo h3 { margin-top: 18px; font-family: "Bebas Neue"; font-weight: 400; font-size: 34px; letter-spacing: .6px; line-height: 1; }
.modo p { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--texto-claro); }
.modo ul { list-style: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea-clara); display: grid; gap: 8px; }
.modo li { font-size: var(--texto-15); color: var(--texto-claro); padding-left: 18px; position: relative; }
.modo li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }

/* 6. Galería con visor */
.trabajos { background: var(--gris-claro); padding: clamp(64px, 8vw, 110px) 0; }
.galeria { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; grid-auto-flow: dense; }
.galeria li { position: relative; }
.foto { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; border-radius: 10px; cursor: zoom-in; background: var(--carbon); font: inherit; color: #fff; text-align: left; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
/* Encuadre por foto cuando el sujeto queda fuera del recorte centrado */
.foto img.enfoque-arriba { object-position: 50% 28%; }
.foto:hover img { transform: scale(1.05); }
.foto-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(20,24,28,.88)); }
.g-alta { grid-row: span 2; }
.g-ancha { grid-column: span 2; }
.visor { width: min(1140px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 52px 20px 20px; border: 0; border-radius: 12px; background: var(--carbon-3); color: var(--crema); }
.visor::backdrop { background: rgba(20,24,28,.9); }
.visor img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 170px); margin: 0 auto; border-radius: 8px; }
.visor p { margin-top: 14px; text-align: center; font-size: 17px; font-weight: 600; }
.visor-cerrar { position: absolute; top: 4px; right: 8px; width: 44px; height: 44px; background: none; border: 0; color: var(--crema); font-size: 36px; line-height: 1; cursor: pointer; }
.visor-flecha { position: absolute; top: calc(50% - 30px); display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,24,28,.72); color: var(--crema); cursor: pointer; transition: background .2s; }
.visor-flecha:hover { background: rgba(20,24,28,.92); }
.visor-flecha[hidden] { display: none; }
.visor-ant { left: 12px; }
.visor-sig { right: 12px; }
.visor-cuenta { display: block; margin-top: 4px; text-align: center; font-size: 16px; opacity: .8; }

/* 7. Todos los servicios */
.todos { background: var(--blanco); padding: clamp(64px, 8vw, 110px) 0; }
.lista-serv { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.lista-serv > li { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.ls-ancha { grid-column: span 2; }
.ls { position: relative; display: block; height: 100%; padding: 28px 28px 30px; transition: background .25s; }
.ls:hover { background: var(--acento-suave); }
.ls .n { font-family: "Anton"; font-size: 18px; color: var(--acento-osc); letter-spacing: .5px; }
.ls h3 { margin-top: 10px; padding-right: 22px; font-family: "Bebas Neue"; font-weight: 400; font-size: 30px; letter-spacing: .6px; line-height: 1; }
.ls p { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--gris); }
.ls::after { content: "→"; position: absolute; right: 26px; top: 26px; font-size: 20px; color: var(--acento-osc); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.ls:hover::after { opacity: 1; transform: none; }
.ls-cta { background: var(--carbon); color: var(--crema); }
.ls-cta:hover { background: var(--carbon-2); }
.ls-cta .n { font-family: "Barlow"; font-weight: 700; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--acento); }
.ls-cta p { color: var(--texto-claro); }
.ls-cta::after { opacity: 1; transform: none; color: var(--acento); }

/* 8. Contacto */
.contacto { --relleno-contacto: clamp(64px, 8vw, 110px); background: var(--carbon); padding: var(--relleno-contacto) 0; }
.contacto-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.horario { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 17px; font-weight: 600; color: var(--crema); background: rgba(255,255,255,.06); border: 1px solid var(--linea-clara); padding: 10px 16px; border-radius: 30px; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 0 var(--acento); animation: late 2s infinite; }
.medios { list-style: none; margin: 28px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.medios li { padding: 14px 0; border-bottom: 1px solid var(--linea-clara); }
.medios span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gris-tenue); }
.medios a { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; font-weight: 600; color: var(--crema); word-break: break-word; }
.medios a:hover { color: var(--acento); }
/* Correo y dirección a todo el ancho: en media columna el correo se partía y dejaba la «m» sola */
.medios .medios-ancho { grid-column: 1 / -1; }
.forma-caja { position: relative; background: var(--crema); border-radius: 12px; padding: 32px 30px; color: var(--carbon); }
/* Destino de «Solicitar diagnóstico» (#diagnostico). Con texto y formulario lado a lado cae en el borde superior de la
   sección, igual que #contacto; con el formulario debajo del texto (1180 px o menos) cae en el formulario */
.ancla-forma { position: absolute; left: 0; top: calc(-1 * var(--relleno-contacto)); width: 1px; height: 1px; }
.forma { display: grid; gap: 16px; }
.forma[hidden] { display: none; }
.forma h3, .confirma h3 { font-family: "Bebas Neue"; font-weight: 400; font-size: 36px; letter-spacing: .6px; line-height: 1; }
.forma label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .4px; color: var(--gris); }
.forma .opcional { font-weight: 500; letter-spacing: 0; }
.forma-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.forma input, .forma select { font: 500 17px "Barlow", sans-serif; color: var(--carbon); min-height: 48px; padding: 12px 14px; border: 1px solid rgba(43,49,55,.32); border-radius: 6px; background: #fff; width: 100%; }
.forma input:focus-visible, .forma select:focus-visible { outline: 3px solid var(--acento-osc); outline-offset: 1px; }
.forma [aria-invalid="true"] { border-color: #B3261E; }
.forma .trampa { display: none; }
.leyenda { font-size: var(--texto-14); line-height: 1.45; color: var(--gris); }
.leyenda a { color: var(--acento-osc); text-decoration: underline; display: inline-block; padding-block: 12px; margin-block: -12px; }
.forma-aviso { font-size: 16px; font-weight: 600; color: #B3261E; }
.forma-aviso:empty { display: none; }
.confirma { display: grid; gap: 14px; justify-items: center; text-align: center; }
.confirma[hidden] { display: none; }
.confirma p { font-size: 17px; line-height: 1.45; color: var(--gris); }
.confirma .confirma-folio { display: inline-block; margin: 2px 0 6px; padding: 12px 18px; border-radius: 8px; background: var(--carbon); color: var(--blanco); font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.confirma-folio span { color: #6CC983; }
.confirma-folio strong { font-weight: 700; }
/* Sello de envío: anillo que se llena en verde, palomita que se traza, latido y dos pulsos; luego sube el texto.
   El estado final es el de reposo: con «Reducir movimiento» se ve completo y sin animación */
.confirma-sello { position: relative; width: 96px; height: 96px; margin: 2px auto 4px; }
.confirma-sello svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.confirma-sello svg * { transform-box: view-box; transform-origin: 50% 50%; }
.confirma-sello .s-guia { fill: none; stroke: rgba(43,49,55,.12); stroke-width: 6; }
.confirma-sello .s-anillo { fill: none; stroke: var(--acento-osc); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 277; stroke-dashoffset: 0; transform: rotate(-90deg); }
.confirma-sello .s-palomita { fill: none; stroke: var(--acento-osc); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 0; }
.confirma-sello .pulso { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acento); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .confirma .s-anillo { stroke-dashoffset: 277; animation: sello-carga 1s .1s cubic-bezier(.65,0,.35,1) forwards; }
  .confirma .s-palomita { stroke-dashoffset: 70; animation: sello-traza .45s .95s cubic-bezier(.3,.9,.4,1) forwards; }
  .confirma-sello svg { animation: sello-latido .5s 1.3s ease-out both; }
  .confirma-sello .pulso { animation: sello-pulso 1s 1.3s cubic-bezier(.2,.6,.3,1) forwards; }
  .confirma-sello .pulso + .pulso { animation-delay: 1.55s; }
  .confirma > :not(.confirma-sello) { animation: sello-texto .5s cubic-bezier(.2,.7,.2,1) 1.45s both; }
  .confirma > :nth-child(3) { animation-delay: 1.52s; }
  .confirma > :nth-child(4) { animation-delay: 1.59s; }
  .confirma > :nth-child(5) { animation-delay: 1.66s; }
}
@keyframes sello-carga { to { stroke-dashoffset: 0; } }
@keyframes sello-traza { to { stroke-dashoffset: 0; } }
@keyframes sello-latido { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes sello-pulso { from { opacity: .6; transform: scale(.95); } to { opacity: 0; transform: scale(2); } }
@keyframes sello-texto { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.confirma-prueba { font-size: 15px; padding: 10px 12px; background: #FFF4C8; border-radius: 6px; color: var(--carbon); }

/* Pie */
.pie { background: var(--carbon-3); color: var(--texto-claro); padding: 56px 0 26px; }
.pie-in { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr; gap: 32px; }
/* Logo a la izquierda con la misma altura que el bloque de texto; js/sitio.js mide el texto y fija --alto-marca */
.pie-marca { display: flex; align-items: center; gap: 20px; }
.pie-marca img { flex: none; width: auto; height: var(--alto-marca, 104px); max-width: 38%; object-fit: contain; }
.pie-marca-texto { min-width: 0; }
.pie-marca b { display: block; font-family: "Bebas Neue"; font-weight: 400; font-size: 28px; letter-spacing: 1.5px; color: var(--crema); }
.pie-marca span { display: block; font-size: var(--texto-14); line-height: 1.45; margin-top: 4px; }
.pie-col { display: grid; gap: 0; align-content: start; font-size: var(--texto-15); }
.pie-col b { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gris-tenue); margin-bottom: 6px; }
.pie-col a { display: flex; align-items: center; gap: .3em; min-height: 44px; }
.pie-col a:hover { color: var(--acento); }
.pie-24 { color: var(--crema); font-weight: 600; margin-bottom: 4px; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea-clara); font-size: var(--texto-14); color: var(--gris-tenue); }
.pie-legal a { text-decoration: underline; display: inline-block; padding-block: 13px; margin-block: -13px; }

/* Botón flotante de WhatsApp */
.flotante { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--acento-osc); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.flotante svg { width: 24px; height: 24px; }
.flotante:hover { background: var(--acento-hover); }
/* Oculto mientras se ve el formulario o su confirmación (js/sitio.js), igual que junto al botón principal */
.flotante[data-oculto-forma] { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* Páginas de servicio: un solo juego de piezas para las 10 páginas interiores. Portada carbón con migas, título,
   bajada, botones e imagen (o su hueco mientras llega la imagen diseñada); bloques que alternan blanco, crema y gris;
   tarjetas de lo que incluye, caso, dos columnas, normas, cursos, nota, preguntas frecuentes, otros servicios y cierre.
   Reusa .kicker, .h2, .parrafo, .encabezado, .ctas, .btn, .etapas, .lista-serv y .medios del Inicio */
.sv-portada { background: linear-gradient(180deg, var(--carbon) 0%, var(--carbon-2) 100%); color: var(--crema); padding: clamp(20px, 3vw, 36px) 0 clamp(56px, 7vw, 96px); --foco: #F1EEE9; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 .5em; font-size: var(--texto-15); color: var(--gris-tenue); }
.migas li + li::before { content: "›"; margin-right: .5em; }
.migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-claro); text-decoration: underline; text-underline-offset: 3px; }
.migas a:hover { color: #fff; }
.migas [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.sv-portada-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(12px, 2vw, 24px); }
.sv-portada .kicker, .sv-cierre .kicker { color: #6CC983; }
.sv-titulo { font-family: "Anton"; font-weight: 400; text-transform: uppercase; font-size: clamp(42px, 5.2vw, 80px); line-height: 1.14; letter-spacing: .5px; color: var(--crema); margin-top: 14px; }
.sv-titulo em { font-style: normal; color: var(--acento); }
.sv-bajada { margin-top: 20px; max-width: 640px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--texto-claro); }
.sv-portada .ctas { margin-top: 28px; }
.sv-urgencia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 22px; font-size: 17px; font-weight: 600; color: var(--crema); }
.sv-urgencia a { display: inline-flex; align-items: center; min-height: 44px; color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }
.sv-urgencia a:hover { color: #fff; }
.sv-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.sv-foto figcaption { margin-top: 10px; font-size: var(--texto-14); color: var(--gris-tenue); }
/* Hueco mientras llega la imagen diseñada: panel con el ícono del servicio, sin texto para el visitante */
.sv-foto.hueco { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--carbon-3); border: 1px solid var(--linea-clara); display: flex; align-items: center; justify-content: center; color: var(--acento); }
.sv-foto.hueco svg { width: 34%; height: auto; }

/* Bloques del cuerpo: blanco por defecto, .crema o .gris para alternar */
.sv-bloque { background: var(--blanco); padding: clamp(64px, 8vw, 110px) 0; }
.sv-bloque.crema { background: var(--crema); }
.sv-bloque.gris { background: var(--gris-claro); }
.sv-bloque .etapas .n { box-shadow: 0 0 0 8px var(--fondo-bloque, var(--blanco)); }
.sv-bloque.crema .etapas .n { --fondo-bloque: var(--crema); }
.sv-bloque.gris .etapas .n { --fondo-bloque: var(--gris-claro); }
.sv-sub { margin: clamp(40px, 5vw, 64px) 0 20px; font-family: "Bebas Neue"; font-weight: 400; font-size: clamp(30px, 2.6vw, 38px); letter-spacing: .6px; line-height: 1.05; color: var(--carbon); }
.encabezado + .sv-sub { margin-top: 0; }
.sv-nota { margin-top: 18px; font-size: var(--texto-15); line-height: 1.5; color: var(--gris); max-width: 820px; }
/* Nota en recuadro: quién firma, qué depende de la autoridad */
.sv-caja { margin-top: 28px; padding: 20px 24px; border-left: 4px solid var(--acento-osc); background: var(--acento-suave); border-radius: 0 10px 10px 0; max-width: 860px; }
.sv-caja b { display: block; font-size: 17px; color: var(--carbon); }
.sv-caja p { margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--carbon); }

/* Lo que incluye: tarjetas con número, título, texto, viñetas y la autoridad ante la que se tramita */
.sv-lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sv-item { background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--acento); border-radius: 10px; padding: 24px 24px 26px; }
.sv-bloque:not(.crema):not(.gris) .sv-item { background: var(--crema); border-color: transparent; border-top-color: var(--acento); }
.sv-item.ancho { grid-column: span 2; }
.sv-item .n { font-family: "Anton"; font-size: 18px; letter-spacing: .5px; color: var(--acento-osc); }
.sv-item h3 { margin-top: 8px; font-family: "Bebas Neue"; font-weight: 400; font-size: 28px; letter-spacing: .6px; line-height: 1.05; color: var(--carbon); }
.sv-item p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--gris); }
.sv-item ul { list-style: none; margin-top: 12px; display: grid; gap: 6px; }
.sv-item li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.45; color: var(--gris); }
.sv-item li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--acento-osc); }
.sv-item .autoridad { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: var(--texto-15); line-height: 1.45; }
.sv-item .autoridad b { color: var(--carbon); }
.sv-familia-cta { margin-top: 26px; }

/* Caso de ejemplo en recuadro oscuro */
.sv-caso { background: var(--carbon); color: var(--crema); border-radius: 12px; border-left: 6px solid var(--acento); padding: clamp(26px, 3.4vw, 44px); --foco: #F1EEE9; }
.sv-caso .kicker { color: #6CC983; }
.sv-caso h3 { margin-top: 10px; font-family: "Bebas Neue"; font-weight: 400; font-size: clamp(30px, 2.6vw, 38px); letter-spacing: .6px; line-height: 1.05; }
.sv-caso p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--texto-claro); max-width: 860px; }
.sv-caso b { color: var(--crema); }

/* Dos columnas: texto y lista */
.sv-dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

/* Normas y ordenamientos de referencia */
.sv-normas { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; border-top: 1px solid var(--linea); }
.sv-normas li { display: grid; grid-template-columns: 190px 1fr; gap: 4px 18px; padding: 15px 0; border-bottom: 1px solid var(--linea); font-size: 16px; line-height: 1.45; color: var(--gris); }
.sv-normas b { color: var(--carbon); font-weight: 700; }

/* Cursos: nombre, norma de referencia y etiqueta de constancia */
.sv-cursos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; border-top: 1px solid var(--linea); }
.sv-cursos li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 15px 0; border-bottom: 1px solid var(--linea); }
.sv-cursos h4 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--carbon); margin: 0; }
.sv-cursos span:not(.etiqueta) { flex-basis: 100%; font-size: var(--texto-14); line-height: 1.4; color: var(--gris); }
.etiqueta { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; background: var(--acento-osc); color: #fff; white-space: nowrap; }
.etiqueta.clara { background: var(--acento-suave); color: var(--acento-osc); }

/* Preguntas frecuentes: <details class="pregunta"><summary>…</summary><p>…</p></details>, que el motor pasa a FAQPage */
.preguntas { max-width: 920px; border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 20px 0; font-size: clamp(18px, 1.4vw, 20px); font-weight: 700; line-height: 1.35; color: var(--carbon); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; flex-shrink: 0; font-family: "Anton"; font-size: 26px; line-height: 1; color: var(--acento-osc); transition: transform .2s; }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta p { padding: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--gris); max-width: 800px; }
.pregunta p + p { margin-top: -8px; }
.pregunta p a { color: var(--acento-osc); font-weight: 600; text-decoration: underline; display: inline-block; padding-block: 12px; margin-block: -12px; }

/* Otros servicios: la lista de Inicio a tres columnas */
.sv-relacionados .lista-serv { grid-template-columns: repeat(3, 1fr); }

/* Cierre: título, texto y botones; a la derecha, opcional, los teléfonos con .medios */
.sv-cierre { background: var(--carbon); color: var(--crema); padding: clamp(64px, 8vw, 110px) 0; --foco: #F1EEE9; }
.sv-cierre-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sv-cierre .ctas { margin-top: 28px; }
.sv-cierre .medios { grid-template-columns: 1fr; margin: 0; }

@media (max-width: 1180px) {
  .sv-lista { grid-template-columns: 1fr 1fr; }
  .sv-relacionados .lista-serv { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1120px) {
  .sv-portada-in, .sv-dos, .sv-cierre-in { grid-template-columns: 1fr; }
  .sv-foto { max-width: 560px; }
}
@media (max-width: 640px) {
  .sv-lista, .sv-normas, .sv-cursos, .sv-relacionados .lista-serv { grid-template-columns: 1fr; }
  .sv-lista { gap: 12px; }
  .sv-item { padding: 22px 18px 20px; }
  .sv-item.ancho { grid-column: auto; }
  .sv-normas li { grid-template-columns: 1fr; }
  .sv-item h3 { font-size: 26px; }
  .sv-portada .ctas .btn, .sv-cierre .ctas .btn { flex: 1 1 100%; }
}

/* Páginas de servicio en preparación (decisión D10, solo en modo prueba) */
.preparacion { background: var(--crema); min-height: 60vh; }
.preparacion-in { max-width: calc(860px + 2 * var(--gutter)); padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.preparacion .h2 { font-size: clamp(38px, 5vw, 64px); }
.preparacion-aviso { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 16px; border-radius: 30px; background: var(--acento-suave); color: var(--acento-osc); font-size: 17px; font-weight: 700; }
.preparacion .ctas { margin-top: 28px; }
.btn.borde-oscuro { background: transparent; color: var(--carbon); border: 2px solid var(--carbon); padding: 13px 22px; }
.btn.borde-oscuro:hover { background: rgba(43,49,55,.06); }
.preparacion-liga { margin-top: 24px; font-size: 17px; }
.preparacion-liga a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--acento-osc); text-decoration: underline; }
@media (max-width: 640px) { .preparacion .ctas .btn { flex: 1 1 100%; } }

/* Aviso de privacidad y página 404, que arma el motor */
.legal, .error { width: 100%; max-width: calc(860px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); background: var(--crema); }
main:has(.legal), main:has(.error) { background: var(--crema); }
.legal h1, .error h1 { font-family: "Anton"; font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; color: var(--carbon); }
.legal h2 { margin-top: 40px; font-family: "Bebas Neue"; font-weight: 400; font-size: 32px; letter-spacing: .6px; line-height: 1.05; color: var(--carbon); }
.legal h3 { margin-top: 20px; font-size: 18px; font-weight: 700; color: var(--carbon); }
.legal p, .legal li, .error p, .error li { font-size: 17px; line-height: 1.6; color: var(--gris); }
.legal p, .error p { margin-top: 14px; }
.legal ul, .error ul { margin-top: 12px; padding-left: 22px; display: grid; gap: 6px; }
.legal .legal__intro { font-size: 19px; color: var(--carbon); }
.legal__fecha { font-weight: 600; }
.legal a, .error a { color: var(--acento-osc); text-decoration: underline; display: inline-block; padding-block: 11px; margin-block: -11px; }
.legal table { margin-top: 14px; font-size: 16px; }
.legal th, .legal td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); color: var(--gris); }
.legal th { color: var(--carbon); font-weight: 700; }

/* Notas de revisión: solo existen en modo prueba (js/revision.js las arma) */
html.notas [data-nota]:not(.nota-foto) { outline: 2px dashed #F2C230; outline-offset: 3px; position: relative; }
.nota-foto { position: absolute; top: 0; right: 0; width: 1px; height: 1px; }
.nota-foto .chapa { top: 8px; right: 8px; }
.chapa { position: absolute; z-index: 20; top: -12px; right: -10px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #F2C230; color: #2B3137; font: 700 13px/24px "Barlow", sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); pointer-events: none; }
.panel-notas { position: fixed; z-index: 950; left: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: #FFF8DC; color: var(--carbon); border: 2px solid #F2C230; border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.3); font-size: 15px; }
.panel-notas[hidden] { display: none; }
.panel-notas b { display: block; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; }
.panel-notas ol { padding-left: 22px; display: grid; gap: 6px; line-height: 1.35; }
.panel-notas > span { display: block; margin-top: 10px; font-size: 12px; color: var(--gris); }

/* Portada animada (decisión D4): la foto arranca completa en su primer cuadro y se acerca despacio; el texto y las
   tarjetas entran desde 35 % de opacidad, en menos de 0.8 s (regla 21). Con «Reducir movimiento», base.css lo apaga */
.foto-zona img { animation: acerca 22s ease-out both; }
/* Amanecer: un barrido de luz que cruza los arcos al llegar y se repite cada 14 s. Es una capa decorativa sobre la
   foto, sin imagen propia: la foto pinta completa desde su primer cuadro (regla 60) y el movimiento entra después, solo
   con opacidad y posición. Va debajo del velo, que cuida el contraste del texto. El resplandor que respiraba en el cielo
   se quitó porque en su punto más alto lavaba la foto */
.foto-zona::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.foto-zona::after { top: -20%; bottom: -20%; left: 0; width: 38%; opacity: 0; transform: translateX(-120%) skewX(-14deg);
  background: linear-gradient(90deg, rgba(255,236,200,0), rgba(255,236,200,.3) 50%, rgba(255,236,200,0)); }
.foto-zona::after { animation: barrido 14s ease-in-out 1.1s infinite both; }
/* La foto baja un poco más lento que la página al desplazarse, donde el navegador lo permite */
@supports (animation-timeline: scroll()) {
  .foto-zona picture { animation: deriva linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}
.portada-texto > * { animation: entra .7s cubic-bezier(.2,.7,.2,1) both; }
.portada-texto > :nth-child(2) { animation-delay: .08s; }
.portada-texto > :nth-child(3) { animation-delay: .16s; }
.portada-texto > :nth-child(4) { animation-delay: .24s; }
.serv { animation: sube .7s cubic-bezier(.2,.7,.2,1) both; }
.serv:nth-child(2) { animation-delay: .08s; }
.serv:nth-child(3) { animation-delay: .16s; }
.serv:nth-child(4) { animation-delay: .24s; }
/* #estatico en modo prueba */
html.estatico .foto-zona img, html.estatico .foto-zona::after, html.estatico .foto-zona picture, html.estatico .portada-texto > *, html.estatico .serv, html.estatico .punto { animation: none; }
@keyframes entra { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sube { from { opacity: .35; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes acerca { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes barrido { 0% { opacity: 0; transform: translateX(-120%) skewX(-14deg); } 4% { opacity: 1; } 24% { opacity: 1; } 28%, 100% { opacity: 0; transform: translateX(330%) skewX(-14deg); } }
@keyframes deriva { to { transform: translateY(12%); } }
@keyframes late { 0% { box-shadow: 0 0 0 0 var(--acento); } 70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }

/* Pantallas medianas */
@media (max-width: 1180px) {
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .menu { font-size: 16px; }
  .etapas { grid-template-columns: repeat(2, 1fr); }
  .etapas li:nth-child(4n)::before { right: 0; }
  .etapas li:nth-child(2n)::before { right: 26px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cursos-in, .tray-in, .contacto-in { grid-template-columns: 1fr; }
  .ancla-forma { top: 0; }
  .tray-foto { max-width: 560px; }
  .pie-in { grid-template-columns: 1fr 1fr; }
}
/* Menú con hamburguesa por debajo de 1120 px */
@media (max-width: 1120px) {
  .hamburguesa { display: flex; }
  .solo-escritorio { display: none; }
  .menu { position: absolute; top: var(--alto-barra); left: 0; right: 0; max-height: calc(100vh - var(--alto-barra)); overflow-y: auto; flex-direction: column; align-items: stretch; background: var(--carbon); padding: 8px var(--gutter) 22px; border-bottom: 1px solid rgba(255,255,255,.1); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
  .nav.abierto .menu { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .menu-liga, .menu-boton { width: 100%; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 18px; }
  .menu-boton { justify-content: space-between; }
  .submenu { position: static; width: auto; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; padding: 4px 0 10px 14px; background: none; border: 0; box-shadow: none; }
  .submenu a { padding: 10px 0; white-space: normal; }
  .menu .solo-movil { display: inline-flex; margin-top: 18px; }
  .modos { grid-template-columns: 1fr; }
  .lista-serv { grid-template-columns: 1fr 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
}
/* Teléfono */
@media (max-width: 640px) {
  :root { --alto-barra: 72px; --alto-flotante: 76px; }
  .logo { gap: 10px; }
  .logo img { width: 42px; }
  .marca b { font-size: 26px; }
  .marca span { font-size: 12px; max-width: 190px; display: block; }
  .foto-zona { height: 600px; }
  .foto-zona::after { width: 60%; }
  .foto-zona img { object-position: center 34%; }
  .velo { background: linear-gradient(180deg, rgba(36,41,46,.9) 0%, rgba(36,41,46,.72) 55%, rgba(36,41,46,.35) 100%); }
  .portada-texto { padding-top: 44px; min-height: 0; padding-bottom: 48px; }
  .kicker { font-size: 12px; letter-spacing: 1.8px; }
  .ctas .btn { flex: 1 1 100%; }
  .servicios { grid-template-columns: 1fr 1fr; gap: 12px; }
  .serv .ft { height: 112px; }
  .serv .cuerpo { padding: 12px 12px 14px; }
  .serv h2 { font-size: 22px; }
  .serv p { font-size: 16px; }
  .serv .liga { font-size: 15px; }
  .pie-portada { font-size: 15px; }
  .pie-portada .btn { width: 100%; }
  .cifras b { font-size: 40px; }
  .etapas { grid-template-columns: 1fr; }
  .etapas li { padding: 0 0 28px 76px; min-height: 84px; }
  .etapas li::before, .etapas li:nth-child(2n)::before, .etapas li:nth-child(4n)::before { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .etapas li:last-child::before { bottom: auto; height: 56px; }
  .etapas .n { position: absolute; left: 0; top: 0; }
  .etapas h3 { margin-top: 12px; }
  .lista-serv { grid-template-columns: 1fr; }
  .ls-ancha { grid-column: auto; }
  .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .g-alta { grid-row: span 1; }
  .foto-pie { font-size: 16px; line-height: 1.2; padding: 24px 10px 8px; }
  .medios { grid-template-columns: 1fr; }
  .forma-caja { padding: 24px 20px; }
  .forma-par { grid-template-columns: 1fr; }
  .pie-in { grid-template-columns: 1fr; }
  .pie-hueco { display: none; }
  .flotante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .flotante { width: 56px; height: 56px; padding: 0; justify-content: center; }
}
/* Portada en celular vertical: la foto va en una franja limpia arriba, sin velo, y el texto sigue sobre carbón. Detrás
   del texto la foto se perdía bajo el velo que cuida el contraste. La zona de la foto crece con el texto (rejilla de una
   columna) y las tarjetas montan 90 px sobre su borde inferior, como antes. La franja mide la tercera parte de la
   pantalla, entre 180 y 250 px, para que en celulares chicos los botones sigan cerca de la primera pantalla.
   Escritorio y celular acostado no cambian */
@media (max-width: 640px) and (orientation: portrait) {
  .portada { --franja: clamp(180px, 33svh, 250px); display: grid; grid-template-columns: 100%; }
  .foto-zona { position: relative; grid-row: 1; grid-column: 1; height: auto; margin-bottom: -90px; }
  .portada-texto { grid-row: 1; grid-column: 1; padding-top: calc(var(--franja) + 12px); }
  .portada > .contenedor:not(.portada-texto) { grid-row: 2; grid-column: 1; }
  .foto-zona picture { position: absolute; left: 0; right: 0; top: 0; height: var(--franja); }
  .foto-zona img { object-position: center 82%; }
  .velo { background: linear-gradient(180deg, rgba(43,49,55,0) 0, rgba(43,49,55,0) calc(var(--franja) - 50px), var(--carbon) var(--franja)); }
}
/* Celular acostado y pantallas bajas */
@media (orientation: landscape) and (max-height: 500px) {
  .foto-zona { height: 520px; }
  .portada-texto { padding-top: 32px; min-height: 0; padding-bottom: 28px; }
}