/* ===========================================================================
   ONCO ORAL — Direccion 3 "SWISS BOLD TIPOGRAFICO"
   Blanco + Marino alto contraste · grilla visible (reglas 1-2px) · Bricolage
   ENORME protagonista · numeros de seccion gigantes · bloques rotundos de color
   sin degradados · estilo suizo/brutalista-suave. SIN bordes redondos, SIN
   sombras blandas, SIN degradados pastel.
   =========================================================================== */

:root {
  /* Paleta oficial (Manual de Marca) */
  --marino: #25335C;
  --abeto:  #2E4055;
  --jeans:  #28618B;
  --pastel: #FFF4C9;
  --acero:  #8892AA;
  --blanco: #FFFFFF;

  --ink:     #16203a;   /* negro tipografico (navy casi negro) para cuerpo */
  --ink-soft:#44506e;   /* texto secundario */
  --linea:   #16203a;   /* reglas/grilla fuertes */
  --linea-2: rgba(22,32,58,.14); /* reglas finas / grilla guia */

  --rule: 2px;          /* grosor de regla principal */
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);

  --t-snap: 140ms cubic-bezier(.2,.8,.2,1); /* transicion seca, sin rebote */
}

/* --------------------------------------------------------------------------- */
/* Reset / base                                                                 */
/* --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--blanco);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; margin: 0; color: var(--marino); font-weight: 800; line-height: .98; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--pastel); color: var(--marino); }

/* foco accesible, estilo suizo (caja dura) */
:focus-visible { outline: 3px solid var(--jeans); outline-offset: 2px; }

/* --------------------------------------------------------------------------- */
/* Estructura / grilla                                                          */
/* --------------------------------------------------------------------------- */
.sheet {
  max-width: var(--maxw);
  margin-inline: auto;
  border-inline: 1px solid var(--linea);
  position: relative;
}
.pad { padding-inline: var(--gutter); }

/* label monoespaciado / mayuscula con tracking */
.label {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--jeans);
}
.label--ink { color: var(--ink); }
.label--soft { color: var(--ink-soft); }

/* Reglas / dividers */
.rule  { border-top: var(--rule) solid var(--linea); }
.rule-1{ border-top: 1px solid var(--linea); }

/* --------------------------------------------------------------------------- */
/* Ticker / marquee sobrio                                                      */
/* --------------------------------------------------------------------------- */
.ticker {
  background: var(--marino);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: var(--rule) solid var(--linea);
}
.ticker__track {
  display: inline-flex;
  gap: 0;
  padding-block: 9px;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.ticker__track span {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-inline: 1.4rem;
}
.ticker__track span::after { content: "—"; margin-left: 1.4rem; color: var(--acero); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------- */
/* Header                                                                       */
/* --------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--blanco);
  border-bottom: var(--rule) solid var(--linea);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.header__logo img { height: 38px; width: auto; }
.nav { display: none; gap: 30px; align-items: center; }
.nav a {
  font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); padding: 6px 0; position: relative;
}
.nav a::after { content:""; position:absolute; left:0; bottom:-2px; height:3px; width:0; background: var(--marino); transition: width var(--t-snap); }
.nav a:hover::after { width: 100%; }

/* boton suizo: rectangulo solido, inversion seca en hover */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Raleway', sans-serif; font-weight: 800;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 22px; cursor: pointer;
  border: var(--rule) solid var(--marino);
  background: var(--marino); color: #fff;
  border-radius: 0;
  transition: background var(--t-snap), color var(--t-snap), transform var(--t-snap);
}
.btn:hover { background: #fff; color: var(--marino); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: #fff; color: var(--marino); }
.btn--ghost:hover { background: var(--marino); color: #fff; }
.btn--pastel { background: var(--pastel); color: var(--marino); border-color: var(--marino); }
.btn--pastel:hover { background: var(--marino); color: var(--pastel); }
.btn--on-dark { border-color: #fff; }
.btn--on-dark.btn--ghost { background: transparent; color: #fff; }
.btn--on-dark.btn--ghost:hover { background: #fff; color: var(--marino); }
.btn--block { width: 100%; justify-content: center; }
.btn svg { width: 16px; height: 16px; }

.header__cta { display: none; }
.burger {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border: var(--rule) solid var(--marino); background: #fff; color: var(--marino);
  cursor: pointer; border-radius: 0;
}
.burger svg { width: 22px; height: 22px; }

@media (min-width: 1000px) {
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
}

/* Menu mobile */
.mmenu { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.mmenu.is-open { visibility: visible; }
.mmenu__bg { position:absolute; inset:0; background: rgba(22,32,58,.5); opacity:0; transition: opacity var(--t-snap); }
.mmenu.is-open .mmenu__bg { opacity: 1; }
.mmenu__panel {
  position: absolute; top:0; right:0; height:100%; width: min(86vw, 360px);
  background:#fff; border-left: var(--rule) solid var(--linea);
  transform: translateX(100%); transition: transform 200ms cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding: 22px var(--gutter);
}
.mmenu.is-open .mmenu__panel { transform: translateX(0); }
.mmenu__head { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom: var(--rule) solid var(--linea); margin-bottom: 8px; }
.mmenu__head img { height: 32px; }
.mmenu__close { width:44px; height:44px; border:var(--rule) solid var(--marino); background:#fff; color:var(--marino); display:grid; place-items:center; cursor:pointer; }
.mmenu a.m-link {
  padding: 16px 0; border-bottom: 1px solid var(--linea-2);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; color: var(--marino);
}
.mmenu a.m-link .n { font-family:'Raleway',sans-serif; font-size:.7rem; letter-spacing:.2em; color: var(--acero); display:block; }

/* --------------------------------------------------------------------------- */
/* Tipografia de escala                                                          */
/* --------------------------------------------------------------------------- */
.hero-title { font-size: clamp(2.7rem, 9.2vw, 7.4rem); letter-spacing: -0.035em; }
.sec-title  { font-size: clamp(1.9rem, 5.2vw, 4rem); }
.big-title  { font-size: clamp(2.2rem, 6vw, 5rem); }
.lead { font-family:'Raleway',sans-serif; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); }

/* numero gigante de seccion */
.secnum {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 12vw, 9.5rem);
  line-height: .8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--acero);
  text-stroke: 2px var(--acero);
}
.secnum--solid { color: var(--marino); -webkit-text-stroke: 0; }
.secnum--pastel { color: var(--pastel); -webkit-text-stroke: 0; }
.secnum--on-dark { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.5); }

/* --------------------------------------------------------------------------- */
/* Hero                                                                          */
/* --------------------------------------------------------------------------- */
.hero { padding-top: clamp(40px, 6vw, 84px); padding-bottom: 0; }
.hero__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; }
.hero__title-wrap { padding-block: clamp(14px, 3vw, 32px); }
.hero h1 .hl { color: var(--jeans); }
.hero__bottom {
  display: grid; gap: 0; border-top: var(--rule) solid var(--linea);
}
@media (min-width: 880px) { .hero__bottom { grid-template-columns: 1.15fr .85fr; } }
.hero__lead-col { padding: clamp(22px,3vw,40px) 0; padding-right: var(--gutter); }
@media (min-width: 880px){ .hero__lead-col { border-right: var(--rule) solid var(--linea); padding-left: 0; } }
.hero__cta { margin-top: 26px; display:flex; flex-wrap:wrap; gap:0; }
.hero__cta .btn { margin-right: -2px; } /* reglas que se tocan, estilo suizo */
.hero__media-col { position: relative; }
.hero__media-col img { width:100%; height:100%; object-fit: cover; min-height: 260px; filter: saturate(.92); }
.figtag {
  position: absolute; left: 0; bottom: 0;
  background: var(--marino); color:#fff;
  font-family:'Raleway',sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding: 7px 12px;
}

/* meta-fila bajo el hero (datos clave en celdas con reglas) */
.metarow { display: grid; grid-template-columns: 1fr; border-top: var(--rule) solid var(--linea); }
@media (min-width: 720px){ .metarow { grid-template-columns: repeat(3, 1fr); } }
.metarow__cell { padding: 18px var(--gutter); }
.metarow__cell + .metarow__cell { border-top: 1px solid var(--linea-2); }
@media (min-width: 720px){
  .metarow__cell + .metarow__cell { border-top: 0; border-left: 1px solid var(--linea-2); }
  .metarow__cell { padding-inline: clamp(18px,2.4vw,34px); }
}
.metarow__cell strong { display:block; font-family:'Bricolage Grotesque',sans-serif; color: var(--marino); font-size: 1.05rem; margin-top: 6px; }

/* --------------------------------------------------------------------------- */
/* Seccion generica (numero + contenido en grilla)                             */
/* --------------------------------------------------------------------------- */
.section { border-top: var(--rule) solid var(--linea); }
.section__grid { display: grid; gap: clamp(18px, 3vw, 40px); padding-block: clamp(48px, 7vw, 96px); }
@media (min-width: 900px) { .section__grid { grid-template-columns: minmax(150px, 0.42fr) 1.58fr; } }
.section__aside { display:flex; flex-direction: column; gap: 12px; }
.section__body { max-width: 64ch; }
.section__body .sec-title { margin-bottom: 26px; }

/* lista de items con regla superior (estilo indice) */
.deflist { display: grid; gap: 0; }
.deflist li {
  padding: 20px 0;
  border-top: 1px solid var(--linea-2);
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  color: var(--ink-soft);
}
.deflist li:first-child { border-top: var(--rule) solid var(--linea); }
.deflist .mk {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color: var(--marino);
  font-size: .9rem; letter-spacing: .04em; line-height: 1.5; min-width: 1.6em;
}

/* remate de 3 (Seccion 2): tres celdas tipograficas rotundas */
.triplet { display: grid; gap: 0; margin-top: 34px; border: var(--rule) solid var(--linea); }
@media (min-width: 720px){ .triplet { grid-template-columns: repeat(3,1fr); } }
.triplet__c { padding: clamp(20px,2.6vw,30px); }
.triplet__c + .triplet__c { border-top: var(--rule) solid var(--linea); }
@media (min-width: 720px){ .triplet__c + .triplet__c { border-top: 0; border-left: var(--rule) solid var(--linea); } }
.triplet__n { font-family:'Raleway',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.2em; color: var(--jeans); }
.triplet__t { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color: var(--marino); font-size: clamp(1.4rem,2.6vw,2rem); margin-top: 10px; line-height: 1; }

/* --------------------------------------------------------------------------- */
/* Bloques de color rotundos                                                    */
/* --------------------------------------------------------------------------- */
.block { border-top: var(--rule) solid var(--linea); }
.block--marino { background: var(--marino); color: #fff; border-top-color: var(--marino); }
.block--marino h2, .block--marino h3 { color: #fff; }
.block--marino .lead, .block--marino .deflist li { color: rgba(255,255,255,.84); }
.block--marino .label { color: var(--pastel); }
.block--marino .deflist li:first-child { border-top-color: rgba(255,255,255,.4); }
.block--marino .deflist li { border-top-color: rgba(255,255,255,.18); }
.block--marino .mk { color: var(--pastel); }

.block--jeans { background: var(--jeans); color:#fff; border-top-color: var(--jeans); }
.block--jeans h2 { color:#fff; }
.block--jeans .lead, .block--jeans .deflist li { color: rgba(255,255,255,.9); }
.block--jeans .label { color: var(--pastel); }
.block--jeans .deflist li:first-child { border-top-color: rgba(255,255,255,.45); }
.block--jeans .deflist li { border-top-color: rgba(255,255,255,.22); }
.block--jeans .mk { color: var(--pastel); }

.block--pastel { background: var(--pastel); color: var(--marino); border-top-color: var(--marino); }
.block--pastel h2 { color: var(--marino); }
.block--pastel .label { color: var(--jeans); }

/* --------------------------------------------------------------------------- */
/* Seccion 5 — tabla tipografica de etapas                                      */
/* --------------------------------------------------------------------------- */
.stages { border: var(--rule) solid var(--marino); border-bottom: 0; margin-top: 34px; }
.stage {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: clamp(22px, 3vw, 40px) clamp(20px,2.6vw,36px);
  border-bottom: var(--rule) solid var(--marino);
  transition: background var(--t-snap), color var(--t-snap);
}
@media (min-width: 760px){
  .stage { grid-template-columns: 6.5rem 1fr; gap: clamp(20px,3vw,48px); align-items: baseline; }
}
.stage__k { display:flex; align-items: baseline; gap: .8rem; }
.stage__num { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size: clamp(2.6rem,6vw,4.2rem); line-height:.8; color: var(--marino); }
.stage__name { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size: clamp(1.7rem,3.2vw,2.4rem); color: var(--marino); }
.stage__desc { color: var(--marino); opacity: .9; max-width: 56ch; font-size: 1.05rem; }
.stage:hover { background: var(--marino); color: #fff; }
.stage:hover .stage__num, .stage:hover .stage__name { color: var(--pastel); }
.stage:hover .stage__desc { color: rgba(255,255,255,.92); opacity:1; }

/* --------------------------------------------------------------------------- */
/* Bloque imagen con marco suizo (figura + caption)                            */
/* --------------------------------------------------------------------------- */
.figure { border: var(--rule) solid var(--linea); }
.figure img { width: 100%; aspect-ratio: 16/11; object-fit: cover; filter: saturate(.92); }
.figure__cap {
  display:flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-top: var(--rule) solid var(--linea);
  font-family:'Raleway',sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-soft);
}
.split { display: grid; gap: 0; }
.split__text { padding: clamp(40px,6vw,88px) var(--gutter); }
.split--rev .split__media { order: -1; }
@media (min-width: 900px){
  .split { grid-template-columns: 1fr 1fr; }
  .split__media { border-left: var(--rule) solid var(--linea); }
  .split:not(.split--rev) .split__text { padding-right: clamp(28px,3vw,56px); }
  .split--rev .split__media { order: 0; border-left: 0; border-right: var(--rule) solid var(--linea); }
  .split--rev .split__text { padding-left: clamp(28px,3vw,56px); }
}
.split__media { display:flex; align-items: stretch; }
.split__media .figure { flex:1; display:flex; flex-direction: column; }
.split__media .figure img { flex:1; aspect-ratio: auto; min-height: 320px; }

/* --------------------------------------------------------------------------- */
/* Seccion 7 — Ciclos + logo                                                    */
/* --------------------------------------------------------------------------- */
.ciclos__grid { display:grid; gap:0; }
@media (min-width: 880px){ .ciclos__grid { grid-template-columns: 1.4fr 1fr; } }
.ciclos__logo { display:grid; place-items:center; padding: clamp(34px,5vw,64px); border-top: var(--rule) solid rgba(255,255,255,.4); }
@media (min-width:880px){ .ciclos__logo { border-top:0; border-left: var(--rule) solid rgba(255,255,255,.4); } }
.ciclos__logo img { max-height: 110px; width:auto; }

/* --------------------------------------------------------------------------- */
/* Cierre / Formulario                                                          */
/* --------------------------------------------------------------------------- */
.cierre__grid { display:grid; gap:0; border-top: var(--rule) solid var(--linea); }
@media (min-width: 900px){ .cierre__grid { grid-template-columns: 1.1fr .9fr; } }
.cierre__text { padding: clamp(40px,6vw,84px) var(--gutter) clamp(40px,6vw,84px) 0; }
@media (max-width:899px){ .cierre__text { padding-inline: 0; } }
.cierre__form { padding: clamp(34px,5vw,64px) 0 clamp(34px,5vw,64px) clamp(20px,3vw,56px); }
@media (min-width:900px){ .cierre__form { border-left: var(--rule) solid var(--linea); } }
@media (max-width:899px){ .cierre__form { border-top: var(--rule) solid var(--linea); padding-inline: 0; } }

.field { margin-bottom: 26px; }
.field label { display:block; font-family:'Raleway',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--marino); margin-bottom: 8px; }
.field input {
  width:100%; padding: 12px 2px; border:0; border-bottom: var(--rule) solid var(--linea);
  background: transparent; font-family:'Raleway',sans-serif; font-size: 1.15rem; color: var(--ink);
  border-radius:0; transition: border-color var(--t-snap);
}
.field input::placeholder { color: var(--acero); }
.field input:focus { outline: none; border-bottom-color: var(--jeans); }
.formnote { font-size:.8rem; color: var(--ink-soft); margin-top: 16px; }

/* --------------------------------------------------------------------------- */
/* Footer                                                                        */
/* --------------------------------------------------------------------------- */
.footer { background: var(--marino); color: rgba(255,255,255,.78); border-top: var(--rule) solid var(--linea); }
.footer a:hover { color: var(--pastel); }
.footer__grid { display:grid; gap:0; }
@media (min-width: 760px){ .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer__col { padding: clamp(30px,4vw,52px) var(--gutter); border-top: 1px solid rgba(255,255,255,.16); }
@media (min-width: 760px){ .footer__col { border-top:0; border-left: 1px solid rgba(255,255,255,.16); } .footer__col:first-child { border-left:0; } }
.footer__logo { height: 52px; width:auto; margin-bottom: 18px; }
.footer__h { font-family:'Raleway',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom: 16px; }
.footer__list { display:grid; gap: 12px; font-size:.95rem; }
.footer__legal {
  display:flex; flex-wrap:wrap; justify-content: space-between; gap: 12px 24px;
  padding: 18px var(--gutter); border-top: var(--rule) solid rgba(255,255,255,.3);
  font-size:.74rem; letter-spacing: .04em; color: rgba(255,255,255,.6);
}
.footer__legal .links { display:flex; flex-wrap:wrap; gap: 20px; text-transform: uppercase; letter-spacing:.14em; font-weight:700; }

/* WhatsApp flotante (cuadrado, suizo) */
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 55; width: 56px; height: 56px; background: var(--marino); color:#fff; display:grid; place-items:center; border: var(--rule) solid var(--marino); transition: background var(--t-snap), color var(--t-snap); }
.wa:hover { background:#fff; color: var(--marino); }
.wa svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------- */
/* Reveal (progressive enhancement: SIN JS todo visible)                        */
/* Solo se oculta cuando <html class="js"> y no hay reduced-motion              */
/* --------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
  html { scroll-behavior: auto; }
}