/* ============================================================
   OBYRA — Estilos compartidos de las páginas internas
   (legales, precios y formularios). Manual de identidad v1.0
   ============================================================ */

:root{
  --verde:        #16A34A;
  --verde-boton:  #15803D;
  --verde-hover:  #0F7A39;
  --verde-texto:  #0F7A39;
  --verde-suave:  #E8F6ED;
  --azul:         #0D1B2A;
  --azul-claro:   #16293D;
  --azul-borde:   #243B53;
  --blanco:       #FFFFFF;
  --neutro-osc:   #374151;
  --neutro-med:   #6B7280;
  --neutro-clr:   #E5E7EB;
  --fondo-suave:  #F7F9F8;
  --plomo-osc:    #A9B6C4;

  --radio:        8px;
  --radio-lg:     14px;
  --ancho:        1120px;
  --ancho-texto:  72ch;
  --sombra:       0 1px 2px rgba(13,27,42,.04), 0 8px 24px rgba(13,27,42,.06);
  --transicion:   .2s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1rem; line-height:1.65; color:var(--neutro-osc);
  background:var(--fondo-suave); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Montserrat',system-ui,sans-serif; color:var(--azul); line-height:1.2; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; }
h2{ font-size:clamp(1.15rem,2.2vw,1.35rem); font-weight:700; margin-top:2.5rem; }
h3{ font-size:1rem; font-weight:700; margin-top:1.5rem; }
p,ul,ol{ margin:0 0 1rem; }
a{ color:var(--verde-texto); }
a:hover{ text-decoration-thickness:2px; }
img{ max-width:100%; height:auto; display:block; }
strong{ color:var(--azul); }
:focus-visible{ outline:3px solid var(--verde); outline-offset:2px; }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.visually-hidden:focus{
  position:fixed; top:.5rem; left:.5rem; width:auto; height:auto; clip:auto; z-index:100;
  background:var(--blanco); color:var(--azul); padding:.6rem 1rem; border-radius:var(--radio);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:600 .95rem/1 'Inter',sans-serif; padding:.85rem 1.3rem; border-radius:var(--radio);
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background var(--transicion), border-color var(--transicion);
}
.btn--primario{ background:var(--verde-boton); color:var(--blanco); }
.btn--primario:hover{ background:var(--verde-hover); }
.btn--linea{ background:var(--blanco); color:var(--azul); border-color:var(--neutro-clr); }
.btn--linea:hover{ border-color:var(--azul); }
.btn--chico{ padding:.65rem 1rem; font-size:.875rem; }
.grupo-btn{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:50; background:rgba(247,249,248,.94);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--neutro-clr);
}
.cabecera .contenedor{ max-width:none; padding-inline:clamp(1rem,3vw,2.5rem); }
.cabecera__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px; }
.marca{ display:flex; align-items:center; gap:.9rem; text-decoration:none; }
.marca img{ height:44px; width:auto; }
.marca__bajada{
  font-size:.65rem; font-weight:600; letter-spacing:.16em; color:var(--neutro-med); text-transform:uppercase;
  border-left:1px solid var(--neutro-clr); padding-left:.9rem; line-height:1.3;
}
.cabecera__links{ display:flex; align-items:center; gap:1.5rem; }
.cabecera__links a:not(.btn){ font-size:.925rem; font-weight:500; color:var(--neutro-osc); text-decoration:none; }
.cabecera__links a:not(.btn):hover{ color:var(--verde-texto); }
@media (max-width:640px){
  .marca img{ height:38px; }
  .marca__bajada{ display:none; }
  .cabecera__links a:not(.btn){ display:none; }
}

/* ---------- Documento legal ---------- */
.doc{ padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem); }
.doc__inner{ max-width:var(--ancho-texto); }
.doc__volver{ font-size:.9rem; font-weight:600; text-decoration:none; display:inline-block; margin-bottom:1.5rem; }
.doc__fecha{ font-size:.875rem; color:var(--neutro-med); margin-bottom:2rem; }
.doc h2{ padding-top:.5rem; border-top:1px solid var(--neutro-clr); }
.doc ul{ padding-left:1.15rem; }
.doc li{ margin-bottom:.4rem; }
.doc__destacado{
  background:var(--verde-suave); border-left:4px solid var(--verde); border-radius:var(--radio);
  padding:1.25rem 1.5rem; margin:1.5rem 0;
}
.doc__destacado p:last-child{ margin-bottom:0; }
.doc__legal{
  background:var(--blanco); border:1px solid var(--neutro-clr); border-radius:var(--radio);
  padding:1.25rem 1.5rem; margin:1.5rem 0; font-size:.925rem;
}
.doc__legal p:last-child{ margin-bottom:0; }
.doc__datos{ width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; font-size:.925rem; }
.doc__datos th,.doc__datos td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--neutro-clr); vertical-align:top; }
.doc__datos th{ width:40%; color:var(--azul); font-weight:600; }

/* ---------- Precios ---------- */
.precios{ padding:clamp(2.5rem,6vw,4.5rem) 0; }
.precios__grilla{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; margin-top:2.5rem; }
.plan{
  background:var(--blanco); border:1px solid var(--neutro-clr); border-radius:var(--radio-lg);
  padding:1.75rem; display:flex; flex-direction:column; box-shadow:var(--sombra);
}
.plan--destacado{ border-color:var(--verde); border-top:4px solid var(--verde); }
.plan__etiqueta{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-texto); margin-bottom:.75rem; }
.plan h3{ margin:0 0 .25rem; font-size:1.15rem; }
.plan__modalidad{ font-size:.875rem; color:var(--neutro-med); margin-bottom:1.25rem; }
.plan__monto{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; margin-bottom:.25rem; }
.plan__numero{ font:800 clamp(1.6rem,3vw,2.1rem)/1.1 'Montserrat',sans-serif; color:var(--azul); }
.plan__periodo{ font-size:.875rem; color:var(--neutro-med); }
.plan__detalle{ font-size:.825rem; color:var(--neutro-med); margin-bottom:1.25rem; }
.plan__lista{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.5rem; font-size:.9rem; }
.plan__lista li{ position:relative; padding-left:1.4rem; }
.plan__lista li::before{
  content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:50%;
  background:var(--verde);
}
.plan__lista dt{ display:inline; font-weight:600; color:var(--azul); }
.plan__lista dd{ display:inline; margin:0; }
.plan .btn{ margin-top:auto; }
.precios__nota{ font-size:.85rem; color:var(--neutro-med); margin-top:1.75rem; max-width:var(--ancho-texto); }

/* ---------- Formulario ---------- */
.formulario{
  background:var(--blanco); border:1px solid var(--neutro-clr); border-radius:var(--radio-lg);
  padding:clamp(1.5rem,4vw,2rem); box-shadow:var(--sombra); max-width:640px;
}
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-size:.9rem; font-weight:600; color:var(--azul); margin-bottom:.35rem; }
.campo .ayuda{ display:block; font-weight:400; font-size:.8rem; color:var(--neutro-med); margin-top:.15rem; }
.campo input,.campo textarea{
  width:100%; font:400 .95rem/1.5 'Inter',sans-serif; color:var(--neutro-osc);
  background:var(--blanco); border:1px solid var(--neutro-clr); border-radius:var(--radio); padding:.7rem .85rem;
}
.campo input:focus,.campo textarea:focus{ outline:2px solid var(--verde); outline-offset:0; border-color:transparent; }
.aviso{
  background:var(--verde-suave); border:1px solid rgba(22,163,74,.35); border-radius:var(--radio);
  padding:1rem 1.25rem; margin-bottom:2rem; display:none;
}
.aviso.visible{ display:block; }
.aviso p:last-child{ margin-bottom:0; }

/* ---------- Pie ---------- */
.pie{ background:var(--azul); color:var(--plomo-osc); padding:clamp(2.5rem,5vw,3.5rem) 0 2rem; font-size:.875rem; }
.pie a{ color:var(--plomo-osc); text-decoration:none; }
.pie a:hover{ color:var(--blanco); text-decoration:underline; text-underline-offset:3px; }
.pie__grilla{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.pie img{ height:38px; width:auto; margin-bottom:1rem; }
.pie h4{ font:700 .7rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--blanco); margin:0 0 .9rem; }
.pie ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.pie__datos{ margin:0; line-height:1.7; }
.pie__arrepentimiento{
  display:inline-block; margin-top:.75rem; color:var(--blanco); font-weight:600;
  border:1px solid var(--azul-borde); border-radius:var(--radio); padding:.55rem .9rem; text-decoration:none;
}
.pie__arrepentimiento:hover{ border-color:var(--plomo-osc); text-decoration:none; }
.pie__pagos{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--azul-borde); }
.pie .pie__medios{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; list-style:none; padding:0; }
.pie .pie__medios li{
  background:var(--blanco); color:var(--azul); font-size:.75rem; font-weight:700; letter-spacing:.04em;
  border-radius:6px; padding:.45rem .7rem;
}
.pie__base{
  margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--azul-borde);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; font-size:.8rem;
}
@media (max-width:820px){ .pie__grilla{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}