/*
Theme Name: ISKCON Online — Campaña
Theme URI: https://iskcononline.org
Author: ISKCON Online
Description: Single-template theme for the Bhadra Purnima Srimad-Bhagavatam campaign. Palette and type system taken from iskcon.org.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: iskcononline-campana
*/

/* ============================================================
   1 · TOKENS — palette and type measured from iskcon.org
   ============================================================ */

:root{
  --azul-turquesa:#247EA6;
  --azul-marino:#1E3A8A;
  --crema:#F2EBE4;
  --hueso:#F5F3EE;
  --tinta:#363636;        /* headings */
  --tinta-texto:#4D4C4C;  /* body copy */
  --claro:#F5F3ED;        /* the "white" over dark grounds — cream, not #FFF */
  --blanco:#FFFFFF;
  --linea:#DDD5CC;
  --degradado:linear-gradient(90deg,var(--azul-turquesa) 0%,var(--azul-marino) 100%);

  --fuente-titulos:"Figtree",Helvetica,Arial,sans-serif;
  --fuente-texto:"DM Sans",Helvetica,Arial,sans-serif;

  /* measured mobile -> desktop. Heading line-height is always 1.2 */
  --h1:clamp(3.125rem,2.5vw + 2.6rem,3.75rem);
  --h2:clamp(2.5rem,2.5vw + 2rem,3.125rem);
  --h3:2.5rem;
  --h4:1.5625rem;

  --ancho:640px;
}

/* ============================================================
   2 · BASE
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--hueso);color:var(--tinta-texto);
  font-family:var(--fuente-texto);font-size:17px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--fuente-titulos);font-weight:700;
  line-height:1.2;letter-spacing:normal;margin:0;text-wrap:balance;
}
h1{font-size:var(--h1);color:var(--claro)}
h2{font-size:var(--h2);color:var(--tinta)}
h3{font-size:var(--h3);color:var(--azul-turquesa)}
h4{font-size:var(--h4);color:var(--tinta)}

p{margin:0 0 16px;font-size:1rem;line-height:1.4}
p:last-child{margin-bottom:0}

a{color:var(--azul-turquesa)}
a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--azul-marino);outline-offset:3px;
}

/* ============================================================
   3 · BANDS — the page alternates gradient title / light content
   ============================================================ */

.banda-titulo{background:var(--degradado);color:var(--claro);padding:44px 22px}
.banda-titulo h2{color:var(--claro)}
.banda-titulo>*{max-width:var(--ancho);margin-left:auto;margin-right:auto}

.banda-fondo{background:var(--hueso);padding:40px 22px}
.banda-fondo>*{max-width:var(--ancho);margin-left:auto;margin-right:auto}
.banda-crema{background:var(--crema)}

.intro{margin-top:18px;opacity:.94}

.cinta{
  background:var(--azul-marino);color:var(--claro);text-align:center;
  padding:13px 20px;font-size:14.5px;font-weight:500;margin:0;
}
.cinta b{font-weight:700}

/* ============================================================
   4 · VIDEO
   ============================================================ */

.video{
  position:relative;max-width:var(--ancho);margin:0 auto 30px;
  aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--azul-marino);
}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-sustituto{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;color:var(--claro);
  text-align:center;padding:20px;
  background:linear-gradient(160deg,var(--azul-marino) 0%,var(--azul-turquesa) 100%);
}
.play{
  width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.play::after{
  content:"";border-left:20px solid var(--azul-marino);
  border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px;
}

/* ============================================================
   5 · CONTENT PIECES
   ============================================================ */

.precio{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
.precio .antes{font-size:1.15rem;text-decoration:line-through;opacity:.75}
.precio .ahora{font-family:var(--fuente-titulos);font-size:2.4rem;font-weight:700;line-height:1;color:var(--tinta)}
.precio .moneda{font-size:.95rem;opacity:.85}

.puntos{list-style:none;padding:0;margin:20px 0 0}
.puntos li{padding:11px 0 11px 30px;border-bottom:1px solid var(--linea);position:relative;font-size:15.5px}
.puntos li:last-child{border-bottom:0}
.puntos li::before{
  content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;
  border-radius:50%;background:var(--azul-turquesa);
}

.ficha{
  background:var(--blanco);border:1px solid var(--linea);border-radius:6px;
  padding:18px 20px;margin-top:20px;font-size:15px;
}
.ficha dt{font-weight:700;font-size:13.5px;color:var(--azul-marino);margin-top:12px}
.ficha dt:first-child{margin-top:0}
.ficha dd{margin:2px 0 0}

.cifras{display:grid;grid-template-columns:1fr;gap:2px;margin-top:22px}
.cifra{background:var(--blanco);border:1px solid var(--linea);padding:18px 20px}
.cifra .n{
  font-family:var(--fuente-titulos);font-size:2rem;font-weight:700;
  color:var(--azul-marino);line-height:1.05;display:block;
  font-variant-numeric:tabular-nums;
}
.cifra .d{font-size:14.5px;color:#5A5A5A;margin-top:4px;display:block;line-height:1.4}

.aviso-fiscal{font-size:15px;color:#5A5A5A}

details{border-bottom:1px solid var(--linea);padding:14px 0}
details:last-of-type{border-bottom:0}
summary{
  font-family:var(--fuente-titulos);font-weight:700;font-size:15.5px;
  cursor:pointer;list-style:none;padding-right:24px;position:relative;color:var(--tinta);
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:22px;font-weight:400;color:var(--azul-turquesa)}
details[open] summary::after{content:"\2013"}
details p{margin:10px 0 0;font-size:15px;color:#4A4A4A}

/* ============================================================
   6 · BUTTONS
   ============================================================ */

.boton{
  display:block;width:100%;max-width:340px;margin:6px auto 0;text-align:center;
  border:0;border-radius:999px;padding:16px 24px;
  font-family:var(--fuente-texto);font-size:15px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--blanco);background:var(--azul-turquesa);text-decoration:none;
}
.boton:hover{background:var(--azul-marino);color:var(--blanco)}
.boton.marino{background:var(--azul-marino)}
.boton.marino:hover{background:var(--azul-turquesa)}

/* ============================================================
   7 · FLUENT FORMS — brand overrides
   ============================================================ */

.zona-formulario{
  background:var(--blanco);border:1px solid var(--linea);border-radius:6px;
  padding:24px 20px;max-width:var(--ancho);margin:0 auto;
}
.zona-formulario .ff-el-group{margin-bottom:16px}
.zona-formulario .ff-el-input--label label{
  font-family:var(--fuente-texto);font-size:14.5px;font-weight:500;color:var(--tinta);
}
.zona-formulario .ff-el-form-control{
  width:100%;padding:13px 14px;font-size:16px;font-family:var(--fuente-texto);
  color:var(--tinta-texto);border:1px solid var(--linea);border-radius:4px;background:#fff;
}
.zona-formulario .ff-el-form-control:focus{
  outline:2px solid var(--azul-turquesa);outline-offset:1px;border-color:var(--azul-turquesa);
}
.zona-formulario .ff-btn-submit,
.zona-formulario .ff-btn-next,
.zona-formulario .ff-btn-prev{
  border:0;border-radius:999px;padding:15px 28px;
  font-family:var(--fuente-texto);font-size:15px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--azul-turquesa);color:var(--blanco);cursor:pointer;
}
.zona-formulario .ff-btn-prev{background:transparent;color:var(--azul-marino);box-shadow:inset 0 0 0 2px var(--azul-marino)}
.zona-formulario .ff-step-header .ff-el-progress-bar{background:var(--azul-turquesa)}
.zona-formulario .ff-el-progress{background:var(--linea)}
.nota-form{font-size:13.5px;color:#6B6B6B;margin-top:14px;line-height:1.5;text-align:center}

/* ============================================================
   8 · FOOTER
   ============================================================ */

.pie-sitio{background:var(--azul-marino);color:var(--claro);padding:34px 22px;text-align:center;font-size:14px;line-height:1.7}
.pie-sitio a{color:var(--claro)}
.pie-sitio .legal{opacity:.8;font-size:13px;margin-top:14px}

/* ============================================================
   9 · WIDER SCREENS
   ============================================================ */

@media(min-width:700px){
  p{font-size:1.125rem}
  .cifras{grid-template-columns:1fr 1fr}
  .banda-titulo{padding:64px 32px}
  .banda-fondo{padding:56px 32px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}