/* Abordo · sitio público (inicio con entrada animada, páginas, formularios de acceso) */

/* ───────── Cabecera ───────── */
/* El fondo translúcido va en ::before: si el desenfoque (backdrop-filter) estuviera en la cabecera, el menú móvil
   (position: fixed, dentro de ella) quedaría recortado al alto de la cabecera al abrirlo después de bajar. */
.site-header { position: sticky; top: 0; z-index: 100; isolation: isolate; }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background .3s, box-shadow .3s; }
.site-header.is-scrolled::before { background: rgba(249, 246, 241, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 var(--line); }
body.menu-open .site-header::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--line); }
.site-header__in { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { flex: none; display: block; }
.brand img { height: 40px; width: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 10px 14px; border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font: 500 .98rem/1 var(--font-body); transition: background .2s, color .2s; }
.site-nav a:hover, .site-nav a[aria-current] { background: rgba(48, 84, 84, .08); color: var(--ink); }
.site-header__cta { display: flex; align-items: center; gap: 14px; }
.login-link { font-weight: 600; text-decoration: none; color: var(--primary); padding: 8px 6px; }
.burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--paper); box-shadow: var(--sh-1); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2.4px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease-out), opacity .2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 76px 0 0; background: var(--bg); z-index: 99; padding: 12px var(--gutter) calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { opacity: 0; transform: translateY(14px); animation: mm-in .5s var(--ease-out) forwards; animation-delay: calc(var(--i) * 45ms); }
.mobile-menu li a { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font: 600 1.45rem/1.1 var(--font-display); }
.mobile-menu__cta { margin-top: 26px; text-align: center; }
.mobile-menu__cta p { margin-top: 14px; }
@keyframes mm-in { to { opacity: 1; transform: none; } }
body.menu-open { overflow: hidden; }

@media (max-width: 1060px) {
  .site-nav { display: none; }
  .site-header__cta { margin-left: auto; }
  .burger { display: block; }
}
@media (max-width: 560px) {
  .site-header__cta .btn, .site-header__cta .login-link { display: none; }
  .brand img { height: 34px; }
  .site-header__in { min-height: 66px; }
  .mobile-menu { inset: 66px 0 0; }
}

/* ───────── Secciones genéricas ───────── */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-head { max-width: 760px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.section-head .lead { margin-top: .4em; }

/* ───────── HÉROE con entrada épica ───────── */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(#000 62%, transparent 96%); mask-image: linear-gradient(#000 62%, transparent 96%); background:
  radial-gradient(60% 50% at 82% 30%, rgba(244, 210, 209, .55), transparent 70%),
  radial-gradient(40% 40% at 10% 90%, rgba(199, 215, 205, .45), transparent 70%); }
.hero__glow { position: absolute; width: 60vmax; height: 60vmax; right: -18vmax; top: -22vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 201, 141, .35), transparent); filter: blur(10px); }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(20px, 3vw, 56px);
  min-height: clamp(620px, calc(100svh - 76px), 960px); padding-top: 12px; padding-bottom: 0; }
.hero__copy { align-self: center; padding-bottom: 56px; }
.hero__brand { margin: 0 0 22px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon word" "tag tag"; align-items: center; column-gap: clamp(14px, 2vw, 24px); row-gap: 14px; font-size: inherit; }
.hero__icon { grid-area: icon; width: clamp(74px, 8.4vw, 118px); filter: drop-shadow(0 18px 30px rgba(66, 102, 102, .28)); }
.hero__icon svg { width: 100%; height: auto; overflow: visible; }
.hero__wordmark { grid-area: word; width: clamp(220px, 27vw, 410px); }
.hero__wordmark svg { width: 100%; height: auto; overflow: visible; fill: var(--primary); }
.hero__tagline { grid-area: tag; display: block; font: 500 clamp(.92rem, 1.35vw, 1.12rem)/1.2 var(--font-body); letter-spacing: .34em; text-transform: uppercase; color: var(--ink-2); padding-left: .2em; }
.tg-l { display: inline-block; }
.hero__lead { max-width: 33em; font-size: clamp(1.05rem, 1.45vw, 1.22rem); margin: 0 0 30px; }
.hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 30px; }
.hero__btn { min-width: 230px; }
.hero__login { margin: 0; color: var(--ink-2); }
.hero__login a { font-weight: 700; text-decoration: none; }
.hero__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); background: rgba(255, 253, 249, .8); font-size: .92rem; font-weight: 500; box-shadow: var(--sh-1); }
.hero__trust .ico { color: var(--teal); width: 18px; height: 18px; }
/* Bandera de Costa Rica, pequeña y discreta */
.flag-cr { display: inline-block; width: 22px; height: auto; flex: none; vertical-align: -2px; filter: drop-shadow(0 1px 1.5px rgba(31, 69, 73, .18)); transform-origin: 4% 50%; transition: transform .5s var(--ease-spring); }
.hero__trust li:hover .flag-cr, .footer-legal p:hover .flag-cr { transform: rotate(-6deg) scale(1.12); }
.flag-cr--foot { width: 20px; margin-left: 4px; opacity: .92; }

/* Escenario */
.hero__stage { position: relative; height: min(78vh, 740px); min-height: 480px; align-self: end; clip-path: inset(-50% -50% 0 -50%); }
.blob { position: absolute; overflow: visible; translate: calc(var(--px, 0) * var(--k, 10px)) calc(var(--py, 0) * var(--k, 10px)); transition: translate .6s var(--ease-out); }
.blob path { transform-box: fill-box; transform-origin: 50% 50%; animation: breathe 9s ease-in-out infinite; }
.blob--pink { width: 78%; left: 10%; top: 2%; } .blob--pink path { fill: #ecc1ba; }
.blob--teal { width: 58%; left: -6%; bottom: -6%; } .blob--teal path { fill: #577a76; animation-duration: 11s; animation-direction: reverse; }
.blob--sand { width: 52%; right: -10%; bottom: 0; } .blob--sand path { fill: #f4d9bb; animation-duration: 10s; }
@keyframes breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.045) rotate(5deg); } }
.dot { position: absolute; border-radius: 50%; }
.dot--rose { width: 7%; aspect-ratio: 1; background: var(--rose); right: 6%; top: 34%; }
.dot--ochre { width: 4.4%; aspect-ratio: 1; background: var(--ochre); left: 4%; top: 22%; }
.dot--mint { width: 3.2%; aspect-ratio: 1; background: var(--mint); right: 24%; top: 6%; }
.hero__ring { position: absolute; left: 50%; bottom: 8%; width: 74%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  border: 2px dashed rgba(48, 84, 84, .18); }
.hero__person { position: absolute; left: 50%; bottom: 0; height: 94%; aspect-ratio: 712 / 939; transform: translateX(-50%); z-index: 2; }
.hero__person img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 40px rgba(31, 69, 73, .18)); }
.hero__sea { position: absolute; left: -2px; right: -2px; bottom: -1px; height: clamp(70px, 9vw, 120px); z-index: 3; pointer-events: none; overflow: hidden; }
.hero__sea i { position: absolute; left: 0; bottom: 0; width: calc(100% + 600px); height: 100%; background-repeat: repeat-x; background-position: 0 100%; background-size: 600px 100%; animation: sea-x 13s linear infinite; will-change: transform; }
.hero__sea .s1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 38C75 8 225 8 300 38S525 68 600 38V120H0Z' fill='%23aabdb1'/%3E%3C/svg%3E"); }
.hero__sea .s2 { height: 74%; animation-duration: 9.5s; animation-direction: reverse; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40C75 12 225 12 300 40S525 68 600 40V120H0Z' fill='%23c7d7cd'/%3E%3C/svg%3E"); }
.hero__sea .s3 { height: 50%; animation-duration: 7s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 46C75 18 225 18 300 46S525 74 600 46V120H0Z' fill='%23f9f6f1'/%3E%3C/svg%3E"); }
.hero__sea--stage { display: none; }
.hero__sea--full { z-index: 4; }
.hero__boat { position: absolute; z-index: 4; width: 16%; left: 2%; bottom: clamp(26px, 4vw, 52px); }
.hero__boat svg { width: 100%; height: auto; animation: bob 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-6px); } }
.spark { position: absolute; z-index: 4; color: var(--ochre); }
.spark .ico { width: 100%; height: 100%; }
.sp1 { width: 34px; height: 34px; right: 12%; top: 16%; animation: twinkle 3.2s ease-in-out infinite; }
.sp2 { width: 22px; height: 22px; left: 16%; top: 12%; color: var(--coral); animation: twinkle 2.6s ease-in-out .8s infinite; }
.sp3 { width: 26px; height: 26px; right: 4%; bottom: 30%; color: var(--teal); animation: twinkle 3.6s ease-in-out .3s infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(30deg); opacity: .55; } }

/* Tarjetas flotantes */
.float-card { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); transition: translate .6s var(--ease-out); position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px;
  background: rgba(255, 253, 249, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-2); font: 600 .93rem/1.25 var(--font-display); color: var(--ink);
  max-width: 290px; --r: 0deg; }
.float-card small { display: block; font: 600 .66rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 3px; }
.float-card--phrase { right: -7%; top: 36%; --r: 2deg; background: rgba(250, 233, 229, .95); }
.fc-sun { width: 40px; height: 40px; display: grid; place-items: center; color: #e9a640; flex: none; }
.fc-sun .ico { width: 34px; height: 34px; stroke-width: 1.8; }
.fc-heart { color: var(--heart); }
.float-card--video { left: -9%; top: 58%; --r: -2deg; }
.fc-thumb { position: relative; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; flex: none; background: var(--card); }
.fc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.fc-thumb i { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(31, 69, 73, .82); color: #fff; display: grid; place-items: center; }
.fc-thumb i .ico { width: 13px; height: 13px; margin-left: 2px; }
.float-card--kids { right: -4%; bottom: 16%; --r: 1.5deg; }
.fc-avatars { display: flex; }
.fc-avatars .av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; }
.fc-avatars .av:first-child { margin-left: 0; }

.hero__scroll { display: none; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 30px; height: 48px; border-radius: 20px; border: 2px solid var(--line-2); z-index: 6; }
.hero__scroll span { position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--primary); animation: scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(16px); } }

/* — Coreografía de la entrada (solo con JS; sin JS se ve el estado final) — */
.js .hero [class] { animation-play-state: paused; }
.is-ready .hero [class] { animation-play-state: running; }
.js .blob { animation: blob-in 1.25s var(--ease-spring) both; }
.js .blob--pink { animation-delay: .05s; } .js .blob--teal { animation-delay: .18s; } .js .blob--sand { animation-delay: .3s; }
.js .dot { animation: pop 1s var(--ease-spring) both; } .js .dot--rose { animation-delay: .9s; } .js .dot--ochre { animation-delay: 1.05s; } .js .dot--mint { animation-delay: 1.15s; }
.js .hero__ring { animation: ring-in 1.6s var(--ease-out) .55s both; }
.js .hero__icon { animation: icon-pop 1s var(--ease-spring) .2s both; }
.js .hero__icon .ai-dot { transform-box: fill-box; transform-origin: 50% 100%; animation: dot-drop 1.1s var(--ease-out) .75s both; }
.js .hero__icon .ai-a { animation: fade-in .6s ease .45s both; }
.js .wm-l { transform-box: fill-box; animation: letter-rise .9s var(--ease-spring) both; animation-delay: calc(.5s + var(--i) * 70ms); }
.js .tg-l { animation: blur-in .7s var(--ease-out) both; animation-delay: calc(1.05s + var(--i) * 28ms); }
.js .hero__lead { animation: fade-up .9s var(--ease-out) 1.35s both; }
.js .hero__cta { animation: fade-up .9s var(--ease-out) 1.5s both; }
.js .hero__trust { animation: fade-up .9s var(--ease-out) 1.65s both; }
.js .hero__person { animation: person-in 1.5s var(--ease-out) .6s both; }
.js .hero__sea { animation: fade-in 1.2s ease .9s both; }
.js .hero__boat { animation: sail-in 2.4s var(--ease-out) 1.1s both; }
.js .float-card { animation: card-in .9s var(--ease-spring) both; }
.js .float-card--phrase { animation-delay: 1.55s; } .js .float-card--video { animation-delay: 1.75s; } .js .float-card--kids { animation-delay: 1.95s; }
.js .spark { animation-name: spark-in, twinkle; animation-duration: .8s, 3s; animation-timing-function: var(--ease-spring), ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: both; }
.js .sp1 { animation-delay: 1.4s, 2.2s; } .js .sp2 { animation-delay: 1.6s, 2.4s; } .js .sp3 { animation-delay: 1.8s, 2.6s; }
.js .hero__scroll { animation: fade-in 1s ease 2.4s both; }
/* flotación suave cuando ya entraron */
.is-ready .float-card > * { animation: none; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes blur-in { from { opacity: 0; transform: translateY(.7em); filter: blur(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(0); } 70% { transform: scale(1.25); } }
@keyframes blob-in { from { opacity: 0; transform: scale(.2) rotate(-25deg); } 65% { opacity: 1; transform: scale(1.06) rotate(4deg); } to { transform: none; } }
@keyframes ring-in { from { opacity: 0; transform: translateX(-50%) scale(.5) rotate(-90deg); } to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes icon-pop { from { opacity: 0; transform: scale(.3) rotate(-16deg); } 55% { opacity: 1; transform: scale(1.12) rotate(4deg); } 78% { transform: scale(.96) rotate(-1deg); } to { transform: none; } }
@keyframes dot-drop { from { opacity: 0; transform: translateY(-220%) scale(.6); } 45% { opacity: 1; transform: translateY(0) scale(1.25, .78); } 62% { transform: translateY(-38%) scale(.92, 1.08); } 80% { transform: translateY(0) scale(1.06, .95); } to { transform: none; } }
@keyframes letter-rise { from { opacity: 0; transform: translateY(85%) rotate(12deg) scale(.6); } 60% { opacity: 1; transform: translateY(-8%) rotate(-3deg) scale(1.04); } to { transform: none; } }
@keyframes person-in { from { opacity: 0; clip-path: inset(100% -10% -10% -10% round 48% 48% 0 0); transform: translateX(-50%) translateY(70px) scale(.92); }
  40% { opacity: 1; } to { opacity: 1; clip-path: inset(-10% -10% -10% -10% round 0); transform: translateX(-50%); } }
@keyframes sail-in { from { opacity: 0; transform: translateX(-220%) rotate(-8deg); } 30% { opacity: 1; } to { transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.82) rotate(calc(var(--r) * -3)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes spark-in { from { opacity: 0; transform: scale(0) rotate(-90deg); } }
.hero.is-paused [class] { animation-play-state: paused !important; }

/* Héroe en tablet y móvil: composición del mockup de bienvenida */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; min-height: auto; padding-top: 8px; text-align: center; }
  .hero__copy { display: contents; }
  .hero__brand { order: 2; grid-template-columns: 1fr; grid-template-areas: "icon" "word" "tag"; justify-items: center; row-gap: 10px; margin: 14px 0 0; }
  .hero__icon { width: clamp(88px, 26vw, 120px); }
  .hero__wordmark { width: clamp(220px, 66vw, 340px); margin-top: 2px; }
  .hero__tagline { font-size: clamp(.78rem, 3.4vw, .98rem); letter-spacing: .3em; }
  .hero__stage { order: 3; height: clamp(360px, 64vw, 520px); min-height: 0; margin: 4px calc(var(--gutter) * -1) 0; }
  .hero__sea--stage { display: block; }
  .hero__sea--full { display: none; }
  .hero__cta { order: 4; flex-direction: column; margin: -26px 0 16px; position: relative; z-index: 8; }
  .hero__btn { width: min(100%, 420px); }
  .hero__lead { order: 5; margin: 6px auto 18px; }
  .hero__trust { order: 6; justify-content: center; margin-bottom: 30px; }
  .float-card { max-width: 230px; font-size: .84rem; padding: 10px 12px 10px 10px; }
  .float-card--phrase { top: 18%; right: 1%; }
  .float-card--video { left: 1%; top: auto; bottom: 30%; }
  .float-card--kids { display: none; }
  .hero__scroll { display: none; }
  .hero__boat { width: 22%; bottom: 9%; left: 2%; }
}
@media (max-width: 600px) {
  .float-card { display: none; }
  .hero__stage { height: clamp(340px, 92vw, 460px); }
  .hero__ring { width: 86%; }
}

/* ───────── Bienvenida y características ───────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.feature { background: var(--paper); border-radius: var(--r-l); padding: clamp(22px, 3vw, 34px); box-shadow: var(--sh-1); transition: transform .35s var(--ease-out), box-shadow .35s; }
.feature:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.feature__ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px; }
.feature__ico .ico { width: 28px; height: 28px; }
.f-pink { background: var(--pink-soft); color: #b8605b; } .f-mint { background: var(--mint); color: var(--primary); } .f-sand { background: var(--sand-soft); color: #9c6a26; }
.feature p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr; } }

/* ───────── Temas (categorías, estilo del mockup) ───────── */
.topics { background: linear-gradient(180deg, transparent, rgba(244, 238, 230, .7) 30%, transparent); }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
.topic { --tbg: var(--pink-soft); --tic: #c0605a; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: var(--r-l); background: var(--tbg); text-decoration: none; color: var(--ink);
  transition: transform .4s var(--ease-spring), box-shadow .3s; position: relative; overflow: hidden; }
.topic::after { content: ''; position: absolute; width: 140px; height: 140px; right: -40px; top: -40px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: transform .5s var(--ease-out); }
.topic:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--sh-2); color: var(--ink); }
.topic:hover::after { transform: scale(1.4); }
.topic--menta { --tbg: #cfe0d8; --tic: #2f6a62; } .topic--arena { --tbg: #f6dfbf; --tic: #a8701f; } .topic--coral { --tbg: #f3cfcb; --tic: #c4574f; } .topic--rosa { --tbg: #f4d2d1; --tic: #c0605a; }
.topic__ico { width: 62px; height: 62px; display: grid; place-items: center; color: var(--tic); margin-bottom: 16px; }
.topic__ico .ico { width: 46px; height: 46px; stroke-width: 1.6; }
.topic h3 { font-size: 1.28rem; margin-bottom: .4em; }
.topic p { font-size: .97rem; color: var(--ink-2); flex: 1; }
.topic .link-arrow { color: var(--ink); }
@media (max-width: 1000px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .topic-grid { grid-template-columns: 1fr; } }

/* ───────── Por dentro (teléfono) ───────── */
.inside__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.inside__phone { display: grid; place-items: center; position: relative; }
.inside__phone::before { content: ''; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #f4d2d1, rgba(244, 210, 209, 0)); }
.tick-list { list-style: none; margin: 26px 0 32px; padding: 0; display: grid; gap: 18px; }
.tick-list li { display: flex; gap: 16px; align-items: flex-start; }
.tick-list li > span { flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--paper); box-shadow: var(--sh-1); display: grid; place-items: center; color: var(--coral); }
.tick-list strong { color: var(--ink); }
@media (max-width: 900px) { .inside__grid { grid-template-columns: 1fr; } .inside__copy { order: -1; } }

/* El teléfono en HTML/CSS (se ve nítido a cualquier resolución) */
.phone { --pw: min(340px, 82vw); width: var(--pw); aspect-ratio: 9 / 19.2; border-radius: calc(var(--pw) * .15); background: #1c2b2c; padding: calc(var(--pw) * .032);
  box-shadow: 0 50px 90px -20px rgba(31, 69, 73, .45), inset 0 0 0 2px #3a4c4d; position: relative; animation: phone-float 7s ease-in-out infinite; font-size: calc(var(--pw) / 340 * 16px); }
@keyframes phone-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.phone__notch { position: absolute; left: 50%; top: calc(var(--pw) * .045); width: 30%; height: calc(var(--pw) * .075); transform: translateX(-50%); background: #1c2b2c; border-radius: 99px; z-index: 3; }
.phone__screen { width: 100%; height: 100%; border-radius: calc(var(--pw) * .12); background: #f9f6f1; overflow: hidden; padding: 2.6em .95em 0; position: relative; color: var(--ink); }
.ph-status { position: absolute; top: .9em; left: 1.6em; right: 1.5em; display: flex; justify-content: space-between; font: 600 .72em/1 var(--font-body); }
.ph-sig { display: flex; gap: 2px; align-items: flex-end; } .ph-sig i { width: 3px; background: var(--ink); border-radius: 1px; height: 4px; } .ph-sig i:nth-child(2) { height: 6px; } .ph-sig i:nth-child(3) { height: 8px; } .ph-sig i:nth-child(4) { height: 10px; }
.ph-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7em; }
.ph-head img { height: 1.45em; width: auto; }
.ph-head__r { display: flex; gap: .55em; align-items: center; }
.ph-bell { position: relative; } .ph-bell .ico { width: 1.25em; height: 1.25em; } .ph-bell i { position: absolute; right: 0; top: 0; width: .45em; height: .45em; border-radius: 50%; background: var(--coral); }
.ph-me { width: 2em; height: 2em; border-radius: 50%; background: var(--pink-soft); display: grid; place-items: center; font: 700 .85em/1 var(--font-display); color: #a5504b; }
.ph-hello { font: 700 1.38em/1.1 var(--font-display); margin: 0; display: flex; align-items: center; gap: .3em; }
.ph-love .ico { width: .9em; height: .9em; color: var(--heart); }
.ph-sub { margin: .15em 0 .7em; font-size: .8em; color: var(--muted); }
.ph-phrase { display: flex; align-items: center; gap: .55em; background: #f7e7e3; border-radius: 1em; padding: .65em .7em; font: 500 .72em/1.3 var(--font-body); }
.ph-phrase small { display: block; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); font-weight: 700; margin-bottom: .15em; }
.ph-sun { color: #e9a640; } .ph-sun .ico { width: 1.9em; height: 1.9em; stroke-width: 1.6; }
.ph-phrase__t { flex: 1; } .ph-phrase__h { color: var(--heart); }
.ph-row { display: flex; justify-content: space-between; align-items: center; margin: .8em 0 .45em; }
.ph-row b { font: 700 .92em/1 var(--font-display); }
.ph-row span { font-size: .66em; color: var(--muted); display: flex; align-items: center; } .ph-row .ico { width: 1em; height: 1em; }
.ph-kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.ph-kid { background: var(--card); border-radius: .85em; padding: .5em .3em; text-align: center; display: grid; justify-items: center; gap: .1em; }
.ph-kid .av { width: 2.4em; height: 2.4em; }
.ph-kid b { font: 600 .7em/1.1 var(--font-display); } .ph-kid small { font-size: .58em; color: var(--muted); }
.ph-kid--add > span { width: 2.4em; height: 2.4em; border-radius: 50%; background: #e2dcd3; display: grid; place-items: center; color: #fff; } .ph-kid--add .ico { width: 1.2em; height: 1.2em; stroke-width: 3; }
.ph-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.ph-cat { border-radius: .8em; padding: .6em .2em .5em; display: grid; justify-items: center; gap: .25em; text-align: center; }
.ph-cat .ico { width: 1.6em; height: 1.6em; stroke-width: 1.6; } .ph-cat small { font-size: .52em; line-height: 1.15; }
.c-rosa { background: #f4d2d1; color: #c0605a; } .c-menta { background: #cfe0d8; color: #2f6a62; } .c-arena { background: #f6dfbf; color: #a8701f; } .c-coral { background: #f3cfcb; color: #c4574f; }
.ph-cat small { color: var(--ink-2); }
.ph-video { display: flex; gap: .6em; background: var(--paper); border-radius: .9em; padding: .45em; box-shadow: var(--sh-1); align-items: center; }
.ph-thumb { position: relative; width: 4.9em; height: 4em; border-radius: .7em; overflow: hidden; background: #e9e2d8; flex: none; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.ph-thumb i { position: absolute; inset: 0; margin: auto; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(31, 69, 73, .8); color: #fff; display: grid; place-items: center; } .ph-thumb i .ico { width: .7em; height: .7em; margin-left: .1em; }
.ph-video__t { flex: 1; display: grid; gap: .15em; } .ph-video__t em { font: 700 .5em/1 var(--font-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); background: #f7e7e3; padding: .35em .6em; border-radius: 99px; justify-self: start; }
.ph-video__t b { font: 600 .72em/1.2 var(--font-display); } .ph-video__t small { font-size: .6em; color: var(--muted); display: flex; gap: .3em; align-items: center; } .ph-video__t .ico { width: 1em; height: 1em; }
.ph-mark .ico { width: 1em; height: 1em; color: var(--muted); }
.ph-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: rgba(255, 253, 249, .96); padding: .55em .3em 1.1em; border-top: 1px solid var(--line); }
.ph-nav span { display: grid; justify-items: center; gap: .15em; color: var(--muted); } .ph-nav .ico { width: 1.2em; height: 1.2em; } .ph-nav small { font-size: .52em; } .ph-nav .is-on { color: var(--ink); font-weight: 700; }

/* ───────── Pasos ───────── */
.steps-sec { background: var(--paper); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); counter-reset: s; position: relative; }
.steps::before { content: ''; position: absolute; left: 6%; right: 6%; top: 46px; border-top: 2.5px dashed rgba(48, 84, 84, .2); }
.step { position: relative; text-align: center; padding: 0 8px; }
.step__n { position: absolute; left: 50%; top: -8px; transform: translateX(14px); width: 28px; height: 28px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font: 700 .9rem/1 var(--font-display); z-index: 2; }
.step__ico { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 30px; background: var(--bg); display: grid; place-items: center; color: var(--primary); position: relative; box-shadow: var(--sh-1); }
.step__ico .ico { width: 38px; height: 38px; stroke-width: 1.7; }
.step h3 { font-size: 1.22rem; }
.step p { font-size: .98rem; margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } .steps::before { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .step { display: grid; grid-template-columns: 76px 1fr; text-align: left; column-gap: 16px; align-items: start; }
  .step__ico { width: 72px; height: 72px; grid-row: span 2; margin: 0; border-radius: 24px; } .step__ico .ico { width: 30px; height: 30px; } .step__n { left: 50px; top: -6px; transform: none; } .step h3 { margin-top: 6px; } }

/* ───────── Gustavo ───────── */
.gustavo__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.gustavo { overflow: hidden; }
@supports (overflow: clip) { .gustavo { overflow: visible; overflow-x: clip; } }   /* la mancha girada de la foto no ensancha la página en el celular */
.gustavo__photo { margin: 0; position: relative; }
.gustavo__photo::before { content: ''; position: absolute; inset: 8% -4% -6% 10%; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: var(--sand-soft); z-index: -1; transform: rotate(-6deg); }
.gustavo__photo img { width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(31, 69, 73, .16)); }
.cred { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cred li { padding: 8px 14px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--sh-1); font-size: .9rem; font-weight: 500; color: var(--ink); }
.quote { margin: 26px 0; padding: 22px 24px 22px 66px; border-radius: var(--r-l); background: var(--pink-soft); position: relative; font: 600 1.15rem/1.4 var(--font-display); color: #6c3b39; }
.quote .ico { position: absolute; left: 20px; top: 22px; width: 30px; height: 30px; color: var(--coral); }
.quote p { margin: 0; }
@media (max-width: 900px) { .gustavo__grid { grid-template-columns: 1fr; } .gustavo__photo { max-width: 460px; margin: 0 auto; } }
@media (max-width: 560px) { .gustavo__photo::before { inset: 8% 0 -6% 8%; } }

/* ───────── Membresía ───────── */
.plan-sec { background: linear-gradient(180deg, transparent, #f1ebe2); }
.plan__grid { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: clamp(30px, 6vw, 80px); align-items: center; }
.plan__deco { width: min(300px, 70%); margin-top: 20px; }
.plan-card { background: var(--paper); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 40px); box-shadow: var(--sh-3); position: relative; border: 2px solid rgba(48, 84, 84, .06); }
.plan-card::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(140deg, var(--rose), transparent 40%, transparent 60%, var(--sage));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan-card__badge { display: inline-flex; gap: 6px; align-items: center; font: 700 .75rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--coral); background: #f7e7e3; padding: 8px 12px; border-radius: var(--r-pill); }
.plan-card__badge .ico { width: 15px; height: 15px; }
.plan-card h3 { font-size: 1.7rem; margin: 16px 0 4px; }
.plan-card__price { font: 700 2.5rem/1.1 var(--font-display); color: var(--ink); margin: 8px 0 4px; }
.plan-card__price small { font: 500 1rem/1 var(--font-body); color: var(--muted); }
.plan-card__note { color: var(--muted); font-size: .95rem; }
.plan-card__list { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 12px; }
.plan-card__list li { display: flex; gap: 12px; align-items: flex-start; }
.plan-card__list .ico { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--mint); color: var(--primary); stroke-width: 3; margin-top: 1px; }
.plan-card__small { font-size: .88rem; color: var(--muted); margin: 14px 0 0; text-align: center; }
@media (max-width: 900px) { .plan__grid { grid-template-columns: 1fr; } .plan__deco { display: none; } }

/* ───────── Preguntas ───────── */
.faq__wrap { max-width: 860px; }
.faq { display: grid; gap: 12px; margin-bottom: 30px; }
.faq__item { background: var(--paper); border-radius: var(--r-m); box-shadow: var(--sh-1); overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: 1.12rem; }
.faq__toggle { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; color: var(--primary); transition: transform .35s var(--ease-out), background .2s; }
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--pink-soft); }
.faq__a { padding: 0 22px 20px; color: var(--ink-2); }
.faq__a p:last-child { margin: 0; }

/* ───────── Llamado final con barco ───────── */
.final-cta { position: relative; background: var(--primary); color: var(--cream); padding: clamp(90px, 12vw, 150px) 0 clamp(120px, 14vw, 180px); overflow: hidden; text-align: center; isolation: isolate; }
.final-cta h2 { color: var(--cream); max-width: 16em; margin: 0 auto .4em; font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
.final-cta .lead { color: rgba(250, 233, 217, .85); }
.final-cta .eyebrow { color: var(--sand); }
.final-cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn--ghost-light { --b: transparent; --c: var(--cream); box-shadow: inset 0 0 0 2px rgba(250, 233, 217, .5); }
.btn--ghost-light:hover { background: rgba(250, 233, 217, .1); color: var(--cream); }
.final-cta__sea { position: absolute; inset: auto 0 -1px; height: clamp(110px, 13vw, 170px); z-index: -1; overflow: hidden; }
/* Mar en mosaico: cada capa se repite cada 600 px y se mueve exactamente 600 px por vuelta, así el bucle no salta. */
.final-cta__sea i { position: absolute; left: 0; bottom: 0; width: calc(100% + 600px); height: 100%; background-repeat: repeat-x; background-position: 0 100%; background-size: 600px 100%; animation: sea-x 18s linear infinite; will-change: transform; }
.final-cta__sea .fs1 { z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 38C75 8 225 8 300 38S525 68 600 38V120H0Z' fill='rgba(170,189,177,.24)'/%3E%3C/svg%3E"); }
.final-cta__sea .fs2 { z-index: 2; height: 76%; animation-duration: 12s; animation-direction: reverse; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40C75 12 225 12 300 40S525 68 600 40V120H0Z' fill='rgba(199,215,205,.18)'/%3E%3C/svg%3E"); }
.final-cta__sea .fs3 { z-index: 4; height: 46%; animation-duration: 9s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 46C75 18 225 18 300 46S525 74 600 46V120H0Z' fill='%2326474a'/%3E%3C/svg%3E"); }
.final-cta__boat { position: absolute; z-index: 3; bottom: 26%; width: clamp(78px, 8vw, 112px); animation: cross 28s linear infinite; }
.final-cta__boat svg { width: 100%; height: auto; animation: bob 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes cross { from { left: -140px; } to { left: 100%; } }

/* ───────── Pie de página ───────── */
.site-footer { position: relative; color: rgba(250, 233, 217, .82); margin-top: 0; }
.site-footer__waves { height: 60px; margin-bottom: -2px; }
.site-footer__waves svg { width: 100%; height: 100%; }
.has-final-cta .site-footer__waves { display: none; }   /* el mar del llamado final ya entra en el pie */
.site-footer__in { background: var(--primary-2); padding: clamp(40px, 6vw, 70px) 0 calc(30px + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-brand img { height: 42px; width: auto; margin-bottom: 16px; }
.footer-brand p { max-width: 30em; }
.footer-h { font-size: 1rem; color: var(--sand); margin-bottom: 14px; letter-spacing: .02em; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: rgba(250, 233, 217, .86); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-tab { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--r-pill); background: rgba(250, 233, 217, .08); color: var(--cream); text-decoration: none; margin-top: 6px; }
.footer-tab:hover { background: rgba(250, 233, 217, .14); color: #fff; }
.footer-tab__boat { width: 38px; height: 38px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; padding: 5px; }
.footer-tab__boat svg { width: 100%; height: auto; }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(250, 233, 217, .14); margin-top: 40px; padding-top: 22px; font-size: .9rem; }
.footer-legal p { margin: 0; }
.footer-legal a { color: rgba(250, 233, 217, .86); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ───────── Páginas interiores ───────── */
.page-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 90px) 0 clamp(40px, 6vw, 70px); text-align: center; isolation: isolate; }
.page-hero h1 { max-width: 18em; margin: 12px auto 16px; font-size: clamp(2rem, 5vw, 3.4rem); }
.page-hero .lead { max-width: 40em; margin: 0 auto; }
.page-hero__blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero__blobs span { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .7; animation: drift 14s ease-in-out infinite; }
.page-hero__blobs .b1 { width: 340px; height: 340px; background: #f4d2d1; left: -120px; top: -100px; }
.page-hero__blobs .b2 { width: 260px; height: 260px; background: #cfe0d8; right: -80px; top: 20px; animation-delay: -4s; }
.page-hero__blobs .b3 { width: 120px; height: 120px; background: #f6dfbf; right: 18%; bottom: -40px; animation-delay: -8s; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, 14px) scale(1.06); } }
.breadcrumbs { font-size: .9rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-cards { grid-template-columns: 1fr; } }
.mini-card { background: var(--paper); border-radius: var(--r-l); padding: 24px; box-shadow: var(--sh-1); }
.mini-card .feature__ico { width: 50px; height: 50px; border-radius: 16px; margin-bottom: 14px; }
.mini-card h3 { font-size: 1.15rem; }
.mini-card p { margin: 0; font-size: .97rem; }

/* Temas en detalle */
.topic-detail { display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 4vw, 48px); padding: clamp(26px, 4vw, 40px); border-radius: var(--r-xl); background: var(--tbg, var(--paper)); margin-bottom: 24px; scroll-margin-top: 100px; }
.topic-detail .topic__ico { width: 84px; height: 84px; background: rgba(255, 255, 255, .55); border-radius: 26px; }
.topic-detail h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.topic-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.topic-list li { display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, .6); padding: 12px 14px; border-radius: 14px; }
.topic-list .ico { color: var(--tic); flex: none; margin-top: 2px; }
@media (max-width: 860px) { .topic-detail { grid-template-columns: 1fr; } .topic-list { grid-template-columns: 1fr; } }

/* Equipo */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.member { background: var(--paper); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.member img { width: 100%; height: auto; aspect-ratio: 771 / 740; object-fit: cover; background: var(--card); }
.member__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.member__role { font: 600 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }
.member h3 { margin-bottom: .5em; }
.member p { font-size: .96rem; }
.member blockquote { margin: auto 0 16px; font: 500 italic .96rem/1.5 var(--font-body); color: var(--muted); }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* Texto legal */
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 { font-size: 1.5rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.4em; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose .updated { color: var(--muted); font-size: .95rem; }

/* ───────── Acceso (formularios) ───────── */
.auth { min-height: 100svh; display: grid; grid-template-columns: 1fr minmax(380px, 560px); }
.auth__side { position: relative; overflow: hidden; background: var(--primary); color: var(--cream); padding: 40px clamp(30px, 5vw, 70px); display: flex; flex-direction: column; isolation: isolate; }
.auth__side a { color: var(--cream); }
.auth__side .brand img { height: 42px; }
.auth__visual { flex: 1; position: relative; margin: 20px 0; min-height: 300px; }
.auth__visual .blob--pink path { fill: #e6b3ac; } .auth__visual .blob--teal path { fill: #6f918c; } .auth__visual .blob--sand path { fill: #f4d9bb; }
.auth__visual .blob--pink { width: 70%; left: 14%; top: 4%; } .auth__visual .blob--teal { width: 50%; left: 0; bottom: 0; } .auth__visual .blob--sand { width: 46%; right: 0; bottom: 6%; }
.auth__visual picture { position: absolute; left: 50%; bottom: 0; height: 96%; aspect-ratio: 712 / 939; transform: translateX(-50%); }
.auth__visual img { height: 100%; width: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); }
.auth__quote { font: 600 clamp(1.2rem, 1.8vw, 1.5rem)/1.35 var(--font-display); max-width: 22em; }
.auth__quote small { display: block; font: 500 .95rem/1.3 var(--font-body); opacity: .75; margin-top: 8px; }
.auth__main { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 64px); background: var(--bg); }
.auth__mobile-brand { display: none; }
.auth__card { width: 100%; max-width: 440px; margin: 0 auto; }
.auth__card h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: .3em; }
.auth__card .lead { margin-bottom: 26px; font-size: 1.05rem; }
.auth__alt { text-align: center; margin-top: 22px; color: var(--ink-2); }
.auth__alt a { font-weight: 700; text-decoration: none; }
.auth__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px 0 18px; font-size: .95rem; }
.auth__back { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-weight: 600; margin-bottom: 26px; }
.auth--admin .auth__side { background: #1f3b3c; }
.auth--admin .auth__main { background: #f4efe8; }
.pw-meter { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 2px; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--coral); transition: width .3s, background .3s; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__side { display: none; }
  .auth__mobile-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; text-align: center; }
  .auth__mobile-brand .app-icon { width: 84px; height: 84px; }
  .auth__mobile-brand .wordmark { width: 170px; fill: var(--primary); }
  .auth__mobile-brand small { letter-spacing: .3em; text-transform: uppercase; font-size: .72rem; color: var(--ink-2); }
  .auth__main { justify-content: flex-start; padding-top: 36px; }
}

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.notfound .hero__boat { position: static; width: 160px; margin: 0 auto 10px; }

/* reCAPTCHA v2 («No soy un robot») en los formularios de acceso */
.captcha { display: flex; justify-content: center; min-height: 78px; margin: 4px 0 18px; }
.captcha .g-recaptcha { border-radius: 4px; }
/* La casilla de Google mide 304 px fijos: en celulares muy angostos se escala para que no se salga */
@media (max-width: 359px) {
  .captcha { justify-content: flex-start; min-height: 0; }
  .captcha .g-recaptcha { width: 262px; height: 68px; transform: scale(.86); transform-origin: 0 0; }
}