/* ═══════════════════════════════════════════════════════
   CEPHUR — Sistema visual
   Paleta tomada del branding real de la clienta:
   · Verde salvia #5C8370 — medido de su flyer (80% de la pieza)
   · Crema — texto de su flyer
   · Azul cobalto #0C1FA1 — logo institucional, se usa SOLO en el logo
   ═══════════════════════════════════════════════════════ */

:root{
  /* Superficies */
  --papel:#EAF2F8;  /* celeste mas marcado, pedido explicito de la clienta */
  --crema:#E1EBEA;  /* crema enfriado mas hacia celeste */
  --arena:#E9E3D4;
  --piedra:#D8D0BE;

  /* Tinta */
  --espresso:#26302A;
  --tinta:#3F4A43;
  --grafito:#65706A;

  /* Marca — de su flyer */
  --salvia:#52765F;        /* verde de su flyer (#5C8370) oscurecido lo mínimo para pasar WCAG AA */
  --salvia-hover:#456352;
  --salvia-claro:#8FA99A;
  --oro:#806438;
  --oro-luz:#C9A874;

  /* Institucional — solo logo */
  --cobalto:#0C1FA1;

  --nav-h:76px;
}

*{-webkit-font-smoothing:antialiased;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:hidden;
  line-height:1.6;
}
img{max-width:100%;display:block}

.display{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 40,'WONK' 1}
.lead{line-height:1.75}
.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
::selection{background:var(--arena)}

/* ── Grano de película (fijo, sin coste de repaint) ── */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Bloques con fondo oscuro: el texto va claro por defecto ── */
.sobre-oscuro{color:var(--papel)}
.sobre-oscuro h1,.sobre-oscuro h2,.sobre-oscuro h3,.sobre-oscuro h4{color:var(--papel)}

/* ── Foco visible propio ── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--salvia);outline-offset:3px;border-radius:4px
}
.sobre-oscuro a:focus-visible,.sobre-oscuro button:focus-visible{outline-color:var(--oro-luz)}
.skip{position:absolute;left:-9999px;top:0;z-index:70}
.skip:focus{
  left:1rem;top:1rem;padding:.75rem 1.25rem;border-radius:9999px;
  background:var(--espresso);color:var(--papel);font-size:14px;text-decoration:none
}

/* Retrato: la cara ocupa 16%-89% del archivo; estos valores la muestran entera */
.foto-retrato{object-fit:cover;object-position:50% 50%}
@media(min-width:1024px){.foto-retrato{object-position:50% 50%}}

/* ── Scroll reveal ── */
.rv{
  opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.32,.72,0,1),
             transform .9s cubic-bezier(.32,.72,0,1),
             filter .9s cubic-bezier(.32,.72,0,1)
}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}

.draw{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.32,.72,0,1)}
.draw.in{transform:scaleX(1)}

/* ── Botón isla con icono anidado ── */
.isla{
  transition:transform .5s cubic-bezier(.32,.72,0,1),background-color .4s cubic-bezier(.32,.72,0,1);
  text-decoration:none
}
.isla:active{transform:scale(.975)}
.isla .pip{transition:transform .5s cubic-bezier(.32,.72,0,1)}
.isla:hover .pip{transform:translate(3px,-1px) scale(1.06)}

/* ── Nav ── */
.nav-shell{
  border-radius:9999px;padding:6px;
  background:rgba(253,251,247,.55);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 12px 34px -20px rgba(38,48,42,.4)
}
.nav-inner{border-radius:9999px;background:rgba(253,251,247,.86)}
.nav-link{position:relative;text-decoration:none;color:var(--grafito);transition:color .3s cubic-bezier(.32,.72,0,1)}
.nav-link:hover{color:var(--espresso)}
.nav-link[aria-current="page"]{color:var(--espresso);font-weight:500}
.nav-link[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:var(--salvia)
}

/* Menú móvil */
.menu-movil{
  position:fixed;inset:0;z-index:52;
  background:rgba(253,251,247,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;transition:opacity .5s cubic-bezier(.32,.72,0,1),visibility .5s
}
.menu-movil.abierto{opacity:1;visibility:visible}
.menu-movil a{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.32,.72,0,1),transform .6s cubic-bezier(.32,.72,0,1)
}
.menu-movil.abierto a{opacity:1;transform:none}
.menu-movil.abierto a:nth-child(1){transition-delay:.08s}
.menu-movil.abierto a:nth-child(2){transition-delay:.14s}
.menu-movil.abierto a:nth-child(3){transition-delay:.20s}
.menu-movil.abierto a:nth-child(4){transition-delay:.26s}
.menu-movil.abierto a:nth-child(5){transition-delay:.32s}

.hamb span{
  display:block;width:22px;height:1.5px;background:var(--espresso);border-radius:2px;
  transition:transform .45s cubic-bezier(.32,.72,0,1),opacity .3s ease
}
.hamb span + span{margin-top:6px}
.hamb.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamb.x span:nth-child(2){opacity:0}
.hamb.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ── Doble bisel ── */
.bisel{border-radius:2rem;padding:8px;background:rgba(38,48,42,.045);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.bisel-core{border-radius:calc(2rem - 8px);background:var(--papel);box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}
.bisel-sm{border-radius:1.5rem;padding:6px;background:rgba(38,48,42,.04)}
.bisel-sm-core{border-radius:calc(1.5rem - 6px);background:var(--papel);box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}

/* ── Marquee ── */
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:slide 46s linear infinite;display:flex;width:max-content}
.marquee-wrap:hover .marquee{animation-play-state:paused}

@keyframes latido{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.latido{animation:latido 3.4s cubic-bezier(.4,0,.6,1) infinite}

/* ── Acordeón ── */
.acc-body{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .7s cubic-bezier(.32,.72,0,1),opacity .5s ease}
.acc.open .acc-body{max-height:420px;opacity:1}
.acc.open .acc-mas{transform:rotate(45deg)}
.acc-mas{transition:transform .5s cubic-bezier(.32,.72,0,1)}

/* ── Formulario ── */
.campo{
  width:100%;border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-family:inherit;
  background:var(--crema);color:var(--espresso);outline:none;
  transition:box-shadow .3s cubic-bezier(.32,.72,0,1)
}
.campo:focus{box-shadow:0 0 0 2px rgba(92,131,112,.35)}
.campo::placeholder{color:#9AA39D}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .draw{transform:none}
  .marquee{animation:none}
  .latido{animation:none}
  .menu-movil a{opacity:1;transform:none}
}