/* 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}}
.top-acc{display:flex; align-items:center; gap:12px; flex:none}
.ingresar{font-weight:700; font-size:.97rem; text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; margin-right:4px}
.ingresar:hover{border-bottom-color:var(--fram)}
/* Acceso a Gespoint, el hermano punto de venta: lleva sus propios colores */
.ir-gespoint{--gp:#18181B; --gp-borde:#D9D4CC; display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 6px; border:1.5px solid var(--gp-borde); border-radius:999px; background:#fff; color:var(--gp); font-weight:700; font-size:.92rem; text-decoration:none; transition:border-color .15s, background .15s}
.ir-gespoint svg{width:26px; height:26px; flex:none}
.ir-gespoint:hover{border-color:var(--gp); background:#F4F1EC}
@media(max-width:760px){.ir-gespoint{padding:4px; gap:0}.ir-gespoint span{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 */
.precios{padding:var(--sec) 0; background:var(--vainilla); border-block:1px solid var(--linea)}
.selector{display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; margin-bottom:clamp(24px,3vw,36px); background:var(--papel); border:1px solid var(--linea); border-radius:99px}
.sel{font-family:var(--fb); font-weight:700; font-size:.95rem; padding:10px 18px; border:0; border-radius:99px; background:transparent; color:var(--tinta); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .15s, color .15s}
.sel[aria-pressed="true"]{background:var(--tinta); color:var(--crema)}
.sel-tag{background:var(--caramelo); color:var(--tinta); font-size:.75rem; padding:2px 9px; border-radius:99px; white-space:nowrap}
.sel:focus-visible{outline:3px solid var(--fram-deep); outline-offset:2px}
.planes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; gap:10px; background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:clamp(24px,3vw,36px)}
.plan .lab{font-family:var(--fb); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fram-deep)}
.plan .quien{min-height:4.8em; font-size:.98rem; color:var(--tinta-2)}
.plan .precio{display:flex; align-items:last baseline; gap:4px 10px; padding-top:22px; color:var(--tinta)}
.plan .precio b{position:relative; font-family:var(--fd); font-weight:800; font-size:clamp(2.2rem,3.4vw,2.9rem); letter-spacing:-.045em; line-height:1; white-space:nowrap}
.plan .precio span{font-family:var(--fs); font-style:italic; font-size:1.5rem; color:var(--tinta-2); white-space:nowrap}
.plan .desde{position:absolute; left:0; bottom:100%; font-family:var(--fb); font-weight:600; font-size:.95rem; letter-spacing:0; line-height:1; color:var(--tinta-2)}
.plan .iva{font-size:.92rem; min-height:3em; margin-bottom:14px; color:var(--tinta-2)}
.plan .btn{margin-top:auto; width:100%}
.btn-sec{background:transparent; color:var(--fram-deep)}
.btn-sec:hover{background:var(--fram-claro); border-color:var(--fram-deep)}
.plan-dest{background:var(--oscuro); border-color:var(--oscuro)}
.plan-dest .lab{color:var(--fram-claro)}
.plan-dest .quien,.plan-dest .iva,.plan-dest .precio span{color:var(--oscuro-texto)}
.plan-dest .precio b{color:var(--crema)}
.plan-dest :focus-visible{outline-color:var(--fram-claro)}
.etiqueta{position:absolute; top:16px; right:16px; background:var(--caramelo); color:var(--tinta); font-size:.8rem; font-weight:700; padding:3px 12px; border-radius:99px; white-space:nowrap}
@media(min-width:1001px){.plan-dest{margin:-16px 0; padding-top:clamp(40px,4vw,52px); padding-bottom:clamp(40px,4vw,52px)}}
.cap-p{margin-top:28px; font-size:.9rem; color:var(--tinta-2)}
@media(max-width:1000px){
  .planes{grid-template-columns:1fr; max-width:520px}
  .plan-dest{order:-1}
  .plan .quien,.plan .iva{min-height:0}
}
@media(max-width:400px){.sel{padding:10px 14px}}

/* 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,.sel{transition:none}
  .hero-vis{transform:none}
}

/* Formulario «Pide tu demo» */
.demo-grid{display:grid; grid-template-columns:1fr; gap:36px; text-align:left; align-items:start}
@media (min-width:900px){.demo-grid{grid-template-columns:1fr 1fr; gap:56px}}
.demo .demo-texto h2{margin:0}
.demo .demo-texto p{margin:18px 0 0; max-width:30em}
.otras-vias{display:grid; gap:10px; margin-top:28px; max-width:26em}
.otras-vias a{display:flex; flex-direction:column; padding:14px 18px; border:1px solid rgba(255,255,255,.18); border-radius:12px; color:#fff; text-decoration:none}
.otras-vias a:hover{border-color:var(--fram-claro)}
.otras-vias span{font-weight:700} .otras-vias small{color:var(--oscuro-texto)}
.form{background:var(--papel); color:var(--tinta); border-radius:18px; padding:24px; display:grid; gap:14px}
.form .dos{display:grid; gap:14px} @media (min-width:520px){.form .dos{grid-template-columns:1fr 1fr}}
.campo{display:grid; gap:6px}
.campo label{font-weight:600; font-size:.95rem} .campo small{font-weight:400; color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--linea); border-radius:10px; background:var(--crema); color:var(--tinta); width:100%; box-sizing:border-box}
.campo textarea{min-height:96px; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--fram-deep); outline-offset:1px; border-color:var(--fram-deep)}
.campo input[aria-invalid=true]{border-color:var(--fram-deep)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .btn{width:100%}
.form .estado{margin:0; min-height:1.4em; font-size:.95rem; color:var(--tinta-2)}
.form .estado.ok{color:#1E6B3A; font-weight:600} .form .estado.error{color:var(--fram-deep); font-weight:600}
@media(max-width:480px){.top-in{gap:8px}.top-acc{gap:8px}.top-acc .btn-sm{padding:8px 11px; font-size:.86rem}.ingresar{font-size:.88rem; margin-right:0}.marca span{font-size:1.25rem}.marca svg{width:30px; height:30px}}