/* ==========================================================================
   El sillón — Clínica Alerces (paso 3)
   Hereda la identidad de la landing: mismo azul (#0F0AF0), misma barra de 4px
   como único gesto, mismo casi-cero de radio. Lo que cambia es el propósito:
   allá se lee, aquí se hace una cosa y se sale.
   Sin build, sin dependencias, sin fuentes externas. Abre por file://.
   ========================================================================== */

:root{
  --azul:        #0F0AF0;   /* muestreado del logotipo oficial (gm_07) */
  --azul-hondo:  #0A07A8;
  --azul-papel:  #F2F2FF;

  --tinta:       #101014;
  --tinta-media: #4A4A55;
  --linea:       #E2E2EA;
  --papel:       #FFFFFF;
  --papel-hondo: #F7F7FA;

  --alerta:      #8A5300;   /* ámbar oscuro: legible sobre papel */
  --alerta-papel:#FFF7E8;
  --ok:          #146A3A;
  --ok-papel:    #ECF7F0;

  --barra: 4px;
  --radio: 2px;

  --ancho: 760px;           /* más angosto que la landing: es un formulario */
  --pad-x: clamp(1.25rem, 5vw, 2.5rem);

  --tipo: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--tipo);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.6;
  color:var(--tinta);
  background:var(--papel-hondo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
/* height:auto es obligatorio: los atributos width/height del <img> ganan
   sobre cualquier aspect-ratio y dejarían la imagen clavada en su alto. */

h1,h2,h3{ line-height:1.15; letter-spacing:-0.021em; margin:0; text-wrap:balance; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* [hidden] tiene que ganarle a cualquier display: los pasos son .paso, que
   es display:block, y sin esto un paso oculto seguiría ocupando pantalla.
   (La misma lección del panel invisible de la carta de Thor.) */
[hidden]{ display:none !important; }

.envoltura{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.saltar{
  position:absolute; left:-9999px;
  background:var(--azul); color:#fff; padding:.75rem 1.25rem; z-index:100;
}
.saltar:focus{ left:.5rem; top:.5rem; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--azul);
  outline-offset:2px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera{
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.cabecera__fila{
  display:flex; align-items:center; gap:1rem;
  min-height:64px;
}
.marca{ display:block; flex:0 0 auto; line-height:0; }
.marca img{ width:clamp(126px, 30vw, 160px); }
.cabecera__tel{
  margin-left:auto;
  font-size:.875rem; font-weight:600;
  color:var(--azul); text-decoration:none;
  white-space:nowrap;
}
.cabecera__tel:hover{ text-decoration:underline; }

/* ── Cabezal de la página ─────────────────────────────────────────────── */
.cabezal{ padding-block:clamp(1.75rem, 5vw, 3rem) 1.5rem; }
.kicker{
  display:inline-block;
  font-size:.75rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--azul);
  margin:0 0 .9rem;
  padding-top:.9rem;
  border-top:var(--barra) solid var(--azul);
}
.cabezal h1{
  font-size:clamp(1.75rem, 1.3rem + 2.2vw, 2.625rem);
  font-weight:740; letter-spacing:-0.032em;
  max-width:18ch;
}
.cabezal p{
  margin-top:.9rem; color:var(--tinta-media);
  max-width:52ch;
}

/* ── El aviso que sostiene todo el diseño ─────────────────────────────── */
/* Una solicitud NO es una hora tomada. Si esto no se dice en cada pantalla,
   el paciente cree que tiene hora y llega un martes a las 10. */
.aviso{
  display:flex; gap:.75rem; align-items:flex-start;
  background:var(--alerta-papel);
  border-left:var(--barra) solid var(--alerta);
  padding:.95rem 1.1rem;
  font-size:.9375rem;
  color:#3B2A05;
  margin-block:1.5rem;
}
.aviso strong{ color:#2A1E03; }
.aviso--ok{
  background:var(--ok-papel);
  border-left-color:var(--ok);
  color:#0E3D22;
}
.aviso__icono{ flex:0 0 auto; margin-top:.15rem; }

/* ── Progreso ─────────────────────────────────────────────────────────── */
.progreso{
  display:flex; gap:.5rem; list-style:none; margin:0 0 1.75rem; padding:0;
  font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-media);
}
.progreso li{ flex:1 1 0; min-width:0; padding-top:.6rem; border-top:var(--barra) solid var(--linea); }
.progreso li.esta{ color:var(--azul); border-top-color:var(--azul); }
.progreso li.lista{ color:var(--tinta-media); border-top-color:var(--azul); }
.progreso span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── La tarjeta del formulario ────────────────────────────────────────── */
.tarjeta{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(1.25rem, 4vw, 2rem);
  margin-bottom:2rem;
}
.paso h2{
  font-size:clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  font-weight:700;
  margin-bottom:.4rem;
}
.paso__ayuda{
  color:var(--tinta-media); font-size:.9375rem; margin-bottom:1.35rem;
}

/* ── Opciones (tratamiento, franja) ───────────────────────────────────── */
.opciones{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.6rem;
  grid-template-columns:1fr;
}
@media (min-width:560px){
  .opciones--dos{ grid-template-columns:repeat(2,1fr); }
}
.opcion{ min-width:0; }
.opcion input{
  position:absolute; opacity:0; width:0; height:0;
}
.opcion label{
  display:block; cursor:pointer;
  border:1px solid var(--linea); border-left:var(--barra) solid var(--linea);
  border-radius:var(--radio);
  padding:.85rem 1rem;
  background:var(--papel);
  transition:border-color .16s ease, background-color .16s ease;
}
.opcion label:hover{ border-color:#C9C9D6; border-left-color:var(--azul); }
.opcion input:checked + label{
  border-color:var(--azul); border-left-color:var(--azul);
  background:var(--azul-papel);
}
/* El foco del teclado tiene que verse: el input real está oculto. */
.opcion input:focus-visible + label{ outline:3px solid var(--azul); outline-offset:2px; }
.opcion b{ display:block; font-weight:640; font-size:1rem; }
.opcion small{ display:block; color:var(--tinta-media); font-size:.875rem; margin-top:.2rem; }

/* ── Campos ───────────────────────────────────────────────────────────── */
.campo{ margin-bottom:1.25rem; }
.campo label{
  display:block; font-weight:640; font-size:.9375rem; margin-bottom:.4rem;
}
.campo input[type="text"], .campo input[type="tel"], .campo textarea{
  width:100%;
  font:inherit; font-size:1rem;      /* 16px o iOS hace zoom al enfocar */
  color:var(--tinta);
  background:var(--papel);
  border:1px solid #C9C9D6;
  border-radius:var(--radio);
  padding:.7rem .85rem;
}
.campo textarea{ resize:vertical; min-height:5.5rem; line-height:1.5; }
.campo input:focus{ border-color:var(--azul); }
.campo__pista{ font-size:.8125rem; color:var(--tinta-media); margin-top:.35rem; }
.campo__error{
  font-size:.8438rem; color:#9B1C1C; font-weight:600; margin-top:.35rem;
}

.consentimiento{
  display:flex; gap:.7rem; align-items:flex-start;
  background:var(--papel-hondo);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:.9rem 1rem;
  font-size:.875rem; color:var(--tinta-media);
  margin-bottom:1.25rem;
}
.consentimiento input{ margin-top:.2rem; flex:0 0 auto; width:1.1rem; height:1.1rem; accent-color:var(--azul); }
.consentimiento a{ color:var(--azul); }

/* ── Botones ──────────────────────────────────────────────────────────── */
/* Se declaran con a./button. para que ninguna regla de contexto les gane el
   padding por especificidad (la lección de .nav-links a de Surgestión). */
a.boton, button.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem;
  font-family:inherit; font-size:.9375rem; font-weight:650;
  text-decoration:none; border-radius:var(--radio);
  border:2px solid transparent; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease,
             transform .08s ease;
}
button.boton--solido, a.boton--solido{ background:var(--azul); color:#fff; }
button.boton--solido:hover, a.boton--solido:hover{ background:var(--azul-hondo); }
button.boton--linea, a.boton--linea{
  background:transparent; color:var(--tinta); border-color:var(--linea);
}
button.boton--linea:hover, a.boton--linea:hover{
  background:var(--azul-papel); border-color:var(--azul); color:var(--azul-hondo);
}
a.boton:active, button.boton:active{ transform:translateY(1px); }
button.boton[disabled]{ opacity:.55; cursor:progress; }
a.boton--ancho, button.boton--ancho{ width:100%; }

.acciones{
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  margin-top:1.75rem;
}
.acciones .boton--linea{ order:2; }
@media (min-width:560px){
  .acciones .boton--linea{ order:0; margin-right:auto; }
}

/* ── Resumen de la solicitud ──────────────────────────────────────────── */
.resumen{ margin:0; }
.resumen div{
  display:grid; gap:.15rem 1rem;
  padding:.75rem 0;
  border-top:1px solid var(--linea);
}
@media (min-width:520px){
  .resumen div{ grid-template-columns:11rem 1fr; }
}
.resumen dt{ font-size:.8125rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-media); }
.resumen dd{ margin:0; font-weight:600; }

/* ── Página de gracias / reseña ───────────────────────────────────────── */
.centro{ text-align:left; }
.numerada{
  list-style:none; counter-reset:paso; margin:1.5rem 0 0; padding:0;
}
.numerada li{
  counter-increment:paso;
  position:relative; padding-left:2.75rem; margin-bottom:1.1rem;
}
.numerada li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute; left:0; top:.1rem;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; color:var(--azul);
  padding-top:.55rem;
  border-top:var(--barra) solid var(--azul);
  width:1.9rem;
}
.numerada b{ display:block; font-weight:660; }
.numerada p{ color:var(--tinta-media); font-size:.9375rem; margin:.2rem 0 0; }

.estrellas{
  display:flex; gap:.35rem; margin:1.25rem 0 0;
  font-size:1.75rem; line-height:1; color:var(--azul);
}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie{
  background:var(--tinta); color:rgba(255,255,255,.72);
  padding-block:2rem; margin-top:2.5rem;
  font-size:.8438rem;
}
.pie strong{ color:#fff; }
.pie a{ color:rgba(255,255,255,.86); }
.pie__fila{ display:grid; gap:.4rem; }
.pie .menudo{ color:rgba(255,255,255,.5); }

.menudo{ font-size:.8438rem; color:var(--tinta-media); }

/* ── Impresión: nadie imprime esto, pero si lo hace que sea legible ───── */
@media print{
  .cabecera__tel, .acciones, .progreso{ display:none; }
  body{ background:#fff; }
}