/* ==========================================================================
   credicosmos — sistema de diseño
   Basado en AFV_BRANDBOOK_CREDICOSMOS (Sol Menguante, 2026)

   Paleta oficial
     Coral   PANTONE 164 C   #FF7A56   principal
     Crema   PANTONE 9064 C  #F1EFE0   principal
     Ciruela PANTONE 2695 C  #3B1A47   secundario
     Menta   PANTONE 331 C   #A7F0DA   secundario

   Regla de accesibilidad (WCAG AA):
     El coral NO se usa como color de texto sobre crema (contraste 2.22:1).
     Para acentuar se usa el resaltador del brandbook: fondo coral + texto
     ciruela (5.73:1). Todo el texto corrido va en ciruela sobre crema
     (12.75:1). Crema sobre ciruela: 12.75:1. Ciruela sobre menta: 11.31:1.

   Tipografías
     Bogart  — títulos, cabezotes y frases cortas
     Archivo — párrafos, interfaz y etiquetas
   ========================================================================== */

/* ---------- tipografías ---------- */
@font-face{font-family:'Bogart';src:url('fonts/bogart-300.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Bogart';src:url('fonts/bogart-300i.woff2') format('woff2');
  font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Bogart';src:url('fonts/bogart-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bogart';src:url('fonts/bogart-400i.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Bogart';src:url('fonts/bogart-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-300.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* marca */
  --coral:#FF7A56;
  --cream:#F1EFE0;
  --plum:#3B1A47;
  --mint:#A7F0DA;

  /* derivados de apoyo (solo interfaz, nunca sustituyen a la paleta) */
  --cream-hi:#F8F7EF;      /* tarjetas sobre crema */
  --cream-lo:#E7E4D2;      /* líneas y separadores */
  --plum-70:rgba(59,26,71,.72);   /* texto secundario */
  --plum-45:rgba(59,26,71,.45);   /* texto terciario */
  --plum-12:rgba(59,26,71,.12);   /* bordes */
  --plum-06:rgba(59,26,71,.06);   /* fondos suaves */
  --coral-ink:#C6421F;     /* solo para iconos/trazos gruesos sobre crema */

  --serif:'Bogart',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-sm:12px; --r-md:18px; --r-lg:28px; --r-xl:40px; --r-pill:999px;
  --shadow:0 1px 2px rgba(59,26,71,.05), 0 12px 32px -12px rgba(59,26,71,.16);
  --shadow-lg:0 2px 4px rgba(59,26,71,.06), 0 28px 64px -24px rgba(59,26,71,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--plum);
  font-weight:400;
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--coral);color:var(--plum)}
:focus-visible{outline:2.5px solid var(--plum);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.06;
  letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.6rem,1.6rem + 4.4vw,5.1rem)}
h2{font-size:clamp(2rem,1.35rem + 2.9vw,3.5rem)}
h3{font-size:clamp(1.3rem,1.16rem + .6vw,1.6rem);line-height:1.16}
h4{font-size:1.06rem;line-height:1.25}
/* la cursiva de Bogart es el gesto de marca: úsala en una parte del titular */
h1 em,h2 em,h3 em,.serif em{font-style:italic;font-weight:300}
.serif{font-family:var(--serif)}
p{text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1rem + .42vw,1.32rem);line-height:1.55;
  color:var(--plum-70);font-weight:300}

/* ---------- resaltador (recurso central del brandbook) ---------- */
mark,.mk{background:var(--coral);color:var(--plum);
  padding:.04em .22em .1em;border-radius:.14em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mk-mint{background:var(--mint)}
.mk-cream{background:var(--cream)}
.mk-plum{background:var(--plum);color:var(--cream)}

/* ---------- etiquetas / píldoras ---------- */
.tag{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;line-height:1;
  padding:.62em 1.05em;border-radius:var(--r-pill);white-space:nowrap}
.tag-mint{background:var(--mint);color:var(--plum)}
.tag-plum{background:var(--plum);color:var(--cream)}
.tag-coral{background:var(--coral);color:var(--plum)}
.tag-line{border:1.5px solid var(--plum-12);color:var(--plum-70);background:transparent}

.eyebrow{display:inline-flex;align-items:center;gap:.62em;
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--plum-70);line-height:1;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--coral);
  border-radius:2px;flex:none}
.eyebrow.on-plum{color:rgba(241,239,224,.72)}
.eyebrow.on-plum::before{background:var(--coral)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.015em;
  padding:1.02em 1.9em;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;text-align:center;line-height:1;
  transition:transform .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* coral + texto ciruela = 5.73:1 */
.btn-primary{background:var(--coral);color:var(--plum);box-shadow:0 10px 24px -12px rgba(255,122,86,.9)}
.btn-primary:hover{background:#FF8E6E;box-shadow:0 16px 32px -14px rgba(255,122,86,1)}
.btn-plum{background:var(--plum);color:var(--cream)}
.btn-plum:hover{background:#4E2560}
.btn-mint{background:var(--mint);color:var(--plum)}
.btn-mint:hover{background:#BDF5E4}
.btn-line{background:transparent;color:var(--plum);border-color:var(--plum-12)}
.btn-line:hover{border-color:var(--plum);background:var(--plum-06)}
.btn-line-cream{background:transparent;color:var(--cream);border-color:rgba(241,239,224,.32)}
.btn-line-cream:hover{border-color:var(--cream);background:rgba(241,239,224,.1)}
.btn-sm{padding:.78em 1.4em;font-size:.82rem}

/* ---------- superficies ---------- */
.card{background:var(--cream-hi);border-radius:var(--r-lg);padding:2rem;
  border:1px solid var(--plum-12)}
.card-plum{background:var(--plum);color:var(--cream);border-color:transparent}
.card-coral{background:var(--coral);color:var(--plum);border-color:transparent}
.card-mint{background:var(--mint);color:var(--plum);border-color:transparent}
.on-plum{background:var(--plum);color:var(--cream)}
.on-plum h1,.on-plum h2,.on-plum h3,.on-plum h4{color:var(--cream)}
.on-plum .lead{color:rgba(241,239,224,.74)}

/* ---------- isotipo de fondo (marca de agua) ---------- */
.iso-bg{position:absolute;pointer-events:none;user-select:none;z-index:0;
  color:var(--coral);opacity:.09}
.iso-bg svg{width:100%;height:auto;display:block}

/* ---------- globo de diálogo ---------- */
.bubble{position:relative;display:inline-block;font-family:var(--serif);
  font-size:clamp(1.05rem,.98rem + .4vw,1.32rem);line-height:1.24;
  padding:1.05em 1.35em;border-radius:26px;background:var(--cream-hi);color:var(--plum)}
.bubble::after{content:"";position:absolute;width:18px;height:18px;
  background:inherit;bottom:-6px;left:30px;border-radius:0 0 6px 0;transform:rotate(22deg)}
.bubble-coral{background:var(--coral)}
.bubble-right::after{left:auto;right:30px;transform:rotate(-22deg);border-radius:0 0 0 6px}

/* ---------- logo ----------
   Proporciones exactas del brandbook: isotipo 1.7542:1, wordmark 7.0493:1.
   Se fijan con aspect-ratio para no deformar nunca el logo. */
.logo{display:inline-flex;align-items:center;gap:.62em}
/* las proporciones viven en la clase, no en el contenedor: así el logo nunca
   se deforma aunque se use fuera de .logo */
.logo-iso{aspect-ratio:1.7542;height:26px;width:auto;flex:none;color:var(--coral)}
.logo-word{aspect-ratio:7.0493;height:19px;width:auto;flex:none;color:var(--plum)}
.iso{aspect-ratio:1.7542;width:100%;height:auto;display:block}
.logo.on-dark .logo-word{color:var(--cream)}
.logo.mono-cream .logo-iso,.logo.mono-cream .logo-word{color:var(--cream)}
.logo-word.on-plum-word{color:var(--cream)}
.logo-slogan{font-family:var(--sans);font-weight:400;letter-spacing:.01em;
  color:var(--plum-70);display:block}

/* ---------- animación de entrada ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Cabecera y pie compartidos
   ========================================================================== */
.announce{background:var(--cream);color:var(--plum-70);text-align:center;
  border-bottom:1px solid var(--plum-12);
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:400;
  padding:.75rem 1rem;line-height:1.4}
.announce b{color:var(--plum);font-weight:700}
.announce a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--coral);text-decoration-thickness:2px}

/* Cabecera en cápsula flotante: no toca los bordes, flota sobre el contenido.
   El velo degradado evita que el texto que pasa por debajo se vea suelto
   en la franja que queda por encima de la cápsula. */
/* El velo va siempre puesto: sobre crema es invisible (crema sobre crema) y en
   cuanto pasa contenido por debajo lo difumina. Así no depende de JavaScript. */
.nav{position:sticky;top:0;z-index:60;padding:.85rem 0;
  background:linear-gradient(to bottom,var(--cream) 62%,rgba(241,239,224,0));
  transition:padding .3s var(--ease)}
.nav .wrap{width:min(1240px,95vw);position:relative}
.nav .row{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  min-height:64px;padding:0 .7rem 0 1.4rem;border-radius:var(--r-pill);
  background:var(--cream-hi);border:1px solid var(--plum-12);
  box-shadow:0 1px 2px rgba(59,26,71,.04),0 14px 34px -18px rgba(59,26,71,.28);
  transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.nav.stuck{padding:.5rem 0}
.nav.stuck .row{box-shadow:0 2px 6px rgba(59,26,71,.07),0 18px 40px -18px rgba(59,26,71,.4)}
@supports (backdrop-filter:blur(1px)){
  .nav .row{background:rgba(248,247,239,.82);
    backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)}
}
.nav .logo .logo-iso{height:26px}
.nav .logo .logo-word{height:19px}
.nav nav{display:flex;align-items:center;gap:1.6rem}
.nav nav a{font-size:.875rem;font-weight:400;color:var(--plum-70);
  transition:color .18s var(--ease);white-space:nowrap}
.nav nav a:hover{color:var(--plum)}
.nav nav a.btn{color:var(--plum)}
.nav nav a.btn-plum{color:var(--cream)}
.menu-toggle{display:none;background:transparent;border:0;cursor:pointer;
  font-size:1.5rem;line-height:1;padding:.4rem .2rem;color:var(--plum)}

@media (max-width:1040px){
  .nav nav{gap:1.15rem}
  .nav nav a{font-size:.82rem}
}
@media (max-width:900px){
  .menu-toggle{display:block}
  .nav .row{padding:0 .6rem 0 1.1rem;min-height:58px}
  .nav nav{position:absolute;inset:calc(100% + .5rem) 0 auto;background:var(--cream-hi);
    flex-direction:column;align-items:stretch;gap:0;padding:.7rem 0 1rem;
    border:1px solid var(--plum-12);border-radius:var(--r-lg);display:none;
    box-shadow:0 22px 44px -22px rgba(59,26,71,.55)}
  .nav.open nav{display:flex}
  .nav nav a{padding:.9rem 1.4rem;font-size:1rem;border-bottom:1px solid var(--plum-06)}
  .nav nav a:last-of-type{border-bottom:0}
  .nav nav a.btn{margin:.8rem 1.1rem 0;justify-content:center;border-bottom:0}
  .nav nav a.btn+.btn{margin-top:.55rem}
}

/* ---------- riel de progreso de secciones ---------- */
.rail{position:fixed;right:max(1.1rem,2vw);top:50%;transform:translateY(-50%);
  z-index:55;display:flex;flex-direction:column;gap:.95rem;align-items:flex-end}
.rail a{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  color:var(--plum);line-height:1}
.rail .lbl{font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--plum);color:var(--cream);padding:.5em .8em;border-radius:var(--r-pill);
  opacity:0;transform:translateX(8px);pointer-events:none;white-space:nowrap;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.rail .dot{width:8px;height:8px;border-radius:50%;background:var(--plum);opacity:.22;
  flex:none;transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.rail a:hover .lbl,.rail a:focus-visible .lbl{opacity:1;transform:none}
/* la etiqueta fija de la sección activa solo cabe en pantallas anchas;
   más abajo se muestra al pasar el mouse para no taparse con el contenido */
@media (min-width:1420px){.rail a.on .lbl{opacity:1;transform:none}}
.rail a:hover .dot{opacity:.55}
.rail a.on .dot{opacity:1;background:var(--coral);transform:scale(1.55)}
.rail.hide{opacity:0;pointer-events:none}
.rail{transition:opacity .3s var(--ease)}
@media (max-width:1180px){.rail{display:none}}

/* ---------- pista de "baja para descubrir" ---------- */
.scroll-hint{display:inline-flex;align-items:center;gap:.6em;font-size:.66rem;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-45)}
.scroll-hint .arw{display:inline-block;animation:bob 1.9s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.scroll-hint .arw{animation:none}}

footer.site{background:var(--plum);color:rgba(241,239,224,.72);
  padding:4.5rem 0 2.2rem;position:relative;overflow:hidden}
footer.site .top{display:grid;grid-template-columns:1.25fr 2fr;gap:3rem;
  padding-bottom:2.6rem;border-bottom:1px solid rgba(241,239,224,.14);position:relative;z-index:1}
footer.site .logo .logo-iso{height:30px}
footer.site .logo .logo-word{height:22px}
footer.site .tag-line-txt{margin-top:1.15rem;max-width:38ch;font-size:.93rem;
  line-height:1.62;font-weight:300}
footer.site .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
footer.site h4{font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin-bottom:1.05rem}
footer.site .cols a{display:block;font-size:.9rem;padding:.34rem 0;
  color:rgba(241,239,224,.72);transition:color .18s var(--ease)}
footer.site .cols a:hover{color:var(--cream)}
footer.site .legal{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;
  justify-content:space-between;padding-top:1.8rem;font-size:.78rem;
  color:rgba(241,239,224,.55);position:relative;z-index:1}
footer.site .legal a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(241,239,224,.3)}
footer.site .legal a:hover{color:var(--cream)}
footer.site .iso-bg{color:var(--coral);opacity:.1;right:-6%;bottom:-42%;width:min(460px,52vw)}
@media (max-width:860px){
  footer.site .top{grid-template-columns:1fr;gap:2.4rem}
  footer.site .cols{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem}
}
@media (max-width:460px){footer.site .cols{grid-template-columns:1fr}}

/* ==========================================================================
   Páginas de texto (legales, sobre nosotros, trabaja con nosotros)
   ========================================================================== */
.page-head{background:var(--cream);color:var(--plum);padding:4.2rem 0 3.4rem;
  position:relative;overflow:hidden;border-bottom:1px solid var(--plum-12)}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{color:var(--plum);font-size:clamp(2.3rem,1.6rem + 3vw,4rem);max-width:18ch}
.page-head .lead{color:var(--plum-70);margin-top:1.2rem;max-width:60ch}
.page-head .iso-bg{color:var(--coral);opacity:.09;right:-4%;top:-34%;width:min(380px,44vw)}
.page-head .back{display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum-45);margin-bottom:1.6rem}
.page-head .back:hover{color:var(--plum)}

.prose{padding:4rem 0 5.5rem}
.prose .wrap{max-width:760px}
.prose h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);margin:2.8rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.18rem;margin:2rem 0 .6rem}
.prose p,.prose li{color:var(--plum-70);margin-bottom:1rem;font-size:1rem}
.prose strong,.prose b{color:var(--plum);font-weight:700}
.prose ul,.prose ol{margin:0 0 1.4rem 1.25rem}
.prose li{margin-bottom:.5rem}
.prose a:not(.btn){color:var(--plum);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--coral);text-decoration-thickness:2px}
.prose hr{border:0;border-top:1px solid var(--plum-12);margin:2.8rem 0}
.prose .note{background:var(--cream-hi);border:1px solid var(--plum-12);
  border-left:4px solid var(--coral);border-radius:var(--r-md);
  padding:1.3rem 1.5rem;margin:1.8rem 0}
.prose .note p:last-child{margin-bottom:0}
.prose .updated{font-size:.82rem;color:var(--plum-45);
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}