/* OasisIVCabo — design tokens (fuente: clientes/oasis-iv-cabo/05_construccion/marca.md)
   Paleta amarillo/rojo ejecutada con sofisticacion: Ambar Sol + Carmesi Agave sobre arena.
   Regla dura: el ambar NUNCA es texto sobre blanco (solo relleno). Todas las combinaciones de texto = WCAG AA. */
:root {
  /* Ambar Sol (amarillo) */
  --amber-50:#FDF6E9; --amber-100:#FBEBC8; --amber-200:#F7D794; --amber-300:#F2C25C;
  --amber-400:#ECAE33; --amber-500:#E8A22A; --amber-600:#C6821C; --amber-700:#9E6614;
  --amber-800:#7A4E12; --amber-900:#5C3B12;
  /* Carmesi Agave (rojo) */
  --crimson-50:#FCEDEB; --crimson-100:#F9D6D1; --crimson-200:#F1A9A0; --crimson-300:#E87B6D;
  --crimson-400:#DE5646; --crimson-500:#D9463A; --crimson-600:#C13024; --crimson-700:#A0271D;
  --crimson-800:#7C1F17; --crimson-900:#5C1712;
  /* Neutros arena / tinta calida */
  --ink:#2A2320; --ink-soft:#4A403A; --sand-50:#FBF6EC; --sand-100:#F1E7D6; --sand-200:#E3D5BE;
  --line:#D9C9AE; --white:#FFFFFF; --oasis-500:#2E6E5E;
  /* Semanticos */
  --bg:var(--sand-50); --surface:var(--white); --surface-alt:var(--sand-100);
  --text:var(--ink); --text-muted:var(--ink-soft);
  --brand:var(--amber-500); --cta:var(--crimson-600); --cta-hover:var(--crimson-700);
  --accent:var(--crimson-500); --border:var(--line);
  /* Tipografia */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* Escala / radios / sombra / motion */
  --text-hero:clamp(2.4rem,6vw,3.5rem); --text-h2:clamp(1.7rem,4vw,2.25rem); --text-h3:1.375rem;
  --text-body:1.0625rem; --text-sm:.875rem;
  --radius-sm:.5rem; --radius-md:.875rem; --radius-lg:1.25rem; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(42,35,32,.06),0 10px 30px rgba(42,35,32,.09);
  --shadow-sm:0 1px 2px rgba(42,35,32,.08);
  --ease:cubic-bezier(.2,.8,.2,1);
  --maxw:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--text-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.12; font-weight:600; margin:0 0 .5em; color:var(--ink)}
h1{font-size:var(--text-hero); letter-spacing:-.01em}
h2{font-size:var(--text-h2); letter-spacing:-.01em}
h3{font-size:var(--text-h3)}
p{margin:0 0 1rem}
a{color:var(--crimson-700); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--crimson-500); outline-offset:2px; border-radius:4px}

/* Layout */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px}
/* Movil: un poco mas de aire lateral. Con tipografia display grande, 20px se lee apretado. */
@media(max-width:820px){ .container{padding:0 24px} }
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.eyebrow{font-family:var(--font-body); font-weight:600; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--crimson-700); margin:0 0 .75rem}
.lead{font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--text-muted); max-width:60ch}

/* Botones */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-body); font-weight:600;
  font-size:1rem; line-height:1; padding:.95rem 1.5rem; border-radius:var(--radius-pill);
  border:2px solid transparent; cursor:pointer; transition:transform .15s var(--ease),background .15s var(--ease); text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-cta{background:var(--cta); color:#fff}          /* blanco sobre carmesi-600 = AA */
.btn-cta:hover{background:var(--cta-hover); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--sand-100)}
.btn-dark{background:var(--ink); color:var(--sand-50)}
.btn-dark:hover{background:#1c1714; color:#fff}

/* Badges / chips */
.badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600;
  padding:.35rem .7rem; border-radius:var(--radius-pill); background:var(--amber-100); color:var(--amber-900)}
.badge-trust{background:var(--sand-100); color:var(--ink); border:1px solid var(--line)}
.temp-price{display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--crimson-700); background:var(--crimson-50); border:1px solid var(--crimson-200);
  padding:.12rem .4rem; border-radius:var(--radius-sm); vertical-align:middle; margin-left:.4rem}

/* Tarjetas */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card)}

/* Utilidades */
.sun{color:var(--amber-500)}
.on-dark{background:var(--ink); color:var(--sand-50)}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lead,.on-dark p{color:#E9DFCF}
.muted{color:var(--text-muted)}
.center{text-align:center}
.grid{display:grid; gap:1.25rem}
.hide{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Aviso de precios temporales (banner) */
.tempbar{background:var(--amber-100); color:var(--amber-900); font-size:.82rem; text-align:center;
  padding:.5rem 1rem; border-bottom:1px solid var(--amber-300)}