/* liderarte360atx.com · hoja del sitio público. PALETA DE ALEMYR (WhatsApp 2026-10-17, «así me gustó esta combinación»,
   y 13:06 «me gustaría que si lo puedes poner así»): azul #153651 · naranja #FF651F · turquesa #35A9B7 · verde lima #A5CE36 ·
   amarillo #F3BF4B, fondos blanco y crema #FFF9F2. Los intensos NO se usan como color de texto: con texto encima van sus
   versiones oscuras (naranja #A84A12 / #CF4A0E, turquesa #0E6672) — tests/contraste.py mide cada par. */
:root {
  --azul: #153651;
  --azul-hondo: #0E2639;
  --naranja: #FF651F;
  --naranja-texto: #A84A12;
  --amarillo: #F3BF4B;
  --verde: #35A9B7;
  --verde-texto: #0E6672;
  --tinta: #23303F;
  --tinta-suave: #4A5868;
  --papel: #FFFFFF;
  --papel-suave: #FFF9F2;
  --papel-azul: #E6F4F6;
  --borde: #D6DCE4;
  --error: #A3261C;
  --bien: #1E6B3A;
  --radio: 14px;
  --sombra: 0 6px 20px rgba(31, 58, 95, .10);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", var(--fuente);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 1.0625rem; line-height: 1.6; color: var(--tinta); background: var(--papel); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--naranja-texto); }
:focus-visible { outline: 3px solid var(--naranja-texto); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--fuente-titulo); color: var(--azul); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--azul); color: #fff; padding: .6em 1em; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; color: #fff; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.centrado { text-align: center; }
.angosto { max-width: 520px; }
.cintilla { background: var(--amarillo); color: var(--azul-hondo); text-align: center; font-size: .9rem; font-weight: 600; padding: .35em 1em; }

/* cabecera y menú */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--borde); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--fuente-titulo); font-size: 1.35rem; font-weight: 700; color: var(--azul); }
.marca img { width: 56px; height: 56px; border-radius: 50%; }
.marca b { color: var(--naranja-texto); }
.menu { display: flex; align-items: center; gap: .2rem .85rem; flex-wrap: wrap; justify-content: flex-end; }
.menu a { text-decoration: none; font-weight: 600; padding: .4em .1em; color: var(--tinta); font-size: .97rem; white-space: nowrap; }
.menu a[aria-current="page"] { color: var(--naranja-texto); border-bottom: 3px solid var(--naranja); }
.menu a.boton { color: #fff; padding: .55em 1.1em; border-bottom: 0; }
.menu-boton { display: none; background: none; border: 2px solid var(--azul); border-radius: 10px; width: 48px; height: 44px; padding: 9px 10px; cursor: pointer; }
.menu-boton span { display: block; height: 3px; background: var(--azul); border-radius: 2px; margin: 4px 0; }
@media (max-width: 1120px) {
  .menu-boton { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: .5rem 1rem 1rem; border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); }
  .menu.abierto { display: flex; }
  .menu a { padding: .75em .5em; border-bottom: 1px solid var(--borde); }
  .menu a.boton { text-align: center; margin-top: .6rem; }
}

/* botones */
.boton { display: inline-block; background: var(--azul); color: #fff; border: 2px solid var(--azul); border-radius: 999px; padding: .75em 1.4em; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; min-height: 44px; }
.boton:hover { background: var(--azul-hondo); border-color: var(--azul-hondo); color: #fff; }
.boton-claro { background: #fff; color: var(--azul); }
.boton-claro:hover { background: var(--papel-azul); color: var(--azul-hondo); }
.boton-chico { padding: .5em 1em; min-height: 40px; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; align-items: center; }
.acciones-centro { justify-content: center; }

/* secciones */
.heroe { background: linear-gradient(160deg, var(--papel-suave), #fff 55%, var(--papel-azul)); padding: clamp(2.5rem, 7vw, 5rem) 0; }
.heroe-rejilla { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.heroe-imagen img { margin-inline: auto; width: min(360px, 80%); border-radius: 50%; }
.heroe-imagen .heroe-foto { width: 100%; border-radius: 28px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--sombra); border: 6px solid #fff; }
.antetitulo { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem; color: var(--verde-texto); margin-bottom: .5em; }
.antetitulo a { color: inherit; }
.entrada { font-size: 1.2rem; color: var(--tinta-suave); }
.resalte { color: var(--naranja-texto); }
.seccion { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.seccion-suave { background: var(--papel-suave); }
.seccion-cierre { background: var(--azul); }
.seccion-cierre h2, .seccion-cierre .entrada { color: #fff; }
.seccion-cierre .boton { background: var(--amarillo); border-color: var(--amarillo); color: var(--azul-hondo); }
.seccion-cierre .boton-claro { background: transparent; border-color: #fff; color: #fff; }
.titular { padding: 2.5rem 0 1rem; }
@media (max-width: 760px) { .heroe-rejilla { grid-template-columns: 1fr; } .heroe-imagen { order: -1; } .heroe-imagen img { width: 180px; } .heroe-imagen .heroe-foto { width: 100%; }
  .destacado-caja { grid-template-columns: 1fr; } }

/* BARS */
.bars { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bars li { background: #fff; border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra); border-top: 6px solid var(--naranja); }
.bars .bars-a { border-top-color: var(--amarillo); }
.bars .bars-r { border-top-color: var(--verde); }
.bars .bars-s { border-top-color: var(--azul); }
.letra { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--azul); color: #fff; font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 800; margin-bottom: .6rem; }
@media (max-width: 900px) { .bars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bars { grid-template-columns: 1fr; } }

/* tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra); }
.tarjeta h2, .tarjeta h3 { font-size: 1.25rem; }
.tarjeta h2 a, .tarjeta h3 a { text-decoration: none; }
.tarjeta-elegida { border: 2px solid var(--naranja); }
.tarjeta-imagen { border-radius: 10px; margin-bottom: .8rem; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.letras { font-weight: 800; letter-spacing: .1em; color: var(--naranja-texto); margin-bottom: .3em; }
.para { font-size: .95rem; color: var(--tinta-suave); }
.vacio { background: var(--papel-azul); border-radius: var(--radio); padding: 1.2rem; color: var(--tinta-suave); }

/* libro */
.libro { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: center; }
.libro img { border-radius: 8px; box-shadow: var(--sombra); }
.libro-chico { grid-template-columns: 180px 1fr; gap: 1.5rem; background: var(--papel-suave); padding: 1.5rem; border-radius: var(--radio); margin: 2rem 0; }
@media (max-width: 700px) { .libro, .libro-chico { grid-template-columns: 1fr; } .libro img { width: 220px; margin-inline: auto; } }

/* eventos */
.destacado { padding: 2rem 0; background: var(--amarillo); }
.destacado-caja { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
.destacado h2, .destacado .antetitulo { color: var(--azul-hondo); }
.fecha-ficha { width: 84px; height: 84px; border-radius: 16px; background: var(--azul); color: #fff; display: grid; place-content: center; text-align: center; font-weight: 700; text-transform: uppercase; font-size: .85rem; line-height: 1.1; }
.fecha-ficha span { display: block; font-size: 2rem; font-family: var(--fuente-titulo); }
.lista-eventos { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.evento-fila { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; }
.evento-fila h3 { margin-bottom: .25em; }
.meta { color: var(--tinta-suave); font-size: .95rem; }
.lista-pasados .fecha-ficha { background: var(--tinta-suave); }
.mes-titulo { text-transform: capitalize; margin-top: 2rem; }
.evento-cabeza { padding: 2.5rem 0 1rem; }
.evento-rejilla { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; margin-bottom: 3rem; }
.evento-ficha { background: var(--papel-suave); border-radius: var(--radio); padding: 1.5rem; position: sticky; top: 96px; }
.evento-ficha dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1.5rem; }
.evento-ficha dt { font-weight: 700; color: var(--azul); }
.evento-ficha dd { margin: 0; }
.precio-promo { font-weight: 800; color: var(--verde-texto); font-size: 1.2rem; }
@media (max-width: 860px) { .evento-rejilla { grid-template-columns: 1fr; } .evento-ficha { position: static; } }

/* texto largo */
.texto { max-width: 760px; padding: 2.5rem 0 3rem; }
.texto.envoltura { margin-inline: auto; }
.texto h2 { margin-top: 1.8em; }
blockquote { margin: 1.5rem 0; padding: 1rem 1.4rem; border-left: 5px solid var(--naranja); background: var(--papel-suave); border-radius: 0 var(--radio) var(--radio) 0; font-size: 1.15rem; }
.definiciones dt { font-weight: 800; color: var(--azul); margin-top: 1rem; }
.definiciones dd { margin: .2rem 0 0; }
.foto-principal { margin: 1.5rem 0; }
.foto-principal img { border-radius: var(--radio); }
.firma { font-family: var(--fuente-titulo); font-size: 1.2rem; color: var(--naranja-texto); }
.frase { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--verde-texto); font-weight: 700; }

/* galería */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.filtros a { text-decoration: none; padding: .45em 1em; border: 2px solid var(--azul); border-radius: 999px; font-weight: 600; }
.filtros a[aria-current="page"] { background: var(--azul); color: #fff; }
.galeria { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.galeria figure { margin: 0; }
.galeria img, .mosaico img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 12px; }
.galeria figcaption { font-size: .95rem; color: var(--tinta-suave); margin-top: .3rem; }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin: 1.5rem 0; }

/* formularios */
.formulario { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem; margin: 1.5rem 0; box-shadow: var(--sombra); }
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 700; margin-bottom: .3rem; color: var(--azul); }
.req { font-weight: 400; color: var(--tinta-suave); font-size: .9rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number], input[type=date], input[type=url], input[type=month], select, textarea {
  width: 100%; font: inherit; color: var(--tinta); background: #fff; border: 2px solid #76838F; border-radius: 10px; padding: .65em .8em; min-height: 46px; }
textarea { min-height: 120px; resize: vertical; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--error); }
.campo-check { display: flex; gap: .7rem; align-items: flex-start; }
.campo-check input { width: 24px; height: 24px; margin-top: .15rem; flex: none; accent-color: var(--azul); }
.campo-check label { font-weight: 400; color: var(--tinta); }
.error-campo { color: var(--error); font-weight: 600; margin: .3rem 0 0; }
.ayuda { color: var(--tinta-suave); font-size: .92rem; margin: .3rem 0 0; }
.trampa { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.aviso { border-radius: 10px; padding: .9rem 1.1rem; background: var(--papel-azul); border-left: 5px solid var(--azul); }
.aviso-bien { background: #EAF6EE; border-left-color: var(--bien); }
.aviso-mal { background: #FBEBE9; border-left-color: var(--error); color: #6E1A13; }
details summary { cursor: pointer; }

/* tarjeta digital */
.tarjeta-digital { max-width: 460px; margin: 2.5rem auto 3rem; text-align: center; background: #fff; border-radius: 24px; box-shadow: var(--sombra); padding: 2rem 1.5rem; border-top: 8px solid var(--naranja); }
.tarjeta-digital img { margin: 0 auto 1rem; width: 180px; }
.cargo { color: var(--tinta-suave); }
.botonera { list-style: none; padding: 0; display: grid; gap: .6rem; margin: 1.5rem 0 0; }
.botonera .boton { display: block; }

/* comunidad */
.area-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.publicaciones { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1rem 0 2rem; }
.publicacion { background: #fff; border: 1px solid var(--borde); border-left: 6px solid var(--naranja); border-radius: var(--radio); padding: 1.3rem; }
.publicacion-sesion { border-left-color: var(--azul); }
.publicacion-actividad { border-left-color: var(--verde); }
.publicacion-aviso { border-left-color: var(--amarillo); }
.etiqueta { font-weight: 700; color: var(--verde-texto); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }

/* pie */
.pie { background: var(--azul-hondo); color: #E6ECF3; padding: 3rem 0 1rem; margin-top: 2rem; }
.pie a { color: #fff; }
.pie a:hover { color: var(--amarillo); }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.pie-titulo { color: #fff; font-size: 1.1rem; }
.pie-firma { background: #fff; border-radius: 12px; padding: 6px; width: 140px; margin-bottom: 1rem; }
.pie .frase { color: var(--amarillo); }
.pie-legal { border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 2rem; padding-top: 1rem; font-size: .9rem; }
.lista-limpia { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
@media (max-width: 760px) { .pie-rejilla { grid-template-columns: 1fr; } }

.legal h2 { font-size: 1.3rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .cabecera, .pie, .cintilla, .acciones { display: none; } }

/* ===== Revisión visual 2026-10-14 (panel de expertos: memoria/revision_visual_2026-10-14.md) ===== */

/* 2 · Nunito auto-hospedada (OFL 1.1, estatico/fuentes/OFL.txt): la misma letra redondeada en todo dispositivo. */
@font-face { font-family: "Nunito"; src: url(/estatico/fuentes/nunito-latin.woff2) format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url(/estatico/fuentes/nunito-latin-ext.woff2) format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --fuente-titulo: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; --crema: #FDEBD8; --suave2: #FDF0E1; }
h1, h2, h3, .marca, .letra, .cifra, .fecha-ficha span { font-weight: 800; }
.boton { font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: .01em; }

/* 12 · banda BARS bajo la cabecera · 13 · marca legible con sello de cuatro colores */
.cabecera::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, #FF651F 0 25%, #F3BF4B 25% 50%, #35A9B7 50% 75%, #153651 75% 100%); }
.marca { font-size: 1.45rem; }
.sello { width: 18px; height: 18px; border-radius: 50%; flex: none; background: conic-gradient(#FF651F 0 25%, #F3BF4B 0 50%, #35A9B7 0 75%, #153651 0); }
.pie-logos { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.pie-logos .pie-firma { width: 120px; }

/* 14 · menú más ligero; el botón «Contacto» queda como único sólido */
.menu a { font-size: .95rem; color: var(--tinta-suave); letter-spacing: .01em; }
.menu a:hover { color: var(--azul); }
.menu a[aria-current="page"] { color: var(--naranja-texto); }
.menu { gap: .2rem 1rem; }

/* 4 · héroe con más escala y calidez · 3 · retrato 4:5 */
.heroe { background: linear-gradient(160deg, var(--crema) 0%, var(--papel-suave) 45%, #fff 100%); }
.heroe h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.05; letter-spacing: -.01em; }
.heroe-imagen { margin: 0; position: relative; }
.heroe-imagen .heroe-foto { aspect-ratio: 4 / 5; max-width: 440px; object-position: 50% 30%; border-radius: 28px; margin-inline: auto; }
.heroe-imagen::before { content: ""; position: absolute; width: min(440px, 100%); aspect-ratio: 4 / 5; left: 50%; top: 0; transform: translate(-50%, 0) translate(16px, 16px);
  border: 3px solid var(--amarillo); border-radius: 28px; z-index: 0; }
.heroe-imagen img, .heroe-imagen video { position: relative; z-index: 1; }
/* Video del héroe (memoria/panel_video_heroe_2026-10-17.md): el mismo cuadro que la foto; botón de pausa (WCAG 2.2.2). */
.heroe-imagen video.heroe-foto { display: block; width: 100%; height: auto; object-fit: cover; background: var(--papel-azul); } /* height: el atributo height="900" le ganaba al 4:5 */
.heroe-pausa { position: absolute; z-index: 2; right: 1.4rem; bottom: 1.4rem; min-height: 44px; padding: .45rem 1rem; border-radius: 999px;
  border: 2px solid #FFFFFF; background: #0D0D0D; color: #FFFFFF; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.heroe-pausa:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* 10 · credenciales */
.credenciales { background: #fff; border-block: 1px solid var(--borde); }
.credenciales ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-block: 0; padding: 1.2rem 0; }
.credenciales li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .3rem 1rem; }
.credenciales li + li { border-left: 1px solid var(--borde); }
.credenciales strong { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.6rem; color: var(--azul); line-height: 1.1; }
.credenciales span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
@media (max-width: 700px) { .credenciales ul { grid-template-columns: 1fr 1fr; row-gap: 1rem; } .credenciales li:nth-child(3) { border-left: 0; } }

/* 11 · filete de marca en el antetítulo */
.antetitulo { display: flex; align-items: center; gap: .6rem; letter-spacing: .12em; }
.antetitulo::before { content: ""; width: 28px; height: 2px; background: var(--naranja); flex: none; }
.antetitulo-centro { justify-content: center; }

/* 1 · sello BARS de cuatro colores (blanco sobre naranja no pasa: tinta oscura) */
.bars .bars-b .letra { background: #FF651F; color: #0E2639; }
.bars .bars-a .letra { background: #F3BF4B; color: #0E2639; }
.bars .bars-r .letra { background: #35A9B7; color: #0E2639; }
.bars .bars-s .letra { background: #153651; color: #fff; }
.bars li { background: #fff; }

/* 6 · cinco servicios sin huérfana: 3 arriba, 2 centradas */
.tarjetas-cinco { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.tarjetas-cinco > .tarjeta { flex: 1 1 300px; max-width: 352px; }

/* 5 · evento destacado menos dominante; fecha como píldora en teléfono */
.destacado { background: #FEF6E0; border-block: 4px solid var(--amarillo); }
@media (max-width: 600px) {
  .destacado-caja { grid-template-columns: 1fr; gap: .8rem; }
  .destacado .fecha-ficha { width: auto; height: auto; display: inline-flex; gap: .4rem; align-items: baseline; justify-self: start; padding: .4rem .9rem; border-radius: 999px; font-size: .9rem; }
  .destacado .fecha-ficha span { font-size: 1.2rem; display: inline; }
}

/* 8 · foto de «Quién soy» con tope */
.foto-retrato img { aspect-ratio: 4 / 5; max-height: 560px; width: auto; object-fit: cover; object-position: 60% 35%; margin-inline: auto; }

/* 9 · BARS compactas en teléfono */
@media (max-width: 520px) {
  .bars { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .bars li { padding: 1rem; }
  .letra { width: 44px; height: 44px; font-size: 1.35rem; }
  .bars h3 { font-size: 1.05rem; }
}
@media (max-width: 340px) { .bars { grid-template-columns: 1fr; } }

/* 15 · el cartel del evento alineado con la ficha */
.evento-rejilla .texto { padding-top: 0; }
.evento-rejilla .foto-principal:first-child { margin-top: 0; }

/* 16 · mosaico del inicio con una foto protagonista */
.mosaico-inicio { grid-template-columns: repeat(4, 1fr); }
.mosaico-inicio img { border-radius: 16px; height: 100%; }
.mosaico-inicio > :first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 600px) { .mosaico-inicio { grid-template-columns: repeat(2, 1fr); } .mosaico-inicio > :first-child { grid-column: span 2; grid-row: span 1; } }

/* 18 · ritmo de fondos */
.seccion-suave { background: var(--suave2); }

/* 19 · botones a lo ancho en teléfono, flecha de avance en los secundarios del héroe y el cierre */
.heroe .boton-claro::after, .seccion-cierre .boton-claro::after { content: " →"; }
@media (max-width: 480px) { .heroe .acciones .boton, .seccion-cierre .boton { width: 100%; text-align: center; } }

/* 20 · marco desfasado en el libro */
.libro img { outline: 3px solid var(--amarillo); outline-offset: 10px; }
/* ajustes tras la captura en 390 px: el marco desfasado no debe crear desplazamiento horizontal */
.heroe { overflow: hidden; }
@media (max-width: 760px) {
  .heroe-imagen .heroe-foto { width: calc(100% - 12px); margin-inline: 0; }
  .heroe-imagen::before { left: 0; width: calc(100% - 12px); transform: translate(10px, 10px); }
  .antetitulo-centro { text-align: center; }
  .antetitulo-centro::before { display: none; }
}
/* El logo original de Alemyr vuelve a la cabecera (Isaac 2026-10-14 08:32), recortado sin márgenes para que se lea. */
.marca-logo img { width: auto; height: 72px; border-radius: 0; }
@media (max-width: 600px) { .marca-logo img { height: 52px; } }

/* Héroe P3 «La promesa» (Isaac 2026-10-14): línea de confianza, y en el teléfono la foto en banda 16:9 con el filete
   BARS para que titular y botón entren en la primera pantalla (panel_hook_bars, medido: botón en 617–667 px a 390). */
.confianza { font-size: .92rem; color: var(--tinta-suave); margin: -.5rem 0 0; }
@media (max-width: 760px) {
  .heroe-p3 { padding-top: 1.25rem; }
  .heroe-p3 .heroe-rejilla { gap: 1rem; }
  .heroe-p3 .heroe-imagen::before { display: none; }
  .heroe-p3 .heroe-imagen .heroe-foto { width: 100%; aspect-ratio: 16 / 9; object-position: 50% 38%; border: 0; border-radius: 22px 22px 0 0; box-shadow: none; }
  .heroe-p3 .heroe-imagen video.heroe-foto { object-position: 50% 12%; }
  .heroe-pausa { right: .6rem; bottom: 1.1rem; }
  .heroe-p3 .heroe-imagen::after { content: ""; display: block; height: 8px; border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #FF651F 0 25%, #F3BF4B 25% 50%, #35A9B7 50% 75%, #153651 75% 100%); }
  .heroe-p3 .heroe-imagen { overflow: hidden; }
}

/* ===== FUNNEL: la página de registro de un evento (005 · 007). Forma y colores de la MAQUETA DE ALEMYR, según el panel
   visual (memoria/panel_funnel_visual_2026-10-14.md §2). Colores muestreados de su PDF; los que no pasaban contraste se
   ajustaron (tabla §5).
   PALETA DE ALEMYR (WhatsApp 2026-10-17 12:09, «así me gustó esta combinación»): azul #153651 · naranja #FF651F ·
   turquesa #35A9B7 · verde lima #A5CE36 · amarillo #F3BF4B, fondos blanco y crema #FFF9F2; los intensos sólo en títulos,
   íconos y botones, y cada sección con su fondo suave. Sus intensos no aguantan texto blanco (naranja 2.94, turquesa 2.80):
   con blanco encima van #CF4A0E (4.53) y #1D7C88 (4.89); el lima y el amarillo llevan texto azul (6.84 y 7.37). ===== */
.fn { --fn-marino: #153651; --fn-crema: #FFF9F2; --fn-celeste: #E6F4F6; --fn-durazno: #FFEFE5; --fn-naranja: #FF651F;
  --fn-boton: #CF4A0E; --fn-boton-hover: #B23C0A; --fn-naranja-texto: #A84A12; --fn-naranja-claro: #FFC48F; --fn-verde: #4B6A10;
  --fn-turquesa: #35A9B7; --fn-turquesa-fuerte: #1D7C88; --fn-turquesa-texto: #0E6672; --fn-lima: #A5CE36; --fn-lima-suave: #F1F7E1;
  --fn-amarillo: #F3BF4B; --fn-amarillo-tenue: #FEF6E0;
  --fn-tinta: #3F4A56; --fn-tinta-suave: #5B6673; --fn-sombra: 0 4px 16px rgba(21, 54, 81, .08);
  background: var(--fn-crema); color: var(--fn-tinta); padding-bottom: clamp(3rem, 6vw, 5rem); overflow-x: hidden; }
/* Alemyr (audio 2026-10-15): «palabras que están cortadas». Sin guiones automáticos: una palabra sólo se parte si de verdad no cabe. */
.fn h1, .fn h2, .fn h3 { color: var(--fn-marino); hyphens: manual; overflow-wrap: break-word; }
/* Alemyr 2026-10-17: «reducir el uso de mayúsculas en textos largos»; en mayúsculas sólo quedan el titular y los rótulos chicos. */
.fn h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
.fn h3 { font-size: 1.125rem; margin-bottom: .2em; }
.fn-ancho { width: min(1080px, 100% - 2rem); margin-inline: auto; }
.fn-lectura { width: min(680px, 100% - 2rem); margin-inline: auto; }
.fn-seccion { padding-top: clamp(3rem, 6vw, 5rem); }
.fn-centro { text-align: center; }
.fn-tarjeta { background: #fff; border-radius: 16px; box-shadow: var(--fn-sombra); padding: 1.25rem; }
.fn-nota { color: var(--fn-tinta-suave); font-size: .9375rem; }
.fn-rotulo { color: var(--fn-naranja-texto); font-family: var(--fuente-titulo); font-weight: 800; font-size: .9375rem;
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .4rem; }
.fn-acento { color: var(--fn-naranja-texto); }
.fn-acento-claro { color: var(--fn-naranja-claro); }

/* botones: tres llamados de la maqueta, los tres a #registro */
.fn-boton { display: inline-block; background: var(--fn-boton); color: #fff; font-family: var(--fuente-titulo); font-weight: 800;
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .03em; min-height: 52px; padding: 1rem 1.5rem; border: 2px solid var(--fn-boton);
  border-radius: 12px; text-decoration: none; text-align: center; cursor: pointer; line-height: 1.2; transition: background-color .15s; }
.fn-boton:hover, .fn-boton:focus-visible { background: var(--fn-boton-hover); border-color: var(--fn-boton-hover); color: #fff; }
.fn-boton:focus-visible { outline: 3px solid var(--fn-marino); outline-offset: 3px; }
.fn-boton-claro { background: #fff; color: var(--fn-naranja-texto); }
.fn-boton-claro:hover { color: #fff; }
.fn-boton-ancho { width: 100%; margin-top: .5rem; }
@media (max-width: 600px) { .fn-heroe .fn-boton, .fn-remate .fn-boton { width: 100%; } }

/* banda de marca */
.fn-marca { background: #fff; border-bottom: 1px solid var(--fn-celeste); font-family: var(--fuente-titulo); font-weight: 800; font-size: .9375rem; text-transform: uppercase; letter-spacing: .06em; }
.fn-marca-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px; }
.fn-marca-izq, .fn-marca-der { display: flex; align-items: center; }
.fn-marca img { display: block; width: auto; }
.fn-marca-izq img { height: 52px; }
.fn-marca-der img { height: 64px; }
.fn-marca-evento { color: var(--fn-marino); text-align: center; }
@media (max-width: 600px) {
  .fn-marca-fila { min-height: 56px; }
  .fn-marca-evento { display: none; }
  .fn-marca-izq img { height: 40px; }
  .fn-marca-der img { height: 50px; }
  .solo-ancho { display: none; }
}

/* héroe */
.fn-heroe { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: center; padding-top: clamp(1.5rem, 5vw, 4rem); }
.fn-heroe h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.25rem); line-height: 1.1; text-transform: uppercase; margin-bottom: .4em; }
.fn-ante { color: var(--fn-naranja-texto); font-family: var(--fuente-titulo); font-weight: 800; font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; }
.fn-sub { font-size: 1.3rem; color: var(--fn-tinta); }
.fn-lema, .fn-datos { color: var(--fn-tinta-suave); font-size: 1rem; margin: .4rem 0; }
.fn-lema { font-weight: 700; letter-spacing: .02em; }
.fn-heroe-foto { margin: 0; }
.fn-heroe-foto img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 24px;
  box-shadow: 16px 16px 0 var(--fn-naranja); margin-inline: auto; }
@media (max-width: 899px) {
  .fn-heroe { grid-template-columns: 1fr; text-align: center; gap: 0; }
  .fn-heroe-foto { display: none; }
  .fn-sub { font-size: 1.0625rem; }
}

/* frase destacada y cifras */
.fn-frase { background: var(--fn-celeste); border-radius: 20px; text-align: center; font-family: var(--fuente-titulo); font-weight: 800;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem); line-height: 1.25; color: var(--fn-marino);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 4rem); margin: clamp(2rem, 5vw, 3.5rem) auto 0; max-width: 880px; }
.fn-cifras { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.fn-cifras li { background: var(--fn-celeste); border-radius: 16px; box-shadow: var(--fn-sombra); border-top: 4px solid var(--fn-turquesa); padding: 1.25rem; }
.fn-cifras li:nth-child(3n+2) { background: var(--fn-durazno); border-top-color: var(--fn-naranja); }
.fn-cifras li:nth-child(3n) { background: var(--fn-lima-suave); border-top-color: var(--fn-lima); }
.fn-cifras li:nth-child(3n+1) b { color: var(--fn-turquesa-texto); }
.fn-cifras li:nth-child(3n+2) b { color: var(--fn-naranja-texto); }
.fn-cifras li:nth-child(3n) b { color: var(--fn-verde); }
.fn-cifras b { display: block; font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); color: var(--fn-marino);
  text-transform: uppercase; line-height: 1.1; }
.fn-cifras span { font-size: 1rem; }
@media (max-width: 600px) {
  .fn-cifras { grid-template-columns: 1fr; gap: .75rem; }
  .fn-cifras li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; align-items: center; padding: .9rem 1rem; min-height: 64px; }
  .fn-cifras b { font-size: 1.5rem; white-space: nowrap; }
}

/* el espejo */
.fn-espejo { padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: 20px; background: var(--fn-celeste); }
.fn-espejo h2 { text-transform: none; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); }
.fn-palomas { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 1rem; }
.fn-palomas li { position: relative; padding-left: 2rem; font-size: 1.0625rem; }
.fn-palomas li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--fn-boton); font-weight: 900; font-size: 1.25rem; line-height: 1.3; }
.fn-cinta { background: var(--fn-durazno); color: var(--fn-naranja-texto); font-weight: 800; text-align: center; border-radius: 10px; padding: .9rem 1rem; margin: 0; }

/* antes / después */
.fn-antes-despues { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; margin-top: 1.5rem; }
.fn-antes-despues::before { content: "→"; grid-column: 2; grid-row: 1; align-self: center; color: var(--fn-boton); font-size: 2rem; font-weight: 900; }
.fn-antes { grid-column: 1; grid-row: 1; }
.fn-antes { background: var(--fn-durazno); }
.fn-despues { grid-column: 3; grid-row: 1; border-left: 4px solid var(--fn-lima); background: var(--fn-lima-suave); }
.fn-antes .fn-rotulo { color: var(--fn-naranja-texto); font-size: 1.125rem; }
.fn-despues .fn-rotulo { color: var(--fn-verde); font-size: 1.125rem; }
.fn-antes p:last-child, .fn-despues p:last-child { margin: 0; font-size: 1.0625rem; }
@media (max-width: 700px) {
  .fn-antes-despues { grid-template-columns: 1fr; gap: .5rem; }
  .fn-antes-despues::before { content: "↓"; grid-column: 1; grid-row: 2; justify-self: center; }
  .fn-antes { grid-row: 1; } .fn-despues { grid-column: 1; grid-row: 3; }
}

/* ruta en pasos */
.fn-ruta { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .9rem; position: relative; }
.fn-ruta li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: center; position: relative; }
.fn-num { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 12px; background: var(--fn-marino); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 900; font-size: 1.5rem; }
.fn-ruta li:nth-child(5n+1) .fn-num { background: var(--fn-boton); }
.fn-ruta li:nth-child(5n+2) .fn-num { background: var(--fn-turquesa-fuerte); }
.fn-ruta li:nth-child(5n+3) .fn-num { background: var(--fn-lima); color: var(--fn-marino); }
.fn-ruta li:nth-child(5n+4) .fn-num { background: var(--fn-amarillo); color: var(--fn-marino); }
.fn-ruta h3 { font-size: 1.125rem; }
.fn-ruta p { margin: 0; }
@media (max-width: 600px) {
  .fn-ruta li { grid-template-columns: 2.75rem 1fr; padding: 1rem; }
  .fn-num { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
}

/* banda de remate */
.fn-remate { background: var(--fn-durazno); border-radius: 20px; text-align: center; max-width: 880px; margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: clamp(1.75rem, 5vw, 3rem) 1.25rem; }
.fn-remate p { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem); line-height: 1.25;
  color: var(--fn-marino); margin: 0 0 1.25rem; }
.fn-remate p span { display: block; }

/* qué te llevarás */
.fn-lleva { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.fn-lleva li { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; align-items: start; }
.fn-num-texto { font-family: var(--fuente-titulo); font-weight: 900; font-size: 1.75rem; color: var(--fn-naranja-texto); line-height: 1.1; }
.fn-lleva li:nth-child(4n+2) .fn-num-texto { color: var(--fn-turquesa-texto); }
.fn-lleva li:nth-child(4n+3) .fn-num-texto { color: var(--fn-verde); }
.fn-lleva li:nth-child(4n) .fn-num-texto { color: var(--fn-marino); }
.fn-zona-lleva { background: var(--fn-amarillo-tenue); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  margin-top: clamp(3rem, 6vw, 5rem); }
.fn-lleva p { margin: 0; }
@media (max-width: 700px) { .fn-lleva { grid-template-columns: 1fr; gap: .75rem; } }

/* tu facilitadora */
.fn-facilitadora { background: var(--fn-celeste); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: 280px 1fr;
  gap: 2rem; align-items: center; }
.fn-facilitadora img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 16px; }
.fn-facilitadora h2 { text-transform: none; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); margin-bottom: .3em; }
.fn-facilitadora p { font-size: 1.125rem; }
.fn-facilitadora .fn-nota, .fn-facilitadora .fn-rotulo { font-size: .9375rem; }
@media (max-width: 700px) {
  .fn-facilitadora { grid-template-columns: 1fr; text-align: center; gap: 1rem; }
  .fn-facilitadora img { width: 112px; height: 112px; border-radius: 50%; aspect-ratio: 1; margin-inline: auto; }
}

/* fechas e inversión */
.fn-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.fn-dos h2 { font-size: 1.375rem; }
@media (max-width: 760px) { .fn-dos { grid-template-columns: 1fr; } }
.fn-fichas { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
.fn-fichas li { display: grid; grid-template-columns: 3.25rem 1fr; gap: .9rem; align-items: center; }
.fn-fichas li span:last-child b { color: var(--fn-marino); }
.fn-cal { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 10px; border: 2px solid var(--fn-celeste);
  color: var(--fn-naranja-texto); font-weight: 800; font-size: .75rem; line-height: 1; padding-top: .2rem; }
.fn-cal b { color: var(--fn-marino); font-family: var(--fuente-titulo); font-size: 1.375rem; }
.fn-horas { font-family: var(--fuente-titulo); font-weight: 800; color: var(--fn-marino); text-transform: uppercase; letter-spacing: .03em; }
.fn-precio { border-top: 6px solid var(--fn-naranja); }
.fn-precio-uno { font-family: var(--fuente-titulo); font-weight: 900; font-size: 2.5rem; color: var(--fn-marino); margin: .1rem 0; line-height: 1.1; }
.fn-precio-dos { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.5rem; color: var(--fn-marino); margin: 0 0 .6rem; }
.fn-precio-uno span, .fn-precio-dos span { font-family: var(--fuente); font-size: 1rem; font-weight: 600; color: var(--fn-tinta-suave); }

/* preguntas: abiertas, como en la maqueta */
.fn-preguntas { margin: 1.5rem 0 0; }
.fn-preguntas dt { color: var(--fn-marino); font-weight: 800; font-size: 1.125rem; padding-top: 1.25rem; border-top: 1px solid var(--fn-celeste); }
.fn-preguntas dt:first-child { border-top: 0; padding-top: 0; }
.fn-preguntas dd { margin: .3rem 0 1.25rem; }

/* cierre marino + formulario que sube sobre él */
.fn-cierre-zona { padding-top: clamp(3rem, 6vw, 5rem); }
.fn-cierre { background: var(--fn-marino); border-radius: 24px; text-align: center; padding: clamp(3rem, 6vw, 4rem) 1.25rem calc(clamp(3rem, 6vw, 4rem) + 2rem); }
.fn-cierre p { font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem); line-height: 1.25;
  color: #fff; margin: 0; }
.fn-cierre p span { display: block; }
.fn-formulario { position: relative; padding: clamp(1.25rem, 4vw, 2rem); border-radius: 20px; }
.fn-sube { margin-top: -3rem; }
@media (max-width: 600px) { .fn-sube { margin-top: -2rem; } }
.fn-formulario h2 { font-size: 1.375rem; }
.fn-formulario input[type=text], .fn-formulario input[type=email], .fn-formulario input[type=tel], .fn-formulario select {
  min-height: 52px; font-size: 1.0625rem; border-color: var(--fn-tinta-suave); }
.fn-formulario input:focus-visible, .fn-formulario select:focus-visible { outline: 3px solid var(--fn-marino); outline-offset: 1px; }
.fn-formulario label, .fn-formulario legend { color: var(--fn-marino); }
@media (prefers-reduced-motion: reduce) { .fn-boton { transition: none; } }

/* la página de «gracias» del funnel */
.funnel-pasos { padding-left: 1.4rem; display: grid; gap: .6rem; font-size: 1.08rem; }
fieldset.campo { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.campo legend { font-weight: 700; color: var(--azul); margin-bottom: .4rem; }
fieldset.campo .campo-check { margin-bottom: .4rem; }
.fn-heroe-texto { min-width: 0; }

/* ===== PAGO EN LÍNEA (008): /pagar/{token} y la tarjeta de la página de gracias ===== */
.pago { max-width: 640px; padding: 2.5rem 0 3rem; }
.pago-tarjeta, .pagar-tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: clamp(1.25rem, 4vw, 2rem); margin: 1.25rem 0; }
.pagar-tarjeta { border-top: 6px solid var(--naranja); }
.pagar-tarjeta h2 { margin-top: 0; }
.pago-evento { font-size: 1.125rem; }
.franja-prueba { background: #FCE3CF; color: #7A3410; font-weight: 700; border-radius: 10px; padding: .7rem 1rem; }

/* ===== PIE DE PÁGINA (Isaac 2026-10-17: «horrible» → «feo»). Una pieza, no una lista: franja de cierre cálida con el
   llamado, filete BARS, los dos logos en UNA tarjeta, cuatro columnas (marca · explora · contacto · síguenos) con
   íconos, redes como botones redondos y la línea legal discreta. Contraste sobre #0E2639: #C9D6E3 10.1 · #AEBFD1 7.9. ===== */
.pie { background: var(--azul-hondo); color: #C9D6E3; padding: 0; margin-top: 3rem; }
.pie a { color: #C9D6E3; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; }
.pie a:hover, .pie a:focus-visible { color: #fff; }
.pie a:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }
.pie .ti { flex: none; }
/* la franja de cierre */
.pie-cta { background: linear-gradient(100deg, #A84A12 0%, #CF4A0E 45%, #D9480F 100%); color: #fff; }
.pie-cta-fila { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.pie-cta-ante { margin: 0 0 .2rem; font-family: var(--fuente-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #FFE7D1; }
.pie-cta-titulo { margin: 0; font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.15; color: #fff; }
.pie-cta-botones { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; }
.pie .pie-cta-boton { display: inline-flex; align-items: center; gap: .55rem; background: #fff; color: #7A3410; font-family: var(--fuente-titulo); font-weight: 800;
  border-radius: 999px; padding: .8rem 1.4rem; min-height: 48px; box-shadow: 0 6px 18px rgba(20, 40, 64, .25); }
.pie .pie-cta-boton:hover, .pie .pie-cta-boton:focus-visible { background: var(--azul-hondo); color: #fff; }
.pie .pie-cta-secundario { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 4px; }
.pie .pie-cta-secundario:hover { text-decoration-color: #fff; }
/* el cuerpo */
.pie-cuerpo { border-top: 4px solid; border-image: linear-gradient(90deg, #FF651F 0 25%, #F3BF4B 25% 50%, #35A9B7 50% 75%, #6E8FB8 75% 100%) 1;
  padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.pie-rejilla { display: grid; grid-template-columns: 1.35fr .85fr 1.6fr .8fr; gap: 2rem 2.5rem; }
.pie-marca p { margin: 0 0 .8rem; max-width: 34ch; line-height: 1.6; }
.pie-logos { display: inline-flex; align-items: center; gap: .9rem; background: #fff; border-radius: 16px; padding: .6rem 1rem; margin-bottom: 1.1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.pie-logos img { width: auto; height: 76px; border-radius: 0; background: none; padding: 0; margin: 0; }
.pie-logos span { width: 1px; align-self: stretch; background: #D6DCE4; }
.pie-frase { font-family: var(--fuente-titulo); font-weight: 800; color: var(--amarillo); font-size: 1.05rem; }
.pie-titulo { font-family: var(--fuente-titulo); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: #fff;
  margin: .4rem 0 1.1rem; padding: 0; border: 0; display: block; }
.pie-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.pie-lista a { display: inline-flex; align-items: center; gap: .6rem; padding: .15rem 0; }
.pie-lista a:hover span, .pie-lista > li > a:not(:has(span)):hover { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pie-contacto .ti { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--amarillo); }
.pie-contacto a:hover .ti { background: rgba(245, 184, 61, .2); }
.pie-contacto span { overflow-wrap: break-word; min-width: 0; } /* el correo entero en un renglón; sólo se parte si de verdad no cabe */
.pie-redes { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.pie-redes a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .6rem; border-radius: 999px;
  border: 1px solid rgba(201, 214, 227, .35); font-weight: 700; font-size: .85rem; }
.pie-redes a:hover, .pie-redes a:focus-visible { background: #fff; color: var(--azul-hondo); border-color: #fff; }
.pie-nota { font-size: .9rem; color: #AEBFD1; max-width: 26ch; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; color: #AEBFD1; font-size: .875rem;
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.25rem; }
.pie-legal p { margin: 0; }
.pie-legal-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.pie-legal-enlaces a { color: #AEBFD1; }
.pie-legal-enlaces a:not(.pie-panel):hover { text-decoration: underline; text-underline-offset: 4px; }
.pie .pie-panel { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(201, 214, 227, .4); border-radius: 999px;
  padding: .35rem .9rem; min-height: 36px; color: #C9D6E3; }
.pie .pie-panel:hover, .pie .pie-panel:focus-visible { border-color: var(--amarillo); color: #fff; }
@media (max-width: 980px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .pie-rejilla { grid-template-columns: 1fr; }
  .pie-cta-botones, .pie .pie-cta-boton { width: 100%; justify-content: center; }
  .pie-legal { flex-direction: column; align-items: flex-start; }
  .pie-logos img { height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .pie a { transition: none; } }

/* 009 · el compañero WebP va en <picture>; la caja no cambia: la imagen sigue siendo la que se mide y recorta. */
picture { display: contents; }
/* 010 · encuadre elegido en Panel → Fotos: gana a la posición de cada página (por eso !important, y sólo aquí). */
.foco-ai { object-position: 15% 10% !important; } .foco-ac { object-position: 50% 10% !important; } .foco-ad { object-position: 85% 10% !important; }
.foco-ci { object-position: 15% 45% !important; } .foco-cc { object-position: 50% 45% !important; } .foco-cd { object-position: 85% 45% !important; }
.foco-bi { object-position: 15% 85% !important; } .foco-bc { object-position: 50% 85% !important; } .foco-bd { object-position: 85% 85% !important; }
/* ===== 014 · Formulario de reserva y paso 2 (memoria/panel_formulario_reserva_2026-10-17.md) ===== */
.fn-bajada { color: var(--fn-tinta-suave); margin: -.3rem 0 1rem; }
.fn-opcional { color: var(--fn-tinta-suave); font-weight: 600; font-size: .9em; }
.fn-resumen-error { background: #FBEBE9; color: var(--error); border-radius: 10px; padding: .7rem .9rem; font-weight: 700; }
.fn-reserva .campo input[type=text], .fn-reserva .campo input[type=email], .fn-reserva .campo input[type=tel] { min-height: 56px; font-size: 1.125rem; }
.fn-personas { border: 0; padding: 0; margin: 0 0 1rem; }
.fn-personas legend { font-weight: 700; color: var(--fn-marino); margin-bottom: .5rem; }
.fn-personas .fn-opcion { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .7rem 1rem; margin-bottom: .6rem; border: 2px solid var(--borde);
  border-radius: 14px; background: #fff; cursor: pointer; }
.fn-opcion input { width: 24px; height: 24px; accent-color: var(--fn-boton); flex: none; margin: 0; }
.fn-opcion:has(input:checked) { border-color: var(--fn-boton); background: var(--fn-durazno); }
.fn-opcion:has(input:focus-visible) { outline: 3px solid var(--fn-marino); outline-offset: 2px; }
.fn-personas .fn-opcion-texto { flex: 1; display: block; font-weight: 700; color: var(--fn-marino); }
.fn-opcion-texto small { display: block; font-weight: 600; color: var(--fn-tinta-suave); font-size: .875rem; }
.fn-personas .fn-opcion-precio { margin-left: auto; font-family: var(--fuente-titulo); font-weight: 900; font-size: 1.25rem; color: var(--fn-marino); }
.fn-acompanante { margin-top: .4rem; }
.fn-personas:has(#f-p1:checked) .fn-acompanante { display: none; }
.fn-confianza { margin-top: .4rem; }
.fn-duda { text-align: center; margin-top: 1rem; }
.paso2 { padding-top: clamp(1.5rem, 4vw, 3rem); }
.paso2 h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); margin: .2rem 0 .4rem; }
.paso2 h2 { font-size: 1.25rem; }
.paso2-ficha { margin: 1rem 0 1.25rem; }
.paso2-ficha p { margin: 0 0 .4rem; }
.paso2-caminos { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 760px) { .paso2 .fn-lectura { width: min(880px, 100% - 2rem); } .paso2-caminos { grid-template-columns: 1fr 1fr; align-items: start; } }
.paso2-camino h2 { margin-top: 0; }
.paso2-pagar { border-top: 6px solid var(--fn-naranja); }
.paso2-hablar { border-top: 6px solid var(--fn-turquesa); }
.paso2-escribeme { margin-top: .6rem; }
.paso2-escribeme .boton-texto { min-height: 44px; padding-left: 0; }
.paso2-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-boton { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--borde); background: #fff; color: var(--fn-marino);
  font: inherit; font-weight: 700; cursor: pointer; }
.chip-boton:hover, .chip-boton:focus-visible { border-color: var(--fn-boton); }
.paso2-dedica, .paso2-mientras { margin: 1.5rem 0; }
/* Botón que se ve como enlace (en el panel vive en panel.css; el paso 2 lo usa en el sitio público). */
.paso2 .boton-texto { background: none; border: 0; padding: .4rem 0; font: inherit; font-weight: 700; color: var(--fn-marino);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.paso2 .boton-texto:hover, .paso2 .boton-texto:focus-visible { color: var(--fn-boton-hover); }