/* Estética de las páginas del cliente (ingreso, compra, panel, recuperar
   contraseña y términos). Se carga DESPUÉS del estilo propio de cada página:
   redefine los colores, las letras y el encabezado para que combinen con la
   portada nueva (fondo crema, borgoña y gris oscuro, títulos en Fraunces). */

/* ---------- Paleta nueva (mismos nombres de variables que usan las páginas) ---------- */
:root{
  --paper:#EFE6D8;      /* fondo crema */
  --paper-2:#F7F1E7;    /* tarjetas */
  --ink:#2A2527;        /* texto, gris oscuro */
  --muted:#6E6266;
  --orange:#7E1A3B;     /* acento: borgoña */
  --orange-dark:#661430;
  --wine:#7E1A3B;
  --line:rgba(42,37,39,.13);
  --crema-hondo:#E6DACA;
}
body{font-family:'Jost',system-ui,sans-serif;}

/* Títulos en Fraunces, con peso normal (la letra ya tiene cuerpo) */
.brand,.brand-clo,.serif,h1,h2,h3,.plan-option .pname{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;}
.brand-clo{font-weight:400 !important;letter-spacing:.05em;}
.paso-head h1,.decision-box h2,.modal-box h3,.checkout-form h2,.plan-option .pname,.legal-wrap h1,.legal-wrap h2,h1,h2,.serif{font-weight:400 !important;}
.brand-sub{font-family:'Jost',system-ui,sans-serif;font-weight:500;color:var(--orange) !important;}

/* ---------- Encabezado: panel crema con los cerros, como la portada ---------- */
.pg-hero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--ink);
  background:var(--crema-hondo);
  width:calc(100% - 32px);max-width:1060px;margin:16px auto 0;border-radius:28px;
}
.pg-hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 L150 22 L260 58 L410 6 L560 52 L700 18 L850 64 L990 26 L1140 70 L1290 24 L1440 58 V120 H0Z' fill='%23CFC1B8'/%3E%3Cpath d='M0 92 L130 62 L300 88 L470 46 L640 86 L780 60 L940 92 L1110 56 L1280 88 L1440 72 V120 H0Z' fill='%232A2527'/%3E%3Cpath d='M0 110 L220 94 L430 108 L650 90 L880 110 L1100 96 L1300 108 L1440 100 V120 H0Z' fill='%237E1A3B'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.pg-hero::after{content:none;}
@media (max-width:640px){.pg-hero{width:calc(100% - 20px);margin-top:10px;border-radius:22px;}.pg-hero::before{height:44px;}}
.pg-hero nav{border-bottom:0;}
.pg-hero .brand-clo{color:var(--ink);}
.pg-hero .volver-link{color:var(--muted);}
.pg-hero .volver-link:hover{color:var(--orange);}
.pg-hero .portal-nav{color:var(--muted);}
.pg-hero .portal-nav a.active-tab{color:var(--ink);border-bottom-color:var(--orange);}
.pg-hero .portal-nav a.salir{color:var(--orange);}
.pg-hero-in{text-align:center;padding:6px 0 92px;}
@media (max-width:640px){.pg-hero-in{padding-bottom:66px;}}
.pg-hero-in .paso-head{margin-bottom:0;}
.pg-hero-in h1,.pg-hero-in p{color:var(--ink);text-shadow:none;}
.pg-hero-in h1{font-size:clamp(28px,4vw,40px) !important;line-height:1.12;}
.pg-hero-in p{color:var(--muted);}
.pg-hero-in .fecha{margin:10px 0 0;font-size:13px;color:var(--muted);}
.pg-hero .checkout-plan-tag{background:var(--paper-2);border-color:var(--line);color:var(--ink);}
.pg-hero .checkout-plan-tag .cp-price{color:var(--orange);}

/* ---------- Tarjetas con marco borgoña (como el plan destacado) ---------- */
.checkout-form{
  background:var(--paper-2);border:2px solid var(--orange);border-radius:24px;
  box-shadow:0 18px 40px rgba(126,26,59,.10);
}
.field input,.field select,.field textarea{background:var(--paper);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(126,26,59,.12);}
.plan-option{border-color:rgba(126,26,59,.3);}
.plan-option.current{border-color:var(--orange);background:#F3E6E4 !important;}
.auth-tabs{border-color:rgba(126,26,59,.3);}
.auth-tab.active{color:var(--paper-2) !important;}
.plan-btn{border-radius:999px;font-weight:500;}
.plan-btn:hover{transform:none;}
.check input{accent-color:var(--orange);}

/* En ingreso/compra las tarjetas "suben" un poco sobre el encabezado */
.paso.sube{padding-top:0;}
.paso.sube > .auth-box,.paso.sube > .decision-box{margin-top:-30px;position:relative;z-index:2;}

/* ---------- Ventana emergente ---------- */
.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.modal-box{border:2px solid var(--orange);background:var(--paper-2);border-radius:22px;}

/* ---------- Términos ---------- */
.legal-wrap{padding-top:50px;}
.legal-wrap p,.legal-wrap li{color:#4A4245;}

/* Marca y enlaces del encabezado (por si la página no los define) */
.pg-hero .brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:inherit;}
.pg-hero .brand-sub{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-top:5px;}
.pg-hero .volver-link{text-decoration:none;}
.pg-hero nav{padding-top:26px;padding-bottom:26px;}
.pg-hero + main{padding-top:54px;}

/* Encabezados sin título (mi cuenta, recuperar contraseña): solo la barra, sin cerros */
.pg-hero:not(:has(.pg-hero-in))::before{display:none;}
.pg-hero:not(:has(.pg-hero-in)) nav{padding-top:18px;padding-bottom:18px;}

/* En celular, que las tarjetas no toquen los bordes de la pantalla */
@media (max-width:520px){
  .auth-box,.decision-box{max-width:calc(100% - 32px) !important;margin-left:auto !important;margin-right:auto !important;}
  .checkout-form{padding:24px 20px;}
}