/* Gespok · estilo.css
   Hermano de Gespoint (mismas tipografías y trazo), con acento propio: frambuesa
   sobre crema de vainilla. Titulares Bricolage Grotesque, cursiva Instrument Serif. */

:root{
  color-scheme: light;
  --crema:#FFF9F3;
  --papel:#FFFFFF;
  --vainilla:#FBEFE2;
  --linea:#EAD9C8;
  --tinta:#2A1A1F;
  --tinta-2:#5E4A50;
  --oscuro:#2A1A1F;
  --oscuro-2:#3A2630;
  --oscuro-texto:#E9D9DC;
  --fram:#E8567A;
  --fram-deep:#B42350;
  --fram-claro:#FFDDE6;
  --caramelo:#F0874A;
  --fd:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --fs:"Instrument Serif",Georgia,"Times New Roman",serif;
  --fb:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --maxw:1180px;
  --sec:clamp(64px,8vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--crema); color:var(--tinta); font-family:var(--fb); font-size:1.0625rem; line-height:1.6; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--fd); font-weight:700; letter-spacing:-.028em; line-height:1.05; margin:0; text-wrap:balance}
em{font-family:var(--fs); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--fram-deep)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px)}

:focus-visible{outline:3px solid var(--fram-deep); outline-offset:3px; border-radius:4px}
.oscuro :focus-visible{outline-color:var(--fram-claro)}
.skip{position:absolute; left:-999px; top:8px; background:var(--tinta); color:var(--crema); padding:10px 16px; border-radius:6px; z-index:100}
.skip:focus{left:12px}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; line-height:1.1; padding:15px 24px; border-radius:10px; border:2px solid var(--fram-deep); background:var(--fram-deep); color:#fff; text-decoration:none; transition:background .15s, transform .15s}
.btn:hover{background:#9A1C42; border-color:#9A1C42}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 16px; font-size:.95rem}
.btn-claro{background:var(--crema); color:var(--tinta); border-color:var(--crema)}
.btn-claro:hover{background:#fff; border-color:#fff}
.lnk{font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; text-decoration-color:var(--fram)}
.lnk:hover{text-decoration-color:currentColor}

/* cabecera */
.top{position:sticky; top:0; z-index:40; background:var(--crema); border-bottom:1px solid var(--linea)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px}
.marca{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.marca svg{width:34px; height:34px; flex:none}
.marca span{font-family:var(--fd); font-weight:800; font-size:1.5rem; letter-spacing:-.045em; line-height:1}
.nav{display:flex; gap:26px; font-weight:600; font-size:.97rem}
.nav a{text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--fram)}
@media(max-width:760px){.nav{display:none}}

.eyebrow{display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fram-deep); margin-bottom:16px}
.oscuro .eyebrow{color:var(--fram-claro)}

/* portada */
.hero{position:relative; overflow:hidden; padding:clamp(36px,5vw,72px) 0 clamp(56px,7vw,96px)}
.hero::before{content:""; position:absolute; left:-10%; top:-20%; width:min(60vw,720px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 40%, var(--fram-claro), transparent 68%); opacity:.7; pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(28px,4vw,64px); align-items:center}
.hero h1{font-size:clamp(2.6rem,5.8vw,4.9rem); font-weight:800; letter-spacing:-.04em; line-height:.97}
.hero h1 em{font-size:1.06em}
.hero .lead{margin-top:24px; max-width:29em; font-size:clamp(1.08rem,1.5vw,1.25rem); color:var(--tinta-2)}
.acciones{margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.nota{margin-top:26px; max-width:30em; font-size:.93rem; color:var(--tinta-2); border-left:3px solid var(--fram); padding-left:14px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* marco de captura */
.ventana{background:#17101a; border-radius:14px; padding:0; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -20px rgba(42,26,31,.45), 0 4px 10px rgba(42,26,31,.12); overflow:hidden}
.ventana .barra{display:flex; gap:6px; padding:10px 14px; background:#241a27}
.ventana .barra i{width:10px; height:10px; border-radius:50%; background:#4a3a4f}
.ventana img{width:100%}
.hero-vis{transform:rotate(1.2deg)}
@media(max-width:900px){.hero-vis{transform:none}}

/* problemas */
.problemas{padding:var(--sec) 0; background:var(--papel); border-block:1px solid var(--linea)}
.cab{max-width:34em; margin-bottom:clamp(32px,4vw,52px)}
.cab h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.cab p{margin-top:16px; color:var(--tinta-2); font-size:1.1rem}
.prob{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.prob li{background:var(--crema); border:1px solid var(--linea); border-radius:16px; padding:clamp(22px,2.6vw,32px)}
.prob b{display:block; font-family:var(--fs); font-style:italic; font-weight:400; font-size:2.6rem; line-height:1; color:var(--fram-deep); margin-bottom:12px}
.prob h3{font-size:1.4rem; margin-bottom:10px}
.prob p{color:var(--tinta-2); font-size:1rem}
@media(max-width:860px){.prob{grid-template-columns:1fr}}

/* secciones con captura */
.sec{padding:var(--sec) 0}
.sec.alt{background:var(--vainilla); border-block:1px solid var(--linea)}
.par{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,4.5vw,72px); align-items:center}
.par.inv{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.par.inv .txt{order:2}
.par h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.par .txt p{margin-top:16px; color:var(--tinta-2)}
.par ul{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.par li{position:relative; padding-left:26px; font-weight:500}
.par li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:12px; border-radius:50%; background:var(--fram)}
.ventana.sm .barra{padding:8px 12px}
@media(max-width:900px){
  .par,.par.inv{grid-template-columns:1fr}
  .par.inv .txt{order:0}
}
.pie-cap{margin-top:12px; font-size:.88rem; color:var(--tinta-2)}

/* sello ejemplo */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.chips span{font-size:.88rem; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--papel); border:1px solid var(--linea)}

/* pasteleros */
.oscuro{background:var(--oscuro); color:var(--oscuro-texto)}
.pasteleros{padding:var(--sec) 0}
.pasteleros .caja{max-width:46em}
.pasteleros h2{font-size:clamp(2rem,4.4vw,3.4rem); color:#fff}
.pasteleros h2 em{color:var(--fram-claro)}
.pasteleros p{margin-top:20px; font-size:1.12rem}

/* preguntas */
.faq{padding:var(--sec) 0}
.faq-l{max-width:46em}
details{border-bottom:1px solid var(--linea); padding:4px 0}
summary{cursor:pointer; list-style:none; font-family:var(--fd); font-weight:700; font-size:1.2rem; letter-spacing:-.02em; padding:18px 36px 18px 0; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.6rem; font-weight:500; color:var(--fram-deep)}
details[open] summary::after{content:"\2212"}
details p{padding:0 0 20px; color:var(--tinta-2); max-width:40em}

/* demo */
.demo{padding:var(--sec) 0; text-align:center}
.demo h2{font-size:clamp(2.1rem,5vw,3.8rem); color:#fff; max-width:14em; margin:0 auto}
.demo h2 em{color:var(--fram-claro)}
.demo p{margin:20px auto 0; max-width:34em; font-size:1.1rem}
.demo .acciones{justify-content:center}
/* PRECIOS: aqui iran los precios de Gespok cuando se definan */

/* pie */
.pie{background:var(--oscuro); color:var(--oscuro-texto); border-top:1px solid rgba(255,255,255,.12); padding:40px 0}
.pie a{text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie .fila{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 32px}
.pie .marca span{color:#fff}
.pie .partes{display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.95rem}
.pie .fin{margin-top:24px; font-size:.85rem; opacity:.75}

/* aparecer al bajar */
.js .rev{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.js .rev.v{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rev{opacity:1; transform:none; transition:none}
  .btn{transition:none}
  .hero-vis{transform:none}
}