/* Primera pantalla de la peluquería (25-oct): qué es, para quién y cómo reservar sin bajar.
   Se carga la última: sobrescribe reserva-v8.css, yuli.css y citas.css sin tocarlos.
   Sin estilos en línea (la CSP los bloquea). Teal de texto #1A726C: 5,1:1 como mínimo sobre los fondos de la landing. */
:root{--teal-text:#1A726C;--borde-control:#858A8F}

/* ---------- cabecera y bloque de copia ---------- */
.header{padding-block:var(--space-2)}
.hero{padding-block:var(--space-1) 0}
.hero-copy{min-width:0;margin-bottom:var(--space-4)}
.hero-copy h1{font-size:30px;line-height:1.1;margin:var(--space-2) 0 0}
.hero-donde{text-wrap:balance;display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;font:800 15px/1.3 var(--font-ui);color:var(--ink-strong)}
.hero-donde .icon{margin-top:1px}
.hero-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:14px 0 0;padding:0}
.hero-fotos img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:14px;background:var(--surface)}
.hero-resena{margin:0 0 var(--space-6);padding:12px 14px;background:var(--surface);border-radius:16px}
.hero-resena blockquote{margin:0;font-size:15px;line-height:1.4;color:var(--ink-strong)}
.hero-resena p{margin:0}
.hero-resena figcaption{margin-top:6px;font:800 13px/1.2 var(--font-ui);color:var(--teal-text)}
.aviso-puntual{margin:12px 0 0;padding:10px 14px;border-radius:14px;background:#FDECEB;color:#7A2E2C}
.aviso-puntual[hidden]{display:none}
.aviso-puntual p{margin:0}
.aviso-titulo{font:800 16px/1.3 var(--font-ui)}
.aviso-detalle{margin-top:2px;font-size:13.5px;line-height:1.35}

/* ---------- bloque secundario (antes ocupaba la primera pantalla) ---------- */
.hero-extra{min-width:0;margin-top:var(--space-6)}
.hero-extra .lead{margin-top:0}
.yuli-galeria:focus-visible{outline:3px solid var(--ink-strong);outline-offset:2px}

/* ---------- reserva: la elección perro/gato es lo primero ---------- */
.cita .rv{background:#fff;border:2px solid var(--brand);border-radius:24px;padding:16px;gap:14px}
.rv-eligiendo .rv-pasos{display:none}
.rv-titulo{font-size:24px}
.rv-opcion{min-height:96px;border:2px solid var(--borde-control);box-shadow:0 2px 0 #33383C14}
.rv-opcion:hover{border-color:var(--ink-strong)}
.rv-opcion.sel{border-color:var(--teal-text);background:#E6F6F5;box-shadow:inset 0 0 0 1px var(--teal-text)}
.rv-opcion span{font:600 20px/1 var(--font-display)}
.rv-mascota{width:64px;height:64px}
.rv-opcion:not(.sel) .rv-mascota{opacity:1}

/* ---------- accesibilidad: foco visible, contraste y zonas táctiles de 44 px ---------- */
.rv button:focus-visible,.rv select:focus-visible,.rv input:focus-visible,.rv textarea:focus-visible,.rv a:focus-visible,.rv-titulo:focus-visible,.rv-hora:focus-visible{outline:3px solid var(--ink-strong);outline-offset:2px}
.rv .rv-input:focus-visible{border-color:var(--ink-strong)}
.rv-hora:focus-visible{background:var(--brand-50)}
.rv-input,.rv-prefijo,.rv-chip,.rv-hora,.rv-flecha,.rv-extra,.rv-servicio{border-color:var(--borde-control)}
.rv-servicio.sel,.rv-extra.sel{border-color:var(--teal-text)}
.rv-hora{min-height:44px;padding-block:0}
.rv-flecha{width:44px;height:44px}
.rv-chip{min-height:44px}
.rv-info{position:relative;isolation:isolate;width:44px;height:44px;margin-right:4px;border:0;background:none;color:var(--teal-text)}
.rv-info::before{content:"";position:absolute;inset:8px;z-index:-1;border:1.5px solid var(--teal-text);border-radius:50%;background:#fff}
.rv-check{min-height:44px;padding-block:6px;align-items:flex-start}
.rv-vacio{color:#6B7075}
.rv-aviso:focus-visible{outline:3px solid var(--ink-strong);outline-offset:2px}
.rv-servicio-precio,.rv-resumen b,.rv-link,.rv-foto-raza figcaption{color:var(--teal-text)}
.rv-extra input,.rv-check input{accent-color:var(--teal-text)}
.rv-ayuda{color:var(--ink)}
.yuli-cifras li{color:var(--teal-text)}
.consent button{min-height:44px}
.footer p a{display:inline-block;padding-block:12px}
.footer>a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- escritorio ---------- */
@media (min-width:768px){
  .header{padding-block:var(--space-4)}
  .hero{padding-block:var(--space-4) 0;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "widget" "extra" "mascot"}
  .hero-copy{margin-bottom:var(--space-6)}
  .hero-copy h1{font-size:40px}
  .hero-fotos{max-width:560px}
  .cita{grid-area:widget;max-width:640px;width:100%}
  .hero-extra{grid-area:extra}
  .hero-resena{max-width:560px}
  .aviso-puntual{max-width:560px}
}
@media (min-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) 592px;grid-template-areas:"copy widget" "extra widget" "mascot widget";align-content:start}
  .cita{grid-row:auto;max-width:592px}
  .hero{row-gap:0}
  .hero-copy{margin-bottom:var(--space-4)}
  .hero-copy h1{font-size:48px}
  .hero-resena blockquote{font-size:16px}
}
.header>a:first-child{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:420px){
  .cita .rv{padding:12px}
  .rv-columnas{gap:3px}
}