/* ═══ SKIN «Zeszyt w kratkę» — estética de la landing de Muzykogram (cuaderno, serif, marcador, notas a mano)
   con la paleta de la landing BR: amarillo #FFDC00, negro y blanco. Se carga DESPUÉS de style.css. ═══ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600..800;1,9..144,600..800&family=Caveat:wght@600;700&family=Figtree:wght@400;500;600;700;800;900&display=swap');

:root{
  --font-title:'Fraunces',Georgia,serif;
  --font-body:'Figtree',system-ui,-apple-system,sans-serif;
  --mano:'Caveat',cursive;
  --papel:#FFFEF9; --crema:#FDFBF4; --tinta:#16161A; --tinta-2:#4A4A52; --linea:#E9E4D3;
  --amarillo:#FFDC00; --amarillo-2:#C9A800; --marcador:rgba(255,220,0,.75);
  --pizarra:#141416;
  --sombra:3px 4px 0 rgba(22,22,26,.08),0 10px 24px rgba(22,22,26,.06);
  --sombra-2:5px 7px 0 rgba(22,22,26,.10),0 18px 40px rgba(22,22,26,.12);
}

/* ── cuaderno en cuadritos (5 mm) con margen amarillo ── */
html,body{background:var(--crema)}
body{color:var(--tinta-2);font-family:var(--font-body)}
.section:not(.section--dark),.footer{background-color:var(--crema)!important;background-image:
  linear-gradient(90deg,transparent 46px,rgba(232,190,0,.55) 46px,rgba(232,190,0,.55) 48px,transparent 48px),
  repeating-linear-gradient(to bottom,transparent 0 19px,rgba(120,120,140,.12) 19px 20px),
  repeating-linear-gradient(90deg,transparent 0 19px,rgba(120,120,140,.12) 19px 20px)!important;
  border-color:var(--linea)!important}
@media (max-width:640px){.section:not(.section--dark),.footer{background-image:
  linear-gradient(90deg,transparent 8px,rgba(232,190,0,.5) 8px,rgba(232,190,0,.5) 10px,transparent 10px),
  repeating-linear-gradient(to bottom,transparent 0 19px,rgba(120,120,140,.10) 19px 20px),
  repeating-linear-gradient(90deg,transparent 0 19px,rgba(120,120,140,.10) 19px 20px)!important}}

/* ── tipografía: títulos serif de cuaderno, «kicks» escritos a mano ── */
h1,h2,h3,.section-title,.hero-title,.bonus-title,.tab-title{font-family:var(--font-title);letter-spacing:-.01em}
.section-title{font-weight:700;line-height:1.16;color:var(--tinta)}
.hero-title{font-weight:700;line-height:1.12;color:var(--tinta)}
.section-label{font-family:var(--mano);font-size:1.6rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--tinta);
  display:table;margin:0 auto 6px;transform:rotate(-2deg);padding:0 .25em;
  background:linear-gradient(transparent 62%,var(--marcador) 62%,var(--marcador) 90%,transparent 90%)}
.section--dark .section-label{color:var(--amarillo);background:none}
.section-subtitle,.hero-subtitle{color:var(--tinta-2)}

/* marcador amarillo en vez de «píldora» */
.hl{background:linear-gradient(transparent 56%,var(--marcador) 56%,var(--marcador) 92%,transparent 92%);box-shadow:none;border-radius:0;
  padding:0 .1em;font-style:italic;font-weight:inherit;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section--dark .hl{color:#fff;background:linear-gradient(transparent 58%,rgba(255,220,0,.55) 58%,rgba(255,220,0,.55) 92%,transparent 92%)}

/* ── hero: hoja blanca, sello arriba, foto enmarcada ── */
.hero{background:#fff!important;position:relative;border-bottom:1px solid var(--linea);padding-top:34px}
.sello-top{display:inline-flex;align-items:center;gap:8px;font:800 .72rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta);background:#FFFBE0;border:1px dashed rgba(22,22,26,.35);border-radius:999px;padding:8px 14px;margin-bottom:18px}
.sello-top i{width:8px;height:8px;border-radius:50%;background:var(--amarillo-2);box-shadow:0 0 0 3px rgba(255,220,0,.35)}
.hero-mockup-wrapper{background:#fff;padding:10px;border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra-2);transform:rotate(-.6deg)}
.hero-mockup-img{border-radius:8px!important;box-shadow:none!important}

/* ── cinta de números ── */
.nums{background:var(--amarillo);color:var(--tinta);padding:24px 0;border-top:2px solid var(--tinta);border-bottom:2px solid var(--tinta)}
.nums .container{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.nums b{display:block;font:700 clamp(1.7rem,5vw,2.4rem)/1 var(--font-title);margin-bottom:6px;color:var(--tinta)}
.nums span{font-size:.84rem;font-weight:600;color:rgba(22,22,26,.75)}
@media (max-width:560px){.nums .container{grid-template-columns:repeat(2,1fr);row-gap:18px}}

/* ── botones: «apretables», esquinas de cuaderno, pulso suave ── */
.btn-cta{font-family:var(--font-body);font-weight:900;border-radius:12px;background:var(--amarillo);color:var(--tinta);
  box-shadow:0 5px 0 var(--amarillo-2);animation:pulso-c 2.6s ease-in-out infinite;letter-spacing:.01em}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--amarillo-2)}
.btn-cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--amarillo-2)}
@keyframes pulso-c{0%,100%{box-shadow:0 5px 0 var(--amarillo-2),0 0 0 0 rgba(255,220,0,.5)}60%{box-shadow:0 5px 0 var(--amarillo-2),0 0 0 14px rgba(255,220,0,0)}}
@media (prefers-reduced-motion:reduce){.btn-cta{animation:none}}

/* ── pizarrón: secciones oscuras ── */
.section--dark{background-color:var(--pizarra)!important;border:0!important;background-image:
  radial-gradient(ellipse at 12% 0%,rgba(255,220,0,.10),transparent 55%),
  radial-gradient(ellipse at 92% 100%,rgba(255,255,255,.05),transparent 52%),
  repeating-linear-gradient(to bottom,transparent 0 31px,rgba(255,255,255,.035) 31px 32px)}
.section--dark .section-subtitle{color:#b9b9c0}
.section--dark .bonus-card{background:rgba(255,255,255,.04);border:1px dashed rgba(255,220,0,.38);border-radius:10px;box-shadow:none}
.section--dark .bonus-card:hover{background:rgba(255,255,255,.07);border-color:var(--amarillo);box-shadow:none}
.bonus-badge{border-radius:3px;transform:rotate(-2deg);font-family:var(--font-body)}
.bonus-image-wrapper img{border-radius:6px}
.carousel-slide img,.preview-carousel img{border-radius:6px}

/* ── tarjetas: hojas de papel, esquinas casi rectas, sombra corrida ── */
.curriculum-category-card,.audience-card,.faq-item,.delivery-step,.curriculum-tab-btn,.value-stack-right-box{
  background:var(--papel);border:1px solid var(--linea);border-radius:8px;box-shadow:var(--sombra)}
.curriculum-category-card{border-top:4px solid var(--amarillo)}
.curriculum-category-card:hover,.audience-card:hover,.delivery-step:hover{transform:translateY(-2px) rotate(-.3deg);box-shadow:var(--sombra-2);border-color:var(--linea)}
.curriculum-tab-btn{border-bottom:3px solid var(--linea)}
.curriculum-tab-btn.active{background:var(--amarillo);border-color:var(--tinta);border-bottom:3px solid var(--tinta);box-shadow:3px 4px 0 var(--tinta)}
.tab-level{font-family:var(--font-title);font-weight:700;background:#F3EFE2}
.audience-card h3,.curriculum-category-card h3,.delivery-step h3{font-family:var(--font-title);font-weight:700;color:var(--tinta)}
.audience-icon-badge{border-radius:10px!important}
.delivery-step-num{font-family:var(--font-title);font-weight:700;border-radius:10px;transform:rotate(-3deg);border:0;box-shadow:3px 4px 0 var(--amarillo)}

/* ── valor y precio: hoja con cinta adhesiva ── */
.value-stack-container{background:var(--papel);border:2px dashed rgba(22,22,26,.28);border-radius:10px;box-shadow:var(--sombra-2);position:relative}
.value-stack-container::before{content:"";position:absolute;top:-13px;left:50%;width:120px;height:26px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,220,0,.75);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.value-stack-item-row{border-bottom:1px dashed var(--linea)}
.value-stack-item-row .price,.value-stack-total-row .price{text-decoration-color:#d23a3a;text-decoration-thickness:2px}
.value-stack-right-box{background:#FFF8D9;border-color:#F0DFA0}
.value-stack-right-box .label{font-family:var(--mano);font-size:1.5rem;text-transform:none;letter-spacing:0;color:var(--tinta);transform:rotate(-2deg)}
.value-stack-right-box .main-price{font-family:var(--font-title);font-weight:800;display:inline-block;padding:0 .12em;
  background:linear-gradient(transparent 55%,var(--marcador) 55%,var(--marcador) 90%,transparent 90%)}

/* ── garantía ── */
.warranty-card{background:var(--papel)!important;border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra-2);backdrop-filter:none;-webkit-backdrop-filter:none}
.warranty-card h2,.warranty-card h3{font-family:var(--font-title)}

/* ── FAQ ── */
.faq-trigger{font-family:var(--font-title);font-weight:650;color:var(--tinta)}
.faq-item:hover{border-color:#d9d2b8}

/* ── cierre ── */
.final-cta-card{background:#1E1E22;border:0;border-top:8px solid var(--amarillo);border-radius:10px;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.final-cta-card h2,.final-cta-card h3{font-family:var(--font-title)}

/* ── pie ── */
.footer{border-top:1px solid var(--linea)}
.footer-logo{font-family:var(--font-title)}

/* bonos con fondo transparente (2026-11-13): sin recuadro, sin sombra de caja, la imagen entra entera */
.bonus-image-wrapper img{object-fit:contain;background:none!important;box-shadow:none!important;border-radius:0!important;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}