/* ===================================================================
   Acompaña · hoja de estilo
   Todo el tamano del sitio se deriva de --escala. Los botones de arriba
   la cambian y el resto se ajusta solo: letra, botones, iconos y
   espacios crecen juntos. Por eso la pagina no se desarma cuando una
   persona sube la letra al maximo, que es lo que pasa en casi todos los
   sitios que dicen ser accesibles.
   =================================================================== */
:root{
  --escala:1;
  --tinta:#15202B; --suave:#4A5A6A; --linea:#DDE3E9; --fondo:#F7F9FB;
  --papel:#FFFFFF;
  --azul:#0E5B8A; --azul-oscuro:#0A4266; --verde:#1B6B4A; --arena:#F2E9DC;
  --rojo:#A32020; --foco:#0E5B8A;
  --base:calc(18px * var(--escala));
  --radio:14px;
}
html[data-contraste="alto"]{
  --tinta:#000000; --suave:#1A1A1A; --linea:#000000; --fondo:#FFFFFF;
  --papel:#FFFFFF; --azul:#00396B; --azul-oscuro:#001F3D; --verde:#0A4D33;
  --arena:#FFFFFF; --rojo:#8A0000; --foco:#000000;
}
html[data-contraste="alto"] .tarjeta,
html[data-contraste="alto"] .paso,
html[data-contraste="alto"] .servicio,
html[data-contraste="alto"] .opcion,
html[data-contraste="alto"] .ficha,
html[data-contraste="alto"] .panel{ border-width:2px; }

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--base); line-height:1.6;
}
h1,h2,h3{ line-height:1.25; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:calc(var(--base) * 1.9); }
h2{ font-size:calc(var(--base) * 1.5); }
h3{ font-size:calc(var(--base) * 1.15); }
p{ margin:0 0 1em; }
a{ color:var(--azul); }
:focus-visible{ outline:3px solid var(--foco); outline-offset:3px; border-radius:4px; }
.contenedor{ max-width:1120px; margin:0 auto; padding:0 20px; }
.oculto{ display:none !important; }
.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* --- Barra de accesibilidad --------------------------------------- */
.acceso{ background:var(--azul-oscuro); color:#fff; padding:calc(10px*var(--escala)) 0; }
.acceso .contenedor{ display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; justify-content:center; }
.acceso .rotulo{ font-size:calc(var(--base) * .85); opacity:.92; }
.acceso button{
  font:inherit; font-size:calc(var(--base) * .85); font-weight:600;
  background:rgba(255,255,255,.12); color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:999px; padding:9px 16px; min-height:44px; cursor:pointer;
}
.acceso button:hover{ background:rgba(255,255,255,.24); }
.acceso button[aria-pressed="true"]{ background:#fff; color:var(--azul-oscuro);
  border-color:#fff; }

/* --- Encabezado y botones ------------------------------------------ */
.cabecera{ background:var(--papel); border-bottom:1px solid var(--linea); }
.cabecera .contenedor{ display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding-top:16px;
  padding-bottom:16px; flex-wrap:wrap; }
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none;
  color:var(--tinta); }
.marca .simbolo{
  width:calc(46px*var(--escala)); height:calc(46px*var(--escala));
  border-radius:12px; background:var(--azul); color:#fff;
  display:grid; place-items:center; font-weight:800;
  font-size:calc(var(--base)*1.1); flex:none;
}
.marca strong{ font-size:calc(var(--base)*1.2); }
.marca span{ display:block; font-size:calc(var(--base)*.78); color:var(--suave); }

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-weight:700; text-decoration:none; cursor:pointer;
  border-radius:var(--radio); padding:16px 26px; min-height:58px;
  border:2px solid transparent; text-align:center;
}
.boton-principal{ background:var(--verde); color:#fff; }
.boton-principal:hover{ filter:brightness(1.08); }
.boton-secundario{ background:var(--papel); color:var(--azul-oscuro);
  border-color:var(--azul); }
.boton-secundario:hover{ background:var(--arena); }
.boton-grande{ font-size:calc(var(--base)*1.1); padding:20px 32px;
  min-height:68px; }

/* --- Formulario de agendar ----------------------------------------- */
.avance{
  list-style:none; margin:0 0 26px; padding:0; display:flex; gap:10px;
  flex-wrap:wrap;
}
.avance li{
  display:flex; align-items:center; gap:10px; color:var(--suave);
  font-size:calc(var(--base)*.92); font-weight:600;
}
.avance .bolita{
  width:calc(38px*var(--escala)); height:calc(38px*var(--escala));
  border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--papel); border:2px solid var(--linea); color:var(--suave);
}
.avance li.activo{ color:var(--tinta); }
.avance li.activo .bolita{ background:var(--azul); border-color:var(--azul);
  color:#fff; }
.avance li.hecho .bolita{ background:var(--verde); border-color:var(--verde);
  color:#fff; }

.panel{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:calc(28px*var(--escala));
}
.ayuda{ color:var(--suave); font-size:calc(var(--base)*.92); }
.subtitulo{ margin-top:26px; font-size:calc(var(--base)*1.1); }

.opciones{ display:grid; gap:12px; margin:18px 0 22px; }
.opcion{
  display:flex; align-items:flex-start; gap:16px; cursor:pointer;
  border:2px solid var(--linea); border-radius:var(--radio);
  padding:18px 20px; background:var(--papel); min-height:72px;
}
.opcion:hover{ border-color:var(--azul); background:var(--arena); }
.opcion input{
  width:calc(26px*var(--escala)); height:calc(26px*var(--escala));
  margin:4px 0 0; flex:none; accent-color:var(--azul);
}
.opcion .cuerpo strong{ display:block; }
.opcion .cuerpo span{ color:var(--suave); font-size:calc(var(--base)*.9); }
.opcion:has(input:checked){ border-color:var(--verde); background:#F1F7F4; }
html[data-contraste="alto"] .opcion:has(input:checked){ background:#fff;
  border-width:4px; }

.campo{ display:block; margin:18px 0; }
.campo .etiqueta{ display:block; font-weight:700; margin-bottom:8px; }
.campo input, .campo select{
  font:inherit; width:100%; padding:16px 18px; min-height:62px;
  border:2px solid var(--linea); border-radius:var(--radio);
  background:var(--papel); color:var(--tinta);
}
.campo input:focus, .campo select:focus{ border-color:var(--azul); }
.campo .ayuda{ display:block; margin-top:7px; }

.dias, .horas{ display:grid; gap:12px; margin:16px 0; }
.dias{ grid-template-columns:repeat(3,1fr); }
.horas{ grid-template-columns:repeat(3,1fr); }
.ficha{
  font:inherit; cursor:pointer; background:var(--papel);
  border:2px solid var(--linea); border-radius:var(--radio);
  padding:16px 12px; min-height:76px; text-align:center; color:var(--tinta);
}
.ficha strong{ display:block; }
.ficha span{ display:block; color:var(--suave);
  font-size:calc(var(--base)*.85); }
.ficha-hora{ min-height:62px; font-weight:700; }
.ficha:hover{ border-color:var(--azul); background:var(--arena); }
.ficha.elegida{ border-color:var(--verde); background:#F1F7F4; }
.ficha.elegida::after{ content:" ✓"; color:var(--verde); font-weight:800; }
html[data-contraste="alto"] .ficha.elegida{ background:#fff; border-width:4px; }

.botonera{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.botonera .boton-grande{ flex:1; min-width:220px; }

.error{
  color:var(--rojo); font-weight:700; margin:10px 0 0;
  font-size:calc(var(--base)*.92);
}
.error::before{ content:"⚠ "; }

/* --- Confirmacion --------------------------------------------------- */
.visto{
  width:calc(72px*var(--escala)); height:calc(72px*var(--escala));
  border-radius:50%; background:var(--verde); color:#fff;
  display:grid; place-items:center; font-size:calc(var(--base)*2);
  font-weight:800; margin-bottom:18px;
}
.resumen{ margin:22px 0; border-top:1px solid var(--linea); }
.resumen .fila{
  display:flex; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--linea);
}
.resumen dt{ color:var(--suave); margin:0; }
.resumen dd{ margin:0; font-weight:700; text-align:right; }

.mensaje-wa{
  border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; margin-top:22px;
}
.mensaje-cabecera{
  background:var(--arena); padding:12px 18px; font-weight:700;
  font-size:calc(var(--base)*.9);
}
.globo{
  margin:18px; padding:16px 18px; background:#E7F3EC;
  border-radius:16px 16px 16px 4px; line-height:1.55;
}
html[data-contraste="alto"] .globo{ background:#fff; border:2px solid #000; }

.nota-demo{
  margin-top:26px; color:var(--suave); font-size:calc(var(--base)*.85);
  text-align:center;
}

/* --- Telefono ------------------------------------------------------- */
@media (max-width:760px){
  .dias{ grid-template-columns:repeat(2,1fr); }
  .horas{ grid-template-columns:repeat(2,1fr); }
  .botonera .boton{ width:100%; }
  h1{ font-size:calc(var(--base)*1.55); }
}