/* Ajustes propios de la landing. Aparte de landing/tokens.css, que es copia byte a byte
   del demo aprobado por el cliente y no se toca. */
/* ---------- pie de la landing ----------
   El logo va centrado arriba, y debajo las 4 columnas en fila. Antes la marca ocupaba la primera
   columna (1.6fr) y descuadraba el resto. En el teléfono se apilan de dos en dos: cuatro columnas
   de 90px no las lee nadie. Va acá y no en landing/tokens.css, que es copia del demo aprobado. */
.ft__marca{display:flex;justify-content:center;margin-bottom:2.2rem}
.ft__marca .brand{font-size:1.15rem}
.ft .ft__grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){ .ft .ft__grid{grid-template-columns:1fr 1fr;gap:1.6rem} }
@media(max-width:420px){ .ft .ft__grid{grid-template-columns:1fr} }

/* ---------- reseñas de Google (cinta que no para) ----------
   Reusa la cinta infinita de los servicios (.marquee), que ya trae la pausa al pasar por encima
   y el grupo duplicado para que el bucle no salte. Acá solo va el aspecto de la tarjeta. */
.marquee--resenas .marquee__track{animation-duration:60s}   /* más lento: hay que poder leerlo */
/* La cinta de servicios se detiene al pasar el mouse (regla de tokens.css). Acá NO: el cliente
   la quiere corriendo siempre, así que se anula esa pausa. Se mantiene la de teclado, que sirve
   a quien navega con tabulador y no molesta a nadie con el mouse. */
.marquee--resenas:hover .marquee__track{animation-play-state:running}
.marquee--resenas .marquee__group{gap:1rem;padding-right:1rem;align-items:stretch}

.resena{
  width:340px;flex:none;display:flex;flex-direction:column;gap:1rem;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.4rem;
}
.resena__txt{margin:0;font-size:.95rem;line-height:1.55;color:var(--text)}
.resena__pie{margin-top:auto;display:flex;align-items:center;gap:.7rem}
.resena__ini{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--surf-2),var(--accent));color:#fff;
  font-weight:800;font-size:.82rem;letter-spacing:.02em;
}
.resena__pie b{display:block;font-size:.9rem;line-height:1.2}
.resena__pie small{color:var(--faint);font-size:.75rem}
.estrellas{color:var(--accent);letter-spacing:.08em}

/* En el teléfono, más pequeñas: una tarjeta de 340px se come la pantalla y se lee peor. */
@media(max-width:560px){
  .marquee--resenas .marquee__track{animation-duration:45s}
  .marquee--resenas .marquee__group{gap:.7rem;padding-right:.7rem}
  .resena{width:250px;padding:1rem;gap:.7rem}
  .resena__txt{font-size:.84rem;line-height:1.5}
  .resena__ini{width:32px;height:32px;font-size:.72rem}
  .resena__pie b{font-size:.82rem}
  .resena__pie small{font-size:.7rem}
}

/* Quien pide menos movimiento no debería pelear con una cinta que no para. */
@media(prefers-reduced-motion:reduce){
  .marquee--resenas .marquee__track{animation:none}
  .marquee--resenas{overflow-x:auto}
}

/* ---------- acceso a la tienda en el header del teléfono ----------
   En escritorio la tienda ya está en el menú de navegación, así que el botón sobra: se oculta.
   En el teléfono ese menú vive detrás de la hamburguesa, y la tienda es el destino que más
   queremos a mano, así que el botón se muestra. La regla de tokens.css esconde los .btn--ghost
   del header en móvil (era para "Mi Portal"), y este es justo el caso contrario: se re-muestra. */
.hdr__tienda{display:none}
@media(max-width:860px){
  .hdr__cta .hdr__tienda{display:inline-flex;gap:.35rem}
  .hdr__cta{gap:.35rem}
}
/* Medido en el navegador: con "Tienda" escrito, el logo + los dos botones empujaban la
   hamburguesa FUERA de la pantalla (borde en 404px con ventana de 390) y el menú quedaba
   inalcanzable. Por eso debajo de 480px la tienda queda como icono: gana ~55px, que es justo
   lo que hacía falta. */
@media(max-width:480px){
  .hdr__tienda .rotulo{display:none}
  .hdr__tienda{padding-inline:.75em}
}

/* ---------- iconos dentro de los botones ----------
   El SVG que genera icon() en app.js viene solo con viewBox, sin width/height. Dentro de un
   .btn (que es flex) eso colapsa a 0×0: NINGÚN icono de botón se ha visto nunca en la landing
   —se notó recién al dejar el botón de la tienda solo con icono, que salía vacío—. Es el mismo
   arreglo que ya lleva el panel en app-extra.css. */
.btn svg{width:1.15em;height:1.15em;flex:none}

/* Logo más grande en la página principal (pedido del taller). Este archivo lo carga SOLO la
   landing, así que no hace falta acotar el selector: el logo del sistema comparte regla con
   su barra superior y agrandarlo allá desacomoda la cabecera. El archivo es de 200x200, así
   que sube sin perder nitidez. El `border-radius` va en el atributo `style` del <img>, que
   gana por especificidad, por eso acá solo se toca el tamaño. */
.ft__marca .brand__mark { width: 64px; height: 64px; }

@media (max-width: 720px) {
  /* En el teléfono la cabecera ya iba justa con el logo y los dos botones, así que acá el
     logo crece menos. Medido a 390px: el borde derecho pasa de 411 a 371, dentro de la
     pantalla. */
  .ft__marca .brand__mark { width: 56px; height: 56px; }

  /* La cabecera YA se salía 7px de la pantalla a 390px antes de agrandar el logo (medido):
     el nombre de la marca no podía encogerse y empujaba la hamburguesa fuera del borde. Con
     `min-width:0` el texto se recorta antes que empujar, que es lo que se espera de lo único
     prescindible de la fila: el logo al lado ya dice la marca. */
  .hdr__in { gap: .5rem; }
  .hdr .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* El logo real (lockup horizontal) reemplaza a la marca cuadrada + el nombre escrito al lado:
   el propio logo ya dice "RUSTISNORKEL", así que repetirlo en texto era decirlo dos veces.
   `height:auto` es obligatorio: con width/height en el atributo, sin esto se deforma en móvil. */
/* El lockup lleva mucho NEGRO —el contorno de la bandera y las dos cintas de "Multiservicios Luis
   Murillo" y "ACCESORIOS 4X4"— y el header es casi negro (rgba(19,16,8,.55)): esa mitad del logo
   desaparecía y quedaban flotando dos textos blancos sin su cinta debajo. La pastilla clara es el
   fondo para el que se dibujó el logo; sin ella, agrandarlo solo agranda la mancha invisible.
   Por eso el header sube de 60 a 72 px: es lo que necesita el logo para crecer sin ahogarse. */
.brand--logo { display: inline-flex; align-items: center; background: #FBF7EF; padding: .34rem .6rem; border-radius: 13px; }
.brand__logo { width: auto; height: 54px; max-width: 100%; display: block; }
.hdr { height: 72px; }
.ft__marca .brand__logo { height: 72px; }

@media (max-width: 720px) {
  /* En 390 px la fila del header deja ~21 px de sobra, así que acá el logo NO crece (con 42 px se
     sale y `overflow:hidden` lo recortaría). Igual se lee más grande: ahora se ve entero. */
  .brand--logo { padding: .28rem .42rem; border-radius: 10px; }
  .brand__logo { height: 40px; }
  .ft__marca .brand__logo { height: 58px; }
}

/* ============================================================
   PEDIR CITA
   Los días y las horas los arma el servidor (api/citas.py). Acá solo se pintan: pastillas de
   radio, que es un control nativo: el radio se saca de la vista y el estado marcado lo pinta su
   propio `:checked`, así que se ve seleccionado sin una línea de JS.
   ============================================================ */
.cita{max-width:720px;margin-inline:auto;display:grid;gap:1.6rem}
.cita__paso{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;background:var(--surf);min-width:0}
.cita__paso legend{display:flex;align-items:center;gap:.55rem;font-weight:700;padding:0 .5rem;margin-left:-.2rem}
.cita__n{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:.82rem;font-weight:800;flex:none;
}
/* Los días son una fila que se desliza: a 14 pastillas no le caben dos filas sin empujar el resto
   del formulario fuera de la pantalla del teléfono. */
.cita__dias{display:flex;align-items:stretch;gap:.5rem;overflow-x:auto;padding:.2rem .2rem .6rem;scroll-snap-type:x proximity}
.cita__dias::-webkit-scrollbar{height:6px}
.cita__dias::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.cita__horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
/* `[hidden]` no basta: estas dos son grid/flex y su `display` propio se come el del navegador. */
.cita__horas[hidden]{display:none}
.cita__dia,.cita__hora{cursor:pointer;scroll-snap-align:start}
.cita__dia input,.cita__hora input{position:absolute;opacity:0;pointer-events:none}
.cita__dia>span,.cita__hora>span{
  display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius-xs);
  background:var(--base);color:var(--muted);font-weight:600;transition:border-color .2s,color .2s,background .2s;
  /* 44 px de alto: es un objetivo táctil, se toca desde el teléfono con el pulgar. */
  min-height:44px;padding:.45rem .7rem;text-align:center;line-height:1.15;
}
/* `nowrap`: sin esto "mar 4" se partía en dos líneas y la pastilla quedaba más alta que las
   demás, con la fila descuadrada (visto en el navegador). */
.cita__dia>span{min-width:64px;white-space:nowrap}
.cita__dia>span small{display:block;font-size:.7rem;color:var(--faint);font-weight:500;text-transform:uppercase}
.cita__hora>span{font-size:.9rem;white-space:nowrap}
.cita__dia>span:hover,.cita__hora>span:hover{border-color:var(--line-strong);color:var(--text)}
.cita__dia input:checked+span,.cita__hora input:checked+span{
  border-color:var(--accent);background:rgba(255,107,26,.12);color:var(--text);
}
.cita__dia input:checked+span small{color:var(--accent)}
/* El foco de teclado va en la pastilla, que es lo que se ve: el radio está oculto. */
.cita__dia input:focus-visible+span,.cita__hora input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
/* ---------- la página /cita ----------
   La portada empieza con el hero a pantalla completa, así que nunca necesitó aire arriba; esta
   página empieza con un título y el header es fijo (72 px + 12 de aire), que se lo comería. */
.cita-pag{padding-top:calc(72px + 12px + clamp(28px,5vw,60px))}
.cita-pag h1{font-size:clamp(2rem,5vw,3.2rem)}
.cita__otra{text-align:center;color:var(--muted);margin-top:2.4rem}
.cita__otra a{color:var(--text);border-bottom:1px solid var(--line-strong)}
.cita__otra a:hover{color:var(--accent);border-color:var(--accent)}

/* Va dentro de la rejilla (es hija del grid), así que necesita ocupar la fila entera. */
.cita__libres{grid-column:1/-1;margin:.5rem 0 0;color:var(--faint);font-size:.8rem;text-align:center}
.cita__enviar{width:100%;justify-content:center}
.cita__nota{text-align:center;color:var(--faint);font-size:.82rem;margin-top:-.6rem}
.cita__aviso{
  display:flex;align-items:center;gap:.6rem;max-width:720px;margin:0 auto 1.4rem;
  padding:.85rem 1.1rem;border-radius:var(--radius-xs);
  border:1px solid var(--bad);background:var(--bad-bg);color:var(--text);
}

@media (max-width: 560px) {
  .cita{gap:1.1rem}
  .cita__paso{padding:1rem 1rem 1.1rem}
  /* Dos columnas fijas: con `auto-fill` a 84px salían tres apretadas y "10:30 am" se partía. */
  .cita__horas{grid-template-columns:1fr 1fr}
  /* Nombre y vehículo, uno debajo del otro: a 175px de ancho "Toyota Hilux 2018" se cortaba. */
  .cita .row-2{grid-template-columns:1fr}
}

/* El header es fijo (72px + 12 de aire): sin esto, saltar a #cita —o a cualquier ancla del menú—
   deja el título tapado debajo. Va en `html` y no como `scroll-margin` por sección: son cuatro
   anclas y el header es uno. */
html{scroll-padding-top:96px}