/* ============================================================
   SalteadosPR — Catering & Events. Hoja de estilos única de este sitio.

   Dirección de diseño: "flash sobre negro". El logo no es un logo de catering
   genérico — es arte de tatuaje (chef tatuado, patrón floral tipo bandana,
   rosa fuerte y cyan sobre negro). Las fotos reales de comida, en cambio, son
   editoriales y oscuras (mantelería negra y blanca, luz cálida, bodas). Así
   que el sitio va en negro para que las fotos manden, con el rosa y el cyan
   del logo usados a cuentagotas como acentos de "flash".

   El motivo estructural es EL CÍRCULO, y no es decorativo: sale del propio
   negocio — la paellera, la pizza, las tablas redondas de grazing, la bandeja
   de frutas y el propio logo son todos círculos. Por eso las estaciones van en
   discos con borde tipo canto de paellera, y el sello del hero repite el texto
   en arco que el logo ya tiene.

   Paleta medida con PIL sobre logo.jpg (filtrando por saturación):
     rosa/magenta #f75382 · crimson #dd1d41 · cyan #00b4ea · teal #27b4ba
     verde #90ba5a · negro puro #000000 (el fondo del logo — por eso la página
     es casi negra: el logo rectangular se funde sin recorte).
   ============================================================ */

:root{
  --flash:#e5245a;         /* rosa/crimson del logo — acento principal */
  --flash-hot:#f75382;     /* el rosa del panel floral, para hover y brillos */
  --cyan:#27b4ba;          /* teal del logo */
  --cyan-hot:#00b4ea;      /* cyan de la camisa del chef */
  --green:#90ba5a;

  --ink:#0a0a0b;           /* fondo — casi el negro puro del logo */
  --ink-2:#0f0f11;
  --panel:#151417;
  --panel-2:#1c1a1f;
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.055);
  --cream:#f2ece6;
  --muted:#a09aa0;

  --wrap:1180px;
  --r:14px;
  --r-lg:24px;
  --shadow:0 26px 64px -34px rgba(0,0,0,.95);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,.45vw + 14.8px,17.5px);
  line-height:1.62;
  color:var(--cream);
  background:var(--ink);
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}

/* El atributo height del HTML gana sobre aspect-ratio si no se neutraliza aquí. */
img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
svg{ width:1em; height:1em; }

h1,h2,h3{
  font-family:"Big Shoulders Display","Arial Narrow",system-ui,sans-serif;
  font-weight:800;
  line-height:.92;
  letter-spacing:.004em;
  text-transform:uppercase;
  margin:0;
}
h1 em,h2 em,h3 em{ font-style:normal; color:var(--flash); }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
@media (max-width:560px){ .wrap{ width:min(100% - 30px, var(--wrap)); } }

.skip{
  position:absolute; left:-9999px; top:0; z-index:120;
  background:var(--flash); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{ left:0; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.9em 1.5em; border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-weight:700; font-size:.95rem; letter-spacing:.005em;
  text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn:hover{ transform:translateY(-2px); }

.btn--flash{
  background:var(--flash); color:#fff;
  box-shadow:0 14px 34px -18px rgba(229,36,90,.95);
}
.btn--flash:hover{ background:var(--flash-hot); box-shadow:0 20px 44px -18px rgba(247,83,130,1); }

.btn--ghost{
  background:transparent; color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn--ghost:hover{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--cyan); }

.btn--wa{ background:#1fa855; color:#fff; box-shadow:0 14px 34px -20px rgba(31,168,85,.95); }
.btn--wa:hover{ background:#23bd5f; }

.btn--full{ width:100%; padding-block:1.05em; font-size:1rem; }

/* ---------- Encabezados ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.6em;
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1.05rem;
}
.eyebrow svg{ width:.72em; height:.72em; color:var(--flash); flex:none; }

.sec{ padding:clamp(70px,8.5vw,118px) 0; }
.sec__head{ max-width:620px; margin-bottom:clamp(36px,5vw,56px); }
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__head--center .eyebrow{ justify-content:center; }
.sec__head h2{ font-size:clamp(2.5rem,6vw,4rem); }
.sec__lead{ margin-top:1.1rem; color:var(--muted); }
.sec__head--center .sec__lead{ max-width:56ch; margin-inline:auto; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:box-shadow .25s ease, background .25s ease;
}
.nav.is-stuck{ box-shadow:0 1px 0 var(--line), 0 18px 40px -32px #000; background:rgba(10,10,11,.93); }
.nav__in{
  width:min(100% - 40px, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:16px; padding:12px 0;
}
@media (max-width:560px){ .nav__in{ width:min(100% - 30px, var(--wrap)); } }

.nav__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.nav__brand img{ width:46px; height:46px; border-radius:50%; flex:none; }
.nav__brand span{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:1.5rem; letter-spacing:.01em; text-transform:uppercase; line-height:1;
}
.nav__brand i{ font-style:normal; color:var(--flash); }

/* Regla del proyecto: el toggle va pegado a la derecha en móvil. */
.nav__toggle{
  display:none; order:3; margin-left:auto;
  width:44px; height:44px; flex:none;
  background:transparent; border:1px solid var(--line); border-radius:12px;
  color:var(--cream); cursor:pointer; align-items:center; justify-content:center;
}
.nav__toggle svg{ width:22px; height:22px; }
.nav__toggle-close{ display:none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open{ display:none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close{ display:block; }

.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--cream);
  position:relative; padding-block:4px;
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--flash); transition:right .25s ease;
}
.nav__links a:not(.btn):hover::after{ right:0; }
.nav__cta{ padding:.62em 1.05em; font-size:.85rem; }

@media (max-width:940px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:64px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2); border-block:1px solid var(--line);
    padding:8px 20px 20px;
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
    max-height:calc(100dvh - 64px); overflow-y:auto;
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:14px 2px; border-bottom:1px solid var(--line-soft); font-size:1.05rem; }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__cta{ margin-top:16px; border-bottom:0; justify-content:center; font-size:.95rem; padding:.9em 1.4em; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(46px,7vw,86px) 0 clamp(58px,7vw,92px); overflow:hidden; }
/* Resplandores: rosa y cyan, los dos colores del logo, uno por esquina. */
.hero::before,.hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(90px); opacity:.5;
}
.hero::before{ width:min(58vw,540px); aspect-ratio:1; left:-16%; top:6%; background:rgba(229,36,90,.34); }
.hero::after{ width:min(52vw,470px); aspect-ratio:1; right:-14%; bottom:-8%; background:rgba(39,180,186,.28); }

.hero__in{
  position:relative; z-index:1;
  width:min(100% - 40px, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,64px); align-items:center;
}
@media (max-width:560px){ .hero__in{ width:min(100% - 30px, var(--wrap)); } }

.hero h1{ font-size:clamp(3.6rem,11.5vw,7.4rem); margin-bottom:1.4rem; }
.hero__lead{ max-width:44ch; color:var(--muted); font-size:1.06rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:2.4rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.hero__facts li{ display:flex; flex-direction:column; }
.hero__facts b{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:2rem; line-height:1; text-transform:uppercase; color:var(--cream);
}
.hero__facts span{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.35rem; }

.hero__art{ position:relative; }
.hero__pic{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow), 0 0 0 1px var(--line);
}
.hero__pic img{ width:100%; }

/* Sello circular — repite el texto en arco del logo. */
.seal{
  position:absolute; left:-30px; bottom:-26px;
  width:clamp(96px,13vw,132px); aspect-ratio:1;
  display:grid; place-items:center;
  background:var(--ink); border-radius:50%;
  box-shadow:0 0 0 1px var(--flash), 0 18px 40px -22px #000;
}
.seal>svg:first-child{ width:100%; height:100%; animation:spin 26s linear infinite; }
.seal text{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:11.4px; letter-spacing:.11em; fill:var(--cream);
}
.seal__mark{ position:absolute; width:20%; height:20%; color:var(--flash); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .seal>svg:first-child{ animation:none; } }

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:440px; }
  .seal{ left:auto; right:-14px; bottom:-22px; }
}

/* ---------- Marquesina ---------- */
.marq{
  overflow:hidden; border-block:1px solid var(--line);
  background-color:var(--ink-2); padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marq__track{ display:flex; width:max-content; animation:marq 34s linear infinite; }
.marq__track span{
  font-family:"Big Shoulders Display",sans-serif; font-weight:700;
  font-size:1.5rem; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(242,236,230,.42); padding-right:1.2em; white-space:nowrap;
}
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marq__track{ animation:none; } }

/* ============================================================
   Capa cultural — petroglifos taínos y loseta de Viejo San Juan.

   Regla que gobierna toda esta capa: las fotos de comida son el argumento de
   venta, así que nada de esto puede competir con ellas. Los petroglifos van
   de marca de agua a 4–7 % de opacidad, siempre detrás (z-index 0) y siempre
   decorativos (aria-hidden). El único lugar donde se ven de frente es la
   franja .pr, donde además se nombran.

   El patrón de loseta imita las losetas hidráulicas de Viejo San Juan: la
   roseta de cuatro pétalos en cuadrícula, con el punto en cada esquina.
   ============================================================ */

.cult{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.cult svg{ position:absolute; display:block; }

/* Las secciones que llevan capa cultural necesitan contexto y que su
   contenido quede por encima. */
.sec,.boda,.equipo,.pr{ position:relative; }
.sec>.wrap,.boda__in,.equipo__in,.pr__in{ position:relative; z-index:1; }

.cult__sol{
  width:min(74vw,660px); height:auto; aspect-ratio:1;
  right:-14%; top:-24%; color:var(--cyan); opacity:.08;
}
.cult__sol--cta{ right:auto; left:50%; top:-14%; translate:-50% 0; width:min(84vw,700px); opacity:.07; }

.cult__ata{ width:clamp(150px,17vw,250px); aspect-ratio:1; left:-3%; top:8%; color:var(--flash); opacity:.055; }
.cult__coq{ width:clamp(130px,14vw,210px); aspect-ratio:1; right:-2%; bottom:4%; color:var(--cyan); opacity:.05; }
.cult__cemi{ width:clamp(140px,15vw,230px); aspect-ratio:1; right:2%; top:6%; color:var(--flash); opacity:.05; }

.cult__esp{ width:clamp(110px,12vw,180px); aspect-ratio:1; color:var(--cyan); opacity:.07; }
.cult__esp--a{ left:4%; bottom:6%; }
.cult__esp--b{ left:-2%; bottom:8%; rotate:180deg; opacity:.055; }

@media (max-width:760px){
  /* En móvil el ancho es poco: se dejan solo los dos grandes para que la capa
     no se convierta en ruido detrás del texto. */
  .cult__ata,.cult__coq,.cult__cemi,.cult__esp{ display:none; }
  .cult__sol{ width:120vw; right:-45%; top:auto; bottom:-14%; opacity:.05; }
  .cult__sol--cta{ width:130vw; }
}

/* Loseta hidráulica: fondo repetido, muy tenue, en las bandas oscuras. */
.sec--est,.sec--otras,.sec--form,.marq,.pr{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1.3'%3E%3Cpath d='M36 0C45 14 58 27 72 36 58 45 45 58 36 72 27 58 14 45 0 36 14 27 27 14 36 0Z'/%3E%3Ccircle cx='36' cy='36' r='8'/%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='72' cy='0' r='5'/%3E%3Ccircle cx='0' cy='72' r='5'/%3E%3Ccircle cx='72' cy='72' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Franja cultural ---------- */
.pr{
  padding:clamp(60px,7.5vw,96px) 0;
  background-color:var(--ink);
  border-block:1px solid var(--line-soft);
}
.pr__in{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(30px,4.5vw,60px); align-items:center; }
.pr__head h2{ font-size:clamp(2.2rem,5vw,3.2rem); margin-bottom:1.1rem; }
.pr__lead{ color:var(--muted); }

.pr__glifos{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pr__glifos li{ text-align:center; }
.pr__g{
  display:grid; place-items:center; margin:0 auto .9rem;
  width:100%; max-width:126px; aspect-ratio:1;
  border-radius:50%;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--cyan);
  transition:color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pr__g svg{ width:56%; height:56%; }
.pr__glifos li:hover .pr__g{
  color:var(--flash); transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px var(--flash);
}
.pr__glifos b{
  display:block; font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:1.15rem; text-transform:uppercase; line-height:1.05;
}
.pr__where{
  display:block; margin-top:.25rem;
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:860px){ .pr__in{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .pr__glifos{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
  .pr__g{ max-width:92px; }
}

/* ---------- Tarjetas de servicio ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; }
.card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:30px 26px 32px; position:relative; overflow:hidden;
  transition:border-color .22s ease, transform .22s ease, background .22s ease;
}
/* Filo superior rosa→cyan: los dos paneles de color que tiene el logo detrás del chef. */
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--flash),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--line); background:var(--panel-2); }
.card:hover::before{ transform:scaleX(1); }
.card__ico{ width:40px; height:40px; color:var(--cyan); margin-bottom:16px; }
.card h3{ font-size:1.65rem; margin-bottom:.6rem; }
.card p{ color:var(--muted); font-size:.96rem; }

/* ---------- Estaciones en vivo (el motivo del círculo) ---------- */
.sec--est{ background-color:var(--ink-2); border-block:1px solid var(--line-soft); }
.est{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(26px,4vw,46px); }
.est__item{ text-align:center; }

.disc{
  margin:0 auto 22px; width:min(100%,300px); aspect-ratio:1;
  border-radius:50%; overflow:hidden; position:relative;
  /* Canto de paellera: aro oscuro por fuera, filo claro por dentro. */
  box-shadow:0 0 0 8px var(--panel), 0 0 0 9px rgba(255,255,255,.16),
             0 30px 60px -30px rgba(0,0,0,.95);
  transition:box-shadow .3s ease, transform .3s ease;
}
.disc img{ width:100%; height:100%; object-fit:cover; }
.est__item:hover .disc{
  transform:translateY(-5px);
  box-shadow:0 0 0 8px var(--panel), 0 0 0 9px var(--flash),
             0 34px 66px -30px rgba(0,0,0,.95);
}
.est__item h3{ font-size:2rem; margin-bottom:.55rem; }
.est__item p{ color:var(--muted); font-size:.96rem; max-width:38ch; margin-inline:auto; }

/* ---------- Paellas de autor ---------- */
.paellas{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
.paellas__copy h2{ font-size:clamp(2.4rem,5.4vw,3.6rem); margin-bottom:1.2rem; }
.paellas__copy>p{ color:var(--muted); }
.ticks{ margin:1.7rem 0 2rem; display:grid; gap:.7rem; }
.ticks li{ position:relative; padding-left:1.9rem; font-size:.96rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em; width:10px; height:10px;
  background:var(--cyan);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}
.paellas__pics{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.pic{ margin:0; border-radius:var(--r-lg); overflow:hidden; position:relative; background:var(--panel); }
.pic img{ width:100%; }
.pic--tall{ grid-row:span 2; }
.pic figcaption{
  padding:11px 14px 13px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--panel);
}
@media (max-width:860px){
  .paellas{ grid-template-columns:1fr; }
  .paellas__pics{ grid-template-columns:1fr 1fr; }
  .pic--tall{ grid-row:auto; }
}

/* ---------- Galería de catering ---------- */
.sec--cat{ background:var(--ink-2); border-block:1px solid var(--line-soft); }
.gal{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  grid-auto-rows:210px; gap:14px;
}
.gal__i{
  margin:0; border-radius:var(--r); overflow:hidden; position:relative;
  background:var(--panel); grid-row:span 1;
}
.gal__i--tall{ grid-row:span 2; }
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal__i:hover img{ transform:scale(1.05); }
.gal__i figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 14px 12px;
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.86));
}
@media (max-width:560px){
  .gal{ grid-template-columns:1fr 1fr; grid-auto-rows:150px; gap:10px; }
}

/* ---------- Boda ---------- */
.boda{ padding:clamp(70px,8.5vw,118px) 0; }
.boda__in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4.5vw,60px); align-items:center; }
.boda__pic{ margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.boda__pic img{ width:100%; }
.boda__copy h2{ font-size:clamp(2.4rem,5.4vw,3.6rem); margin-bottom:1.2rem; }
.boda__copy>p{ color:var(--muted); }
.boda__note{
  margin:1.4rem 0 1.8rem !important; padding-left:16px;
  border-left:3px solid var(--flash); color:var(--cream) !important; font-weight:500;
}
@media (max-width:820px){ .boda__in{ grid-template-columns:1fr; } .boda__pic{ max-width:420px; } }

/* ---------- Otras líneas ---------- */
.sec--otras{ background-color:var(--ink-2); border-block:1px solid var(--line-soft); }
.chips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.chips li{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:20px 20px 22px; transition:border-color .2s ease;
}
.chips li:hover{ border-color:var(--cyan); }
.chips b{
  display:block; font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:1.45rem; text-transform:uppercase; margin-bottom:.3rem;
}
.chips span{ color:var(--muted); font-size:.92rem; }
.chips__note{ text-align:center; margin-top:1.6rem !important; color:var(--muted); font-size:.92rem; }

/* ---------- Equipo ---------- */
.equipo{ padding:clamp(70px,8.5vw,118px) 0; }
.equipo__in{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4.5vw,60px); align-items:center; }
.equipo__copy h2{ font-size:clamp(2.4rem,5.4vw,3.6rem); margin-bottom:1.2rem; }
.equipo__copy>p{ color:var(--muted); margin-bottom:1.9rem; }
.equipo__pic{ margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.equipo__pic img{ width:100%; }
@media (max-width:820px){ .equipo__in{ grid-template-columns:1fr; } .equipo__pic{ max-width:420px; } }

/* ---------- Formulario ---------- */
.sec--form{ background-color:var(--ink-2); border-block:1px solid var(--line-soft); }
.form-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,58px); align-items:start; }
.form-intro h2{ font-size:clamp(2.4rem,5.4vw,3.4rem); margin-bottom:1.1rem; }
.form-intro>p{ color:var(--muted); }
.form-intro__list{ margin-top:2rem; display:grid; gap:1.05rem; }
.form-intro__list li{ padding-left:1.7rem; position:relative; }
.form-intro__list li::before{
  content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%;
  background:var(--flash);
}
.form-intro__list b{ display:block; font-size:.98rem; }
.form-intro__list span{ color:var(--muted); font-size:.9rem; }

.form-panel{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px); box-shadow:var(--shadow);
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .f-row{ grid-template-columns:1fr; } }

.f{ display:block; margin-bottom:14px; border:0; padding:0; min-width:0; }
.f>span,.f legend>span{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream); margin-bottom:.5rem;
}
.f i{ font-style:normal; text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted); }
.f input,.f select,.f textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--cream);
  background:var(--ink); border:1px solid var(--line); border-radius:11px;
  padding:.78em .9em; transition:border-color .18s ease, box-shadow .18s ease;
}
.f textarea{ resize:vertical; min-height:84px; }
.f input::placeholder,.f textarea::placeholder{ color:#6b666c; }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(39,180,186,.18);
}
.f select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
/* El date de iOS/Android trae su propio ícono claro; se fuerza legible en oscuro. */
.f input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.75); cursor:pointer; }

.f--checks legend{ padding:0; margin-bottom:.2rem; }
.checks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.chk{ display:flex; align-items:center; gap:.6em; cursor:pointer;
  background:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:.62em .78em; font-size:.9rem; transition:border-color .18s ease, background .18s ease;
}
.chk:hover{ border-color:rgba(255,255,255,.24); }
.chk input{ appearance:none; width:17px; height:17px; flex:none; margin:0; cursor:pointer;
  border:1.5px solid var(--line); border-radius:5px; background:transparent;
  transition:background .16s ease, border-color .16s ease;
}
.chk input:checked{ background:var(--flash); border-color:var(--flash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}
.chk:has(input:checked){ border-color:var(--flash); background:rgba(229,36,90,.09); }

.f-error{
  display:none; margin:0 0 12px !important; padding:.7em .9em; border-radius:10px;
  background:rgba(229,36,90,.13); border:1px solid rgba(229,36,90,.4);
  color:#ffb9cb; font-size:.9rem;
}
.f-error.is-on{ display:block; }
.f-note{ margin-top:.9rem !important; font-size:.82rem; color:var(--muted); text-align:center; }

@media (max-width:860px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------- CTA final ---------- */
.cta{ padding:clamp(64px,8vw,104px) 0; text-align:center; position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; left:50%; top:0; translate:-50% 0;
  width:min(88vw,760px); aspect-ratio:1; border-radius:50%;
  background:rgba(229,36,90,.16); filter:blur(90px); pointer-events:none;
}
.cta__in{ position:relative; z-index:1; }
.cta__logo{ width:130px; height:130px; border-radius:50%; margin:0 auto 22px; }
.cta h2{ font-size:clamp(2.3rem,5.6vw,3.6rem); margin-bottom:.9rem; }
.cta>.wrap>p,.cta__in>p{ color:var(--muted); max-width:48ch; margin-inline:auto; }
.cta__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:2rem; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line-soft); padding:36px 0 96px; background:var(--ink-2); }
.foot__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.foot__brand{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.15rem;
  text-transform:uppercase; letter-spacing:.02em; margin-right:auto !important;
}
.foot__brand i{ font-style:normal; color:var(--flash); }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot__links a{ display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-size:.9rem; color:var(--muted); }
.foot__links a:hover{ color:var(--cream); }
.foot__copy{ width:100%; font-size:.8rem; color:#6b666c; padding-top:14px; border-top:1px solid var(--line-soft); }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:70;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#1fa855; color:#fff; box-shadow:0 14px 30px -12px rgba(0,0,0,.8);
  transition:transform .2s ease, background .2s ease;
}
.wa-fab svg{ width:27px; height:27px; }
.wa-fab:hover{ transform:scale(1.07); background:#23bd5f; }

/* ---------- Revelado ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}