/* Tokens de marca de Horita. Mismos valores que docs/v1/pagina_v1.html. */
:root{
  --bg:#f6f5f1; --paper:#ffffff; --ink:#1c2138; --muted:#5d6278; --line:#dcdbe3;
  --accent:#c2366b; --accent-soft:#f8e3ec; --ok:#1f7a55; --ok-soft:#dff2e8;
  --warn:#9a5b00; --warn-soft:#fbeed6; --mal:#a33; --mal-soft:#fbe3e3;
  --bubble-in:#ffffff; --bubble-out:#e6ecfb; --chat:#ecebe6;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12141d; --paper:#1b1e2a; --ink:#ecebf2; --muted:#a3a6b8; --line:#2f3345;
  --accent:#ef6d9b; --accent-soft:#3a1d2a; --ok:#5fd29f; --ok-soft:#173327;
  --warn:#f2b35a; --warn-soft:#3a2c14; --mal:#f08a8a; --mal-soft:#3a1c1c;
  --bubble-in:#23273a; --bubble-out:#2c3656; --chat:#171a25; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12141d; --paper:#1b1e2a; --ink:#ecebf2; --muted:#a3a6b8; --line:#2f3345;
  --accent:#ef6d9b; --accent-soft:#3a1d2a; --ok:#5fd29f; --ok-soft:#173327;
  --warn:#f2b35a; --warn-soft:#3a2c14; --mal:#f08a8a; --mal-soft:#3a1c1c;
  --bubble-in:#23273a; --bubble-out:#2c3656; --chat:#171a25; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1rem;
  line-height:1.6;margin:0;padding:1.5rem 16px 4rem;overflow-x:hidden}
.wrap{max-width:62rem;margin:0 auto;display:grid;gap:4rem}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3.2vw,1.95rem);font-weight:700}
h3{font-size:1.06rem;font-weight:600}
p{margin:0;max-width:64ch}
a{color:var(--accent)}
ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem}
.eyebrow{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.note{font-size:.85rem;color:var(--muted)}
.seccion{display:grid;gap:1.4rem}

/* Marca */
.marca{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;
  font-size:1.4rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.marca .reloj{position:relative;width:1.55rem;height:1.55rem;border-radius:50%;
  border:2.5px solid var(--accent);flex:none}
.marca .reloj::before,.marca .reloj::after{content:"";position:absolute;left:50%;bottom:50%;
  width:2.5px;border-radius:2px;background:var(--accent);transform-origin:50% 100%}
.marca .reloj::before{height:.48rem;transform:translateX(-50%)}
.marca .reloj::after{height:.36rem;transform:translateX(-50%) rotate(120deg)}
.cabecera{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.cabecera nav{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.9rem}
.cabecera nav a{color:var(--muted);text-decoration:none}
.cabecera nav a:hover{color:var(--accent)}

/* Portada */
.portada{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem;align-items:center}
.portada-texto{display:grid;gap:1.1rem;min-width:0}
.boton{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;
  padding:.8rem 1.5rem;border-radius:999px;border:none;font-size:1rem;font-family:var(--body);cursor:pointer}
.boton.suave{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.botones{display:flex;flex-wrap:wrap;gap:.7rem}

/* Teléfono de ejemplo */
.tel{background:var(--chat);border:1px solid var(--line);border-radius:26px;
  padding:.85rem .8rem 1.1rem;display:grid;gap:.5rem;max-width:23rem;width:100%;
  justify-self:center;min-width:0}
.tel-top{display:flex;align-items:center;gap:.6rem;padding:0 .2rem .6rem;border-bottom:1px solid var(--line)}
.av{width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#fff;flex:none;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.95rem}
.tel-top b{display:block;font-size:.92rem;line-height:1.2}
.tel-top span{font-size:.72rem;color:var(--muted)}
.dia{text-align:center;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:.2rem 0}
.msg{background:var(--bubble-in);border-radius:14px 14px 14px 4px;padding:.6rem .7rem;font-size:.86rem;
  line-height:1.45;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.msg.out{background:var(--bubble-out);border-radius:14px 14px 4px 14px;margin-left:auto;max-width:70%}
.msg time{display:block;font-size:.66rem;color:var(--muted);text-align:right;margin-top:.25rem}
.msg .pie-msg{font-size:.72rem;color:var(--muted);margin-top:.35rem}
.bts{display:grid;gap:.25rem;margin-top:.5rem}
.bts span{background:var(--paper);border:1px solid var(--line);border-radius:8px;text-align:center;
  padding:.4rem;font-size:.8rem;color:var(--accent);font-weight:600}

/* Pestañas de los tres casos */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.tabs button{background:var(--paper);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:.45rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;
  font-family:var(--body)}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.caso{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:start}
.caso[hidden]{display:none}
.caso-texto{display:grid;gap:.9rem}

/* Tarjetas */
.tarjetas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tarjeta{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.3rem;
  display:grid;gap:.7rem;align-content:start}
.tarjeta.destacada{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.precio{font-family:var(--display);font-size:1.7rem;font-weight:700;line-height:1.1}
.precio small{font-family:var(--body);font-size:.85rem;font-weight:500;color:var(--muted)}

/* Pasos */
.pasos{display:grid;gap:1.1rem;counter-reset:paso}
.paso{display:grid;grid-template-columns:2rem 1fr;gap:.9rem;align-items:start}
.paso>div{display:grid;gap:.3rem}
.paso::before{counter-increment:paso;content:counter(paso);font-family:var(--display);font-weight:700;
  background:var(--accent-soft);color:var(--accent);width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;font-size:.95rem}

/* Colores del calendario */
.colores{display:grid;gap:.45rem;font-size:.95rem}
.colores div{display:flex;gap:.6rem;align-items:baseline}

/* Calculadora */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.6rem;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.campos{display:grid;gap:1rem;align-content:start}
.campo{display:grid;gap:.35rem}
.campo label{font-size:.88rem;font-weight:600}
.campo input{font-family:var(--body);font-size:1rem;padding:.55rem .7rem;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.resultados{display:grid;gap:.6rem;align-content:start}
.fila{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-bottom:.5rem;border-bottom:1px dashed var(--line)}
.fila:last-child{border-bottom:none}
.fila b{font-family:var(--display);font-size:1.25rem;white-space:nowrap}
.fila.favor b{color:var(--ok)}

/* Informe */
.informe{display:grid;gap:.4rem;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:1.2rem;max-width:30rem}
.informe .fila b{font-size:1.05rem}

/* Preguntas */
details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem}
details+details{margin-top:.6rem}
summary{font-weight:600;cursor:pointer;font-family:var(--display);font-size:1rem}
details p{margin-top:.6rem}

/* Formulario */
.demo{background:var(--accent-soft);border:1px solid var(--accent);border-radius:16px;
  padding:1.6rem;display:grid;gap:1.2rem}
form{display:grid;gap:.9rem;max-width:30rem}
form .campo input,form .campo textarea{background:var(--paper)}
form textarea{font-family:var(--body);font-size:1rem;padding:.55rem .7rem;border-radius:9px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);min-height:4.5rem;resize:vertical}
.aviso-form{font-size:.9rem;font-weight:600;padding:.7rem .9rem;border-radius:9px}
.aviso-form.ok{background:var(--ok-soft);color:var(--ok)}
.aviso-form.error{background:var(--mal-soft);color:var(--mal)}
.aviso-form[hidden]{display:none}

.pie{border-top:1px solid var(--line);padding-top:1.5rem;display:grid;gap:.5rem;
  font-size:.88rem;color:var(--muted)}
.pie a{color:var(--muted)}

/* Páginas de texto legal y kit */
.legal{display:grid;gap:1.4rem}
.legal h2{font-size:1.15rem;margin-top:.8rem}
.legal p,.legal li{max-width:68ch}

@media (max-width:760px){
  .portada,.caso,.calc{grid-template-columns:1fr}
  .wrap{gap:3rem}
}