@font-face{ font-family:'Diamend'; src:url('fonts/Diamend-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Handineat'; src:url('fonts/Handineat.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Rellion'; src:url('fonts/Rellion-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  /* paleta oficial del manual de marca — sin variantes "-deep" inventadas.
     ink es el único color que se usa para texto/acentos; los pasteles son solo relleno. */
  --cream:#FDFBF4;
  --cream-2:#EEDAEA; /* Pantone 7436C — predomina en secciones alternas */
  --ink:#5A5B5B; --ink-soft:#8A8A85;
  --sage:#C5D6CC;
  --sky:#CCD9E6;
  --tan:#E6D0B8;
  --blush:#E8D1C4;
  --pantone:#EEDAEA;
  --line:rgba(90,91,91,0.17); --shadow:rgba(90,91,91,0.2);
  --card:#FFFFFF;

  /* escala de espaciado — usar siempre uno de estos valores, nunca números sueltos */
  --sp-1:8px; --sp-2:14px; --sp-3:20px; --sp-4:28px; --sp-5:40px; --sp-6:56px; --sp-7:80px;
}
@media (prefers-color-scheme: dark){
  :root{
    --cream:#2B2926; --cream-2:#4A3345;
    --ink:#EDE7DA; --ink-soft:#B9B2A3;
    --sage:#8FAE9B; --sky:#8FADC7; --tan:#C7A06C; --blush:#CC9C90;
    --pantone:#4A3345;
    --line:rgba(237,231,218,0.16); --shadow:rgba(0,0,0,0.4);
    --card:#37332E;
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition-duration:.001ms !important;}
}
body{margin:0; background:var(--cream); color:var(--ink); font-family:'Rellion',-apple-system,'Segoe UI',sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px;}
.disp{font-family:'Diamend',Georgia,serif; font-weight:400;}
.title{font-family:'Handineat',ui-rounded,'Segoe UI',sans-serif; font-weight:700; margin:0; text-wrap:balance; color:var(--ink); line-height:1.15;}
.eyebrow{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); font-weight:400; display:inline-block; margin-bottom:var(--sp-2); opacity:.7;}

/* ritmo vertical consistente dentro de un bloque de texto */
.eyebrow + .title, .eyebrow + h1, .eyebrow + h2{margin-bottom:var(--sp-3);}
.title + .lede, h1 + .lede, h2 + .lede{margin-top:var(--sp-3);}
.lede + .lede{margin-top:var(--sp-3);}

/* fondo Pantone 7436C difuminado */
.pantone-field{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--cream);}
.pantone-blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.6; background:var(--pantone);}
@keyframes driftA{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-30px) scale(1.08);} }
@keyframes driftB{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-50px,30px) scale(1.05);} }
@keyframes driftC{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,40px) scale(1.1);} }

/* decorativos de marca */
.deco{position:absolute; pointer-events:none; user-select:none; z-index:1;}
@keyframes floatY{ 0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-16px) rotate(var(--r,0deg));} }
@keyframes floatX{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(12px);} }
@keyframes twinkle{ 0%,100%{transform:scale(1) rotate(0deg); opacity:.9;} 50%{transform:scale(1.14) rotate(8deg); opacity:1;} }
@keyframes rotateSlow{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.anim-float{animation:floatY 7s ease-in-out infinite;}
.anim-float-slow{animation:floatY 11s ease-in-out infinite;}
.anim-twinkle{animation:twinkle 4.5s ease-in-out infinite;}
.anim-rotate{animation:rotateSlow 50s linear infinite;}
/* en móvil los flotantes decorativos estorban al texto — se ocultan por default y cada página
   marca explícitamente (.deco-keep) los que sí caben sin encimarse */
@media (max-width:680px){
  .deco{display:none;}
  .deco.deco-keep{display:block;}
}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-pop{opacity:0; transform:scale(.9) rotate(var(--rr,0deg)); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1.3);}
.reveal-pop.is-visible{opacity:1; transform:scale(1) rotate(var(--rr,0deg));}

/* nav */
header.nav{position:sticky; top:0; z-index:80; background:color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:1120px; margin:0 auto; gap:12px;}
.brand-mark{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.brand-mark img{width:34px; height:34px;}
.brand-mark span{font-family:'Diamend',serif; font-size:19px; color:var(--ink);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:'Handineat',sans-serif; font-weight:700; border-radius:26px; border:none; cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;}
.btn-primary{background:var(--ink); color:var(--cream); padding:12px 22px; font-size:14px;}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px -14px var(--pantone), 0 10px 22px -10px var(--shadow);}
.btn-primary:active{transform:translateY(-1px) scale(.96); transition-duration:.1s;}
.btn-primary:focus-visible{outline:3px solid var(--ink); outline-offset:2px;}
.btn-lg{padding:16px 30px; font-size:17px;}
.btn-ghost{background:transparent; color:var(--ink); border:2px solid var(--ink); padding:12px 22px; font-size:14px;}
.btn-ghost.btn-lg{padding:14px 28px; font-size:17px;}
.btn-ghost:hover{transform:translateY(-3px); background:var(--ink); color:var(--cream);}
.cta-row{flex-wrap:wrap; gap:12px;}
.btn .arrow{display:inline-block; transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.btn:hover .arrow{transform:translateX(5px);}

/* enlaces internos — texto con más presencia que un link gris estándar, sin volverse un botón */
.cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.link-quiet{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Handineat',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--ink-soft); text-decoration-thickness:1.5px;
  text-underline-offset:4px; transition:text-decoration-color .2s ease, transform .2s ease;
}
.link-quiet:hover{text-decoration-color:var(--ink); transform:translateX(2px);}
.link-quiet:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;}
.link-quiet .arrow{display:inline-block; transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.link-quiet:hover .arrow{transform:translateX(4px);}

/* menú interactivo */
.menu-toggle{
  display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--line);
  color:var(--ink); font-family:'Handineat',sans-serif; font-weight:700; font-size:13.5px;
  padding:10px 16px; border-radius:22px; cursor:pointer;
}
.menu-toggle:hover{background:var(--card); border-color:var(--ink-soft);}
.menu-toggle .bars{display:inline-flex; flex-direction:column; gap:3px;}
.menu-toggle .bars span{width:15px; height:2px; background:var(--ink); display:block; transition:transform .2s ease, opacity .2s ease;}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.site-menu{border-bottom:1px solid var(--line); background:var(--cream); overflow:hidden; max-height:0; transition:max-height .35s ease;}
.site-menu.is-open{max-height:520px;}
.site-menu-inner{max-width:1120px; margin:0 auto; padding:var(--sp-4) 24px var(--sp-5); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
@media (max-width:680px){ .site-menu-inner{grid-template-columns:1fr; gap:var(--sp-4); padding:var(--sp-3) 24px var(--sp-4);} }
.menu-col{display:flex; flex-direction:column; gap:var(--sp-1);}
.menu-heading{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px;}
.menu-col a{font-family:'Handineat',sans-serif; font-size:15.5px; color:var(--ink); text-decoration:none; padding:6px 0;}
.menu-col a:hover{text-decoration:underline;}
.menu-soon{font-family:'Handineat',sans-serif; font-size:15.5px; color:var(--ink-soft); padding:6px 0; display:flex; align-items:baseline; gap:8px;}
.menu-soon em{font-family:'Rellion',sans-serif; font-style:normal; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; background:var(--cream-2); padding:2px 8px; border-radius:10px;}

/* CTA fijo en móvil */
.mobile-cta{
  display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:70;
  background:var(--ink); color:var(--cream); text-decoration:none;
  font-family:'Handineat',sans-serif; font-weight:700; font-size:15px;
  padding:15px 18px; border-radius:16px; text-align:center;
  box-shadow:0 14px 30px -10px var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mobile-cta:active{transform:scale(.96); box-shadow:0 8px 18px -10px var(--shadow);}
@media (max-width:680px){
  .mobile-cta{display:block;} body{padding-bottom:78px;}
  /* en móvil el CTA fijo de abajo ya cubre el WhatsApp — el nav solo necesita el menú */
  .nav-actions .btn-primary{display:none;}
  .brand-mark span{font-size:16px;}
}

/* migas de pan */
.breadcrumbs{font-size:12.5px; color:var(--ink-soft); padding:var(--sp-2) 0 0; display:flex; gap:8px; flex-wrap:wrap;}
.breadcrumbs a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; transition:color .2s ease;}
.breadcrumbs a:hover{color:var(--ink);}
.breadcrumbs span[aria-hidden]{color:var(--line);}
.breadcrumbs .current{color:var(--ink);}

section{padding:var(--sp-7) 0; position:relative;}
section.alt{background:var(--cream-2);}
h2.section-title{font-size:clamp(26px,3.6vw,38px); max-width:20ch; margin-bottom:var(--sp-3);}
.lede{font-size:18px; color:var(--ink-soft); max-width:60ch;}
.divider{display:block; width:100%; height:70px; margin-bottom:-1px;}

footer.site{padding:var(--sp-5) 0 100px; text-align:center; font-size:12px; color:var(--ink-soft); letter-spacing:.03em;}
footer.site a{color:var(--ink-soft); transition:color .2s ease;}
footer.site a:hover{color:var(--ink);}
.footer-links{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:var(--sp-3); font-size:13px;}
.footer-links a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}
@media (max-width:680px){ footer.site{padding-bottom:110px;} }

.simple-hero{padding:var(--sp-6) 0 var(--sp-1);}
.simple-hero h1{font-size:clamp(28px,4.6vw,42px); margin:var(--sp-1) 0 var(--sp-3);}

@media (max-width:680px){
  section{padding:var(--sp-6) 0;}
  .wrap, .wrap-narrow{padding:0 20px;}
}