/* =========================================================
   PALETAS CLARAS ADICIONALES
   ========================================================= */

body[data-theme="marfil_escenico"]{
  --color-bg:#FFF9F0;
  --color-surface:#FFFDF8;
  --color-deep:#2A1A1D;
  --color-text:#2A1A1D;
  --color-text-muted:#66565A;
  --color-primary:#B93A4A;
  --color-secondary:#C7922E;
  --color-third:#7C6652;
}

body[data-theme="lavanda_editorial"]{
  --color-bg:#F7F3FB;
  --color-surface:#FFFFFF;
  --color-deep:#261D30;
  --color-text:#261D30;
  --color-text-muted:#665B70;
  --color-primary:#7655A5;
  --color-secondary:#C68A32;
  --color-third:#8E789E;
}

body[data-theme="azul_papel"]{
  --color-bg:#F3F8FC;
  --color-surface:#FFFFFF;
  --color-deep:#152536;
  --color-text:#152536;
  --color-text-muted:#526577;
  --color-primary:#376F91;
  --color-secondary:#C48A2A;
  --color-third:#7897AE;
}

body[data-theme="salvia_clara"]{
  --color-bg:#F5F8F2;
  --color-surface:#FFFFFF;
  --color-deep:#1D2B23;
  --color-text:#1D2B23;
  --color-text-muted:#58665D;
  --color-primary:#547B5E;
  --color-secondary:#B3842F;
  --color-third:#819A83;
}

body[data-theme="arena_calida"]{
  --color-bg:#FAF4E8;
  --color-surface:#FFFDF8;
  --color-deep:#2A2119;
  --color-text:#2A2119;
  --color-text-muted:#685D52;
  --color-primary:#A65336;
  --color-secondary:#A77A24;
  --color-third:#8A735C;
}


/* =========================================================
   INTERFAZ Y TEXTO GENERAL
   ========================================================= */

body,
input,
textarea,
select,
button{
  font-family:"Archivo", sans-serif;
  font-size:14px;
  color:var(--color-text);
  font-weight:400;
  font-style:italic;
}


/* =========================================================
   TÍTULO PRINCIPAL / HERO
   En escritorio respeta exactamente el valor del panel.
   ========================================================= */

.hero h1,
.hero .display{
  font-family:"Archivo", sans-serif;
  font-size:100px;
  color:var(--color-text);
  font-weight:700;
  font-style:normal;
}


/* =========================================================
   DESCRIPTOR DE PORTADA
   Ej.: — TEATRO —
   ========================================================= */

.hero__descriptor{
  margin-top:14px;
  margin-bottom:30px;

  font-family:"Archivo", sans-serif;
  font-size:34px;
  color:var(--color-text);
  font-weight:700;
  font-style:normal;

  line-height:1.05;
  letter-spacing:.12em;
  text-transform:uppercase;

  text-shadow:
    0 3px 16px rgba(0,0,0,.55);
}


/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.section__head h2,
.page-head h1,
.support h2{
  font-family:"Archivo", sans-serif;
  font-size:60px;
  color:var(--color-text);
  font-weight:700;
  font-style:normal;
}


/* =========================================================
   TARJETAS, BOTONES Y SUBTÍTULOS
   ========================================================= */

.poster h3,
.bill-row h3,
.account h3,
.footer__brand,
.btn,
.links a,
.poster__date,
.poster__cta{
  font-family:"Archivo", sans-serif;
  color:var(--color-text);
  font-weight:700;
  font-style:normal;
}

.poster h3,
.bill-row h3,
.account h3{
  font-size:18px;
}


/* =========================================================
   RESPONSIVE
   El valor escogido en Administración sigue siendo el máximo,
   pero en pantallas pequeñas se reduce para evitar desbordamiento.
   ========================================================= */

@media (max-width:1180px){

  .hero h1,
  .hero .display{
    font-size:min(100px, 10vw);
  }

  .hero__descriptor{
    font-size:min(34px, 4vw);
  }

  .section__head h2,
  .page-head h1,
  .support h2{
    font-size:min(60px, 6vw);
  }

  .poster h3,
  .bill-row h3,
  .account h3{
    font-size:min(18px, 3vw);
  }
}


@media (max-width:700px){

  .hero h1,
  .hero .display{
    font-size:min(100px, 13vw);
  }

  .hero__descriptor{
    font-size:min(34px, 6.5vw);
    margin-top:10px;
    margin-bottom:22px;
    letter-spacing:.10em;
  }

  .section__head h2,
  .page-head h1,
  .support h2{
    font-size:min(60px, 11vw);
  }

  .poster h3,
  .bill-row h3,
  .account h3{
    font-size:min(18px, 7vw);
  }
}