/*
 * Sitio público de RB TECH.
 *
 * Mismo lenguaje visual que la app interna (identidad de la orden en papel +
 * el aire de Apple), pero pensado para alguien que llega de Google y no
 * conoce el negocio: menos densidad, más foto, y el WhatsApp siempre a mano.
 */

:root {
  --negro: #000;
  --azul: #1ca0e0;
  --azul-hover: #0b8ecb;
  --azul-tinta: #1a4d8f;
  --marino: #16305a;
  --verde-wa: #25d366;

  --fondo: #fbfbfd;
  --panel: #fff;
  --tinta: #1d1d1f;
  --tenue: #6e6e73;
  --linea: #d2d2d7;
  --peligro: #d0342c;
  --exito: #1d8a4e;

  --radio: 16px;
  --radio-grande: 24px;
  --radio-pildora: 999px;

  /* El azul claro del hero: sobre navy, el --azul de marca queda oscuro. */
  --azul-claro: #5ac8fa;

  /* Sombras de una sola familia. Lo que separa un sitio "hecho" de uno
     "armado" es que todas las sombras vengan del mismo sistema. */
  --sombra-baja: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --sombra-media: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 12px 24px -4px rgba(16, 24, 40, 0.08);
  --sombra-alta: 0 8px 16px -4px rgba(16, 24, 40, 0.12), 0 24px 48px -8px rgba(16, 24, 40, 0.18);
  --sombra-nav: 0 6px 24px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 { letter-spacing: -0.025em; margin: 0; }
h1 { font-size: 2rem; font-weight: 600; }
h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 20px; }

.tenue { color: var(--tenue); }
.centrado { text-align: center; }

/* ---------- Cabecera ---------- */

.cabecera {
  background: var(--negro);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}

.cabecera .marca img { height: 30px; display: block; }

.nav-publica {
  display: flex;
  gap: 4px;
  margin-right: auto;
  overflow-x: auto;
}

.nav-publica a {
  color: #b9b9be;
  text-decoration: none;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 980px;
}

.nav-publica a:hover { color: #fff; }
.nav-publica a.activo { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* ---------- Botones ---------- */

.boton, .boton-wa, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border: none;
  border-radius: 980px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  background: var(--azul);
  color: #fff;
}

.boton:hover, button:hover { background: var(--azul-hover); }

/* Un SVG inline sin ancho declarada se dibuja del tamano de la caja que lo
   contiene, y en un boton flexible eso son 60px de icono al lado de un texto
   de 15. Se declara una vez aca para todos, en vez de recordarlo en cada
   boton que lleve icono. */
.boton svg, button svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  margin-right: 8px;
}

.boton.secundario {
  background: transparent;
  color: var(--azul);
  border: 1px solid var(--linea);
}

.boton-wa { background: var(--verde-wa); min-height: 40px; padding: 8px 18px; font-size: 0.88rem; }
.boton-wa:hover { background: #1eb556; }
.boton-wa.grande { width: 100%; min-height: 54px; font-size: 1rem; margin: 20px 0; }

/* ---------- Estructura ---------- */

main { min-height: 60vh; }

.seccion-pagina {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px;
}

/*
 * EL HERO
 *
 * Dos columnas: el texto a la izquierda, el equipo a la derecha. El fondo
 * lleva tres capas apiladas, y el orden importa:
 *
 *   1. el degradado navy de la identidad,
 *   2. una cuadrícula tenue que le da textura sin competir con el texto,
 *   3. un halo azul detrás de la imagen, que es lo que hace que un equipo
 *      recortado no parezca pegado encima del fondo.
 *
 * La tercera es la que más rinde: sin el halo, cualquier render se ve
 * "puesto ahí"; con el halo se ve iluminado por la página.
 */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 78% 32%, rgba(90, 200, 250, 0.16), transparent 60%),
    linear-gradient(160deg, #0b1220 0%, #16305a 100%);
  color: #fff;
  padding: 40px 24px 88px;
  overflow: hidden;
}

/* La cuadrícula. Va en un pseudo-elemento para no gastar una petición en un
   archivo de imagen, y se desvanece hacia abajo para que no moleste al leer. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}

.hero-caja {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: 420px;
}

/* La píldora sobre el título: dice de qué se trata antes de que se lea el
   titular, y es lo que hace que el hero arranque "presentado". */
.hero-pildora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-size: 0.84rem;
  color: #dbe6f5;
  margin-bottom: 26px;
}

.hero-pildora .punto {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--azul);
  display: grid;
  place-items: center;
  flex: none;
}
.hero-pildora .punto svg { width: 13px; height: 13px; fill: #fff; }

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.035em;
  max-width: 21ch;
  /* Reparte las líneas en bloques parejos en vez de dejar una palabra sola
     colgando al final. Donde no está soportado simplemente no hace nada. */
  text-wrap: balance;
}

/* La frase que se quiere recordar, en color. Es un <span>, no un <em>: no es
   énfasis semántico, es jerarquía visual. */
.hero h1 .acento {
  color: var(--azul-claro);
  /* La frase se mantiene entera en su línea. Partida, deja "placa." sola al
     final y el remate del titular se pierde. */
  white-space: nowrap;
}

/* En pantallas muy angostas se libera: mejor que se parta que que se salga. */
@media (max-width: 420px) {
  .hero h1 .acento { white-space: normal; }
}

.hero p {
  color: #c3d1e5;
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 20px 0 32px;
}

.hero-botones { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-botones .boton {
  border-radius: var(--radio-pildora);
  padding: 14px 26px;
  box-shadow: var(--sombra-media);
}

.hero-botones .boton.secundario {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero-botones .boton.secundario:hover { background: rgba(255, 255, 255, 0.14); }

/* La flecha se separa un poco al pasar el mouse: un detalle chico que hace
   que el botón se sienta vivo. */
.flecha { transition: transform 0.18s ease; display: inline-block; margin-left: 6px; }
.boton:hover .flecha { transform: translateX(3px); }
.hero-botones .boton:hover .flecha { transform: translateX(3px); }

/* ---------- La imagen del hero ---------- */

.hero-figura {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}

/* El halo. Es lo que integra la imagen con el fondo. */
.hero-figura::before {
  content: '';
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 200, 250, 0.3) 0%, rgba(28, 160, 224, 0.08) 45%, transparent 70%);
  filter: blur(18px);
}

.hero-figura img {
  position: relative;
  max-height: 420px;
  width: auto;
  /* Sombra proyectada hacia abajo, como si el equipo flotara sobre la página. */
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.5));
  /* Apenas inclinado: de frente se ve como una ficha de catálogo, en ángulo
     se ve como una portada. */
  transform: rotate(-4deg);
}

/* ---------- El teléfono del hero ----------
   Mientras no esté la foto final, en vez de un rectángulo genérico se dibuja
   un teléfono reconocible: proporción real (~2.16:1), marco de titanio con
   el borde iluminado de un lado, isla dinámica y los botones laterales. Un
   contorno cualquiera se lee como "falta la imagen"; este se lee como una
   pieza del diseño.

   Todo con divs y gradientes: ni una petición de red. */

.iphone {
  position: relative;
  width: 218px;
  height: 470px;
  border-radius: 46px;
  /* El marco: el degradado en diagonal simula la luz pegando en un canto. */
  background: linear-gradient(145deg, #8f98a3 0%, #3f4752 24%, #262c35 52%, #6f7883 82%, #2c323b 100%);
  padding: 4px;
  box-shadow:
    var(--sombra-alta),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.iphone .pantalla {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(90, 200, 250, 0.28) 0%, transparent 55%),
    linear-gradient(165deg, #16305a 0%, #0b1220 60%, #05080f 100%);
}

/* El brillo diagonal del vidrio. Es el detalle que hace que se lea como una
   pantalla apagada y no como un rectángulo oscuro. */
.iphone .pantalla::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%);
}

/* La isla dinámica. */
.iphone .isla {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 25px;
  border-radius: 13px;
  background: #05080f;
  z-index: 2;
}
/* La cámara, apenas insinuada dentro de la isla. */
.iphone .isla::after {
  content: '';
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3a52, #05080f 70%);
}

/* La barra de gestos de abajo. */
.iphone .barra-inferior {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.4);
  z-index: 2;
}

/* Los botones laterales: silencio y volumen a la izquierda, encendido a la
   derecha. Sin ellos el dibujo se lee como una tablet chica. */
.iphone .boton-lat {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6f7883, #39404a);
}
.iphone .boton-lat.silencio { left: -3px; top: 86px; height: 28px; }
.iphone .boton-lat.vol-sube { left: -3px; top: 130px; height: 48px; }
.iphone .boton-lat.vol-baja { left: -3px; top: 190px; height: 48px; }
.iphone .boton-lat.encendido { right: -3px; top: 150px; height: 72px; }

/* El logo en la pantalla del teléfono.
   Funciona porque el archivo del logo ya trae fondo negro: sobre la pantalla
   oscura no se ve un recuadro pegado, se ve encendida. */
.iphone .marca-agua {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 22%;
  /* SIN z-index a propósito. Un z-index acá crea un contexto de apilado
     propio, y entonces la mezcla del logo se resuelve contra este contenedor
     --que es transparente-- en vez de contra la pantalla: el negro no se
     borraba y quedaba un recuadro. La isla y la barra ya tienen z-index 2,
     así que igual quedan por encima. */
}

/* Va el logo VERTICAL (el mismo que se imprime en el recibo), no el ancho:
   el ancho mide 3.87 de proporción y dentro de una pantalla vertical queda
   diminuto, mientras que este mide 0.85 y llena el espacio.
   
   Dos filtros encadenados hacen el trabajo: el archivo es arte negro sobre
   blanco --está hecho para papel térmico-- así que 'invert' lo vuelve blanco
   sobre negro, y 'screen' borra ese negro. Queda la marca en blanco flotando
   sobre la pantalla, como contenido encendido y no como una calcomanía. */
.iphone .marca-agua img {
  width: 100%;
  height: auto;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* ---------- El vuelo ----------
   Un movimiento lento y corto. La gracia está en que casi no se note: si se
   nota, distrae de lo que hay que leer, que es el titular. */

@keyframes flotar {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-14px); }
}

.hero-figura .iphone,
.hero-figura img {
  animation: flotar 6s ease-in-out infinite;
  will-change: transform;
}

/* Quien pidió menos movimiento en su sistema, no lo recibe. Para algunas
   personas una animación en bucle marea de verdad. */
@media (prefers-reduced-motion: reduce) {
  .hero-figura .iphone,
  .hero-figura img {
    animation: none;
    transform: rotate(-4deg);
  }
}

@media (max-width: 900px) {
  .hero-caja { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .hero h1 { max-width: 100%; }
  .hero-figura { order: 2; min-height: 0; }
  .hero-figura img { max-height: 300px; }
  .hero-figura .iphone { width: 155px; height: 334px; border-radius: 34px; padding: 3px; }
  .hero-figura .iphone .pantalla { border-radius: 31px; }
  .hero-figura .iphone .isla { width: 62px; height: 19px; top: 9px; }
  .hero-figura .iphone .isla::after { width: 7px; height: 7px; right: 7px; }
  .hero-figura .iphone .barra-inferior { width: 70px; height: 4px; }
  .hero-figura .iphone .marca-agua { padding: 0 14px; }
}

@media (max-width: 620px) {
  .hero { padding: 28px 20px 76px; }
  /* A todo el ancho: en un teléfono, dos botones de distinto largo se ven
     desalineados, y el pulgar agradece el área grande. */
  .hero-botones { flex-direction: column; align-items: stretch; }
  .hero-botones .boton { text-align: center; }
}

/* ---------- Categorías ---------- */

.categorias { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }

.categoria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--linea);
  border-radius: 980px;
  background: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}

.categoria:hover { border-color: var(--azul); }
.categoria.activa { border-color: var(--tinta); font-weight: 500; }
.categoria span { color: var(--tenue); font-size: 0.8rem; }

/* ---------- Grilla de productos ---------- */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}

.tarjeta:hover { border-color: var(--azul); transform: translateY(-2px); }

.tarjeta-foto {
  aspect-ratio: 1;
  background: #f2f2f4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }

.sin-foto { color: #b9b9be; font-size: 0.85rem; }
.sin-foto.grande { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #f2f2f4; border-radius: var(--radio); }

.etiqueta-agotado {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.75); color: #fff;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 980px;
}

.tarjeta-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.tarjeta-marca {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--azul-tinta);
}

.tarjeta h3 { font-size: 0.95rem; font-weight: 500; line-height: 1.35; flex: 1; }

.tarjeta-precios { display: flex; flex-direction: column; margin-top: 8px; }
.precio-efectivo { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.precio-tarjeta { font-size: 0.78rem; color: var(--tenue); }

/* ---------- Ficha de producto ---------- */

.miga { font-size: 0.85rem; color: var(--tenue); margin-bottom: 16px; }
.miga a { color: var(--azul); text-decoration: none; }

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; gap: 24px; } }

.ficha-fotos { display: grid; gap: 12px; }
.ficha-fotos img { width: 100%; border-radius: var(--radio); border: 1px solid var(--linea); background: #fff; }

.ficha-datos h1 { font-size: 1.8rem; margin: 6px 0 8px; }
.compatible { color: var(--tenue); font-size: 0.92rem; margin: 0 0 20px; }

/* Los dos precios, con el de efectivo destacado: es el argumento de venta. */
.precios {
  display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap;
  padding: 20px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}

.precio-principal .monto { font-size: 2.2rem; font-weight: 600; letter-spacing: -0.03em; display: block; }
.precio-alterno .monto { font-size: 1.3rem; font-weight: 500; color: var(--tenue); display: block; }
.condicion { font-size: 0.78rem; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.05em; }

.disponibilidad { font-size: 0.9rem; font-weight: 500; margin: 16px 0 0; }
.disponibilidad.hay { color: var(--exito); }
.disponibilidad.no-hay { color: var(--peligro); }

/* ---------- Avísame cuando llegue ----------
   Lo que ve quien encontró justo lo que buscaba, agotado. Va dentro de un
   recuadro suave y no como un bloque más de la ficha: tiene que leerse como
   una salida, no como un aviso de que no hay. */

.avisame {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
}

/* Con ".seccion-pagina" adelante a proposito: mas abajo en este archivo hay
   un ".seccion-pagina h2" con el tamano grande de los titulos de seccion, que
   pesa lo mismo que ".avisame h2" y gana solo por ir despues. Este titulo es
   el de un recuadro dentro de la ficha, no el de una seccion, y tiene que
   seguir siendo chico aunque manana alguien reordene el archivo. */
.seccion-pagina .avisame h2 { font-size: 1.02rem; font-weight: 600; margin: 0 0 6px; }
.avisame > p { color: var(--tenue); font-size: 0.88rem; line-height: 1.5; margin: 0 0 14px; }

.avisame-fila { display: flex; gap: 10px; }

.avisame-fila input {
  flex: 1;
  min-width: 0; /* sin esto el campo no se encoge y desborda la ficha */
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pildora);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--fondo);
}
.avisame-fila input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.avisame-fila .boton { flex: none; }

.avisame p.avisame-error { color: var(--peligro); font-size: 0.85rem; margin: 0 0 12px; }

.avisame.listo { background: rgba(52, 199, 89, 0.08); border-color: rgba(52, 199, 89, 0.3); }
.avisame p.avisame-ok { margin: 0; color: var(--exito); font-weight: 500; font-size: 0.95rem; }

/* La trampa para robots. Fuera de la pantalla y no con display:none, porque
   un programa que llena formularios sabe saltarse lo que está oculto pero
   suele llenar esto. Queda fuera del recorrido con tabindex="-1", así que
   quien navega con el teclado tampoco lo encuentra. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Para las etiquetas que solo tienen que existir para un lector de pantalla:
   el campo ya se explica con su texto de ejemplo, pero un campo sin etiqueta
   no se puede leer en voz alta. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .avisame-fila { flex-wrap: wrap; }
  .avisame-fila input, .avisame-fila .boton { width: 100%; }
}

.descripcion { margin-top: 8px; color: #3a3a3c; line-height: 1.7; }

/* ---------- Buscador ---------- */

.buscador-tienda { display: flex; gap: 10px; margin-bottom: 24px; }

.buscador-tienda input {
  flex: 1;
  min-height: 50px;
  padding: 12px 18px;
  border: 1px solid var(--linea);
  border-radius: 980px;
  font-size: 1rem;
  font-family: inherit;
}

.buscador-tienda input:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(28,160,224,0.15);
}

/* ---------- Servicios ---------- */

.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.servicio {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 24px;
}

.servicio h3 { font-size: 1.05rem; margin-bottom: 8px; }
.servicio p { color: var(--tenue); font-size: 0.92rem; margin: 0; }

/* ---------- Pie ---------- */

.pie { background: var(--marino); color: #fff; margin-top: 60px; padding: 40px 24px; }

.pie-caja {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px;
  font-size: 0.9rem;
}

.pie strong { display: block; margin-bottom: 8px; }
.pie p { color: #b9c7dd; margin: 4px 0; }
.pie a { color: #fff; }

/* El acceso del equipo no compite con los links del cliente. */
.pie a.acceso-interno { color: #7d90ac; text-decoration: none; font-size: 0.85rem; }
.pie a.acceso-interno:hover { color: #fff; }

/* ---------- Carrito ---------- */

.boton-carrito {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.boton-carrito:hover { background: rgba(255, 255, 255, 0.12); }
.boton-carrito.activo { background: rgba(255, 255, 255, 0.14); }

/* El globo dice cuántos hay. Sin número no se dibuja: un cero permanente en
   la cabecera solo recuerda que no compraste nada. */
.carrito-globo {
  background: var(--azul);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  min-width: 20px;
  padding: 4px 6px;
  border-radius: 999px;
  text-align: center;
}

/* La tarjeta dejó de ser un <a> entero cuando le entró el botón: el link
   ahora es solo la parte de arriba. */
.tarjeta-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.boton-agregar {
  margin: 0 16px 16px;
  width: calc(100% - 32px);
  min-height: 40px;
  font-size: 0.88rem;
}

.boton-agregar.grande { width: 100%; margin: 0; min-height: 52px; font-size: 1rem; }
.boton-agregar.agregado { background: var(--exito); }

.comprar { display: flex; gap: 12px; align-items: flex-end; margin: 20px 0 0; }

.campo-cantidad {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--tenue);
}

.campo-cantidad input {
  width: 76px;
  min-height: 52px;
  padding: 8px 12px;
  font-size: 1rem;
  text-align: center;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--panel);
  color: var(--tinta);
}

.seccion-pagina.estrecha { max-width: 760px; }

.lista-carrito { list-style: none; margin: 0 0 28px; padding: 0; }

.linea-carrito {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}

.linea-foto {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f2f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.linea-foto img { width: 100%; height: 100%; object-fit: cover; }

.linea-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linea-datos a { text-decoration: none; }
.linea-datos a:hover strong { color: var(--azul); }

.linea-acciones { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.linea-acciones input {
  width: 68px;
  min-height: 40px;
  text-align: center;
  font-size: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--panel);
  color: var(--tinta);
}

.enlace-quitar {
  background: none;
  border: none;
  color: var(--tenue);
  font-size: 0.78rem;
  padding: 0;
  min-height: 0;
  text-decoration: underline;
  cursor: pointer;
}

.enlace-quitar:hover { background: none; color: var(--peligro); }

.linea-subtotal { font-weight: 600; font-size: 1.05rem; white-space: nowrap; }

.resumen {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resumen-linea { display: flex; justify-content: space-between; align-items: baseline; }
.resumen-linea.total { font-size: 1.3rem; padding-top: 10px; border-top: 1px solid var(--linea); }

.boton.grande { min-height: 54px; font-size: 1rem; margin-top: 8px; }

.problemas {
  background: #fff6f5;
  border: 1px solid #f3c9c5;
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--peligro);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.problemas p { margin: 4px 0; }

.aviso-vacio { text-align: center; padding: 60px 20px; color: var(--tenue); }
.aviso-vacio .boton { margin-top: 16px; }

/* En teléfono la línea se parte en dos filas: la foto y el nombre arriba,
   cantidad y subtotal abajo. En una sola fila el nombre queda ilegible. */
@media (max-width: 560px) {
  .linea-carrito { grid-template-columns: 64px 1fr auto; row-gap: 10px; }
  .linea-foto { width: 64px; height: 64px; }
  .linea-acciones { grid-column: 2; flex-direction: row; align-items: center; gap: 12px; }
  .linea-subtotal { grid-column: 3; }
  .comprar { flex-direction: column; align-items: stretch; }
  .campo-cantidad input { width: 100%; }
}

/* ---------- Formulario de checkout ---------- */

.formulario { display: flex; flex-direction: column; gap: 28px; }

.formulario fieldset {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
  padding: 20px 24px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulario legend {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  padding: 0 8px;
}

.campo { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--tenue); }

.campo input,
.campo textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--azul); background: var(--panel); }

.campo .ayuda { font-size: 0.78rem; color: var(--tenue); }

.campo-check { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; cursor: pointer; }
.campo-check input { width: 20px; height: 20px; accent-color: var(--azul); }

/* Opción tocable entera, no solo el puntito: en teléfono acertarle a un
   radio de 16px es una fuente constante de frustración. */
.opcion {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.opcion:hover { border-color: var(--azul); }
.opcion input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--azul); flex-shrink: 0; }
.opcion span { display: flex; flex-direction: column; gap: 2px; }
.opcion .ayuda { font-size: 0.82rem; color: var(--tenue); }
.opcion:has(input:checked) { border-color: var(--azul); background: #f2f9fd; }

/* ---------- Pedido hecho ---------- */

.pedido-cabeza { text-align: center; margin-bottom: 32px; }
.pedido-cabeza h1 { font-size: 1.8rem; margin: 4px 0 12px; }

.estado-pedido {
  display: inline-block;
  background: #f2f9fd;
  color: var(--azul-tinta);
  border: 1px solid #cfe8f6;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}

.estado-pedido.cancelado { background: #fff6f5; color: var(--peligro); border-color: #f3c9c5; }

.pasos {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 0;
  margin: 0 0 32px;
  counter-reset: paso;
}

.pasos li {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  color: var(--tenue);
  padding-top: 26px;
  position: relative;
  line-height: 1.25;
}

/* La bolita del paso, y la línea que lo une con el anterior. */
.pasos li::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--linea);
}

.pasos li::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--linea);
  z-index: -1;
}

.pasos li:first-child::after { display: none; }

.pasos li.hecho::before, .pasos li.actual::before { background: var(--azul); }
.pasos li.hecho::after, .pasos li.actual::after { background: var(--azul); }
.pasos li.hecho, .pasos li.actual { color: var(--tinta); }
.pasos li.actual { font-weight: 600; }

.pago-caja {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px;
  margin-bottom: 20px;
}

.pago-caja h2 { font-size: 1.1rem; margin-bottom: 12px; }
.pago-caja p { margin: 8px 0; }

.datos-pago { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.datos-pago > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--linea); padding-bottom: 8px; }
.datos-pago dt { color: var(--tenue); font-size: 0.85rem; margin: 0; }
.datos-pago dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

/* La línea del pedido ya hecho no lleva foto ni controles: solo qué y cuánto. */
.linea-carrito.simple { grid-template-columns: 1fr auto; }

@media (max-width: 560px) {
  .formulario fieldset { padding: 16px 16px 20px; }
  .pasos li { font-size: 0.65rem; }
  .linea-carrito.simple { grid-template-columns: 1fr auto; }
}

/* ---------- Citas de instalación ---------- */

.horas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.hora {
  background: var(--panel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.hora:hover { border-color: var(--azul); background: var(--panel); color: var(--tinta); }
.hora.elegida { background: var(--azul); border-color: var(--azul); color: #fff; }

.campo select {
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}

.cita-caja {
  background: #f2f9fd;
  border: 1px solid #cfe8f6;
  border-radius: var(--radio);
  padding: 24px;
  margin-bottom: 20px;
}

.cita-caja h2 { font-size: 1.1rem; margin-bottom: 8px; }
.cita-caja .cita-cuando {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--azul-tinta);
  margin: 0 0 8px;
  text-transform: capitalize;
}

/* ---------- Producto recomendado ---------- */

.sugerido { margin-bottom: 20px; }

.sugerido-caja {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: 16px 20px;
}

.sugerido-caja img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.sugerido-datos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sugerido-caja .boton { flex-shrink: 0; }

@media (max-width: 560px) {
  .sugerido-caja { flex-wrap: wrap; }
  .sugerido-caja .boton { width: 100%; }
}

/* ==========================================================================
   PRESENTACIÓN — segunda capa del sitio público
   ==========================================================================
   Todo lo de abajo existe por una razón: lo que separa un sitio que se ve
   hecho de uno que se ve armado no son las fotos, son cinco o seis recursos
   de composición repetidos con disciplina. Acá están, y cada uno dice para
   qué sirve.
   ========================================================================== */

/* ---------- Barra de utilidades ----------
   Arriba de todo, sobre el nav: teléfono, dirección y HORARIO. El horario es
   la consulta más frecuente antes de ir a un local, y en el pie nadie baja a
   buscarlo. */

.utilidades {
  background: #0b1220;
  color: #a8b8cf;
  font-size: 0.8rem;
}

.utilidades-caja {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}

.utilidades a { color: inherit; text-decoration: none; }
.utilidades a:hover { color: #fff; }
.utilidades .dato { display: inline-flex; align-items: center; gap: 7px; }
.utilidades svg { width: 13px; height: 13px; fill: currentColor; flex: none; opacity: 0.75; }
.utilidades .empuja { margin-left: auto; }

@media (max-width: 760px) {
  .utilidades .ocultar-movil { display: none; }
  .utilidades-caja { justify-content: center; gap: 16px; }
  .utilidades .empuja { margin-left: 0; }
}

/* ---------- El nav, como tarjeta flotante ----------
   Despegado del borde y con sombra, en vez de pegado al techo. Es el recurso
   que más "producto terminado" transmite, y el que usa AppleFix.

   Se queda OSCURO porque el logo trae su propio fondo negro: sobre una
   tarjeta blanca se vería un rectángulo negro recortado. */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: transparent;
  padding: 12px 24px;
  display: block;
}

.cabecera-caja {
  max-width: 1120px;
  margin: 0 auto;
  /* Negro, no gris azulado: el logo trae su propio fondo negro incorporado,
     y sobre cualquier otro tono se le nota el recuadro. Con el mismo negro,
     el logo se funde con la barra y parece parte de ella. */
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radio-pildora);
  box-shadow: var(--sombra-nav);
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.cabecera-caja .marca { display: flex; align-items: center; flex: none; }
.cabecera-caja .marca img { height: 30px; width: auto; border-radius: 6px; }

.cabecera-caja nav {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  flex-wrap: wrap;
}

.cabecera-caja nav a {
  color: #c9d6e8;
  text-decoration: none;
  font-size: 0.92rem;
  padding: 8px 14px;
  border-radius: var(--radio-pildora);
  transition: background 0.15s ease, color 0.15s ease;
}
.cabecera-caja nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cabecera-caja nav a.activo { background: rgba(255, 255, 255, 0.12); color: #fff; }

.cabecera-caja .boton-wa {
  margin-left: auto;
  flex: none;
  border-radius: var(--radio-pildora);
  padding: 10px 20px;
}

@media (max-width: 900px) {
  .cabecera { padding: 10px 14px; }
  /* Con el menú en dos filas, el radio de píldora convierte la tarjeta en un
     óvalo gigante. Al envolverse pasa a ser una tarjeta normal. */
  .cabecera-caja { padding: 12px; gap: 10px; flex-wrap: wrap; border-radius: var(--radio-grande); }
  .cabecera-caja nav { order: 3; width: 100%; margin-left: 0; justify-content: center; }
  .cabecera-caja nav a { padding: 7px 11px; font-size: 0.86rem; }
  .cabecera-caja .boton-wa { padding: 9px 16px; font-size: 0.9rem; }
}

/* ---------- Barra de confianza ----------
   Tarjeta blanca elevada que se MONTA sobre el borde del hero con margen
   negativo. Ese solape es lo que da la sensación de terminado: sin él es una
   fila de texto más; con él, el hero tiene un cierre. */

/* La franja clara que recibe a la tarjeta.
   Sin esto, la tarjeta cae justo en el límite entre el hero y el bloque
   oscuro que sigue, y en vez de "montarse" sobre el hero queda flotando en
   el medio de dos fondos oscuros, cortada. */
.franja-confianza {
  background: var(--fondo);
  padding: 0 24px 56px;
}

.confianza {
  max-width: 1120px;
  margin: -44px auto 0;
  position: relative;
  z-index: 5;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-alta);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
}

.confianza .item {
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  line-height: 1.35;
  border-left: 1px solid var(--linea);
}
.confianza .item:first-child { border-left: none; }
.confianza .item svg { width: 19px; height: 19px; fill: var(--azul); flex: none; }

@media (max-width: 980px) {
  .confianza { grid-template-columns: repeat(2, 1fr); margin-top: -36px; }
  .confianza .item:nth-child(odd) { border-left: none; }
  .confianza .item { border-top: 1px solid var(--linea); }
  .confianza .item:nth-child(1), .confianza .item:nth-child(2) { border-top: none; }
  .confianza .item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .confianza { grid-template-columns: 1fr; }
  .confianza .item { border-left: none; }
  .confianza .item:nth-child(2) { border-top: 1px solid var(--linea); }
}

/* ---------- Encabezados de sección ----------
   El "eyebrow": una etiqueta chica en mayúsculas espaciadas con un punto de
   color, arriba del H2. Cuesta tres líneas de CSS y ordena toda la página. */

.seccion-pagina { max-width: 1120px; margin: 0 auto; padding: 72px 24px; }

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-tinta);
  margin-bottom: 14px;
}
.rotulo::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
}

.seccion-pagina h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.14; font-weight: 700; }
.seccion-pagina .bajada { color: var(--tenue); font-size: 1.04rem; max-width: 62ch; margin: 14px 0 0; }

/* Encabezado con el título a la izquierda y un botón alineado a la derecha,
   como en la sección "cómo funciona" de AppleFix. */
.encabezado-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* ---------- Bloque de segunda opinión ----------
   Fondo oscuro para que corte visualmente la página: es el bloque que más
   convierte en este rubro y no puede parecer un párrafo más. */

.segunda-opinion {
  background: linear-gradient(150deg, #0b1220 0%, #16305a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.segunda-opinion::before {
  content: '';
  position: absolute;
  right: -140px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 200, 250, 0.2), transparent 68%);
}

.segunda-opinion .caja {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 68px 24px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}

.segunda-opinion .rotulo { color: var(--azul-claro); }
.segunda-opinion .rotulo::before { background: var(--azul-claro); }
.segunda-opinion h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.12; font-weight: 700; }
.segunda-opinion p { color: #c3d1e5; font-size: 1.06rem; line-height: 1.62; margin: 18px 0 30px; }
.segunda-opinion .boton.secundario {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radio-pildora);
  padding: 14px 26px;
}

@media (max-width: 900px) {
  .segunda-opinion .caja { grid-template-columns: 1fr; gap: 32px; padding: 52px 24px; }
}

/* ---------- Mock del portal de seguimiento ----------
   Un recurso visual que no necesita fotografía y que ningún taller de Quito
   puede mostrar, porque no lo tienen: el estado del equipo en línea. Es una
   maqueta dibujada con CSS, no una captura, así que no se desactualiza. */

.mock-seguimiento {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radio-grande);
  padding: 22px;
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-alta);
}

/* Sin un tamaño explícito, un SVG sin ancho se dibuja enorme: el visto del
   encabezado salía del tamaño de media tarjeta y empujaba el texto. */
.mock-seguimiento .mock-cab > svg {
  width: 22px;
  height: 22px;
  fill: var(--azul-claro);
  flex: none;
}

.mock-seguimiento .mock-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 18px;
}
.mock-seguimiento .orden { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.94rem; }
.mock-seguimiento .equipo { color: #9fb3cd; font-size: 0.82rem; }

.mock-seguimiento .paso {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  position: relative;
  padding-bottom: 20px;
}
.mock-seguimiento .paso:last-child { padding-bottom: 0; }

/* La línea que une los puntos, dibujada con un pseudo-elemento del propio
   paso: así no hace falta un elemento extra por tramo. */
.mock-seguimiento .paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.mock-seguimiento .paso.hecho:not(:last-child)::before { background: var(--azul); }

.mock-seguimiento .punto {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  display: grid;
  place-items: center;
  z-index: 1;
  background: #16305a;
}
.mock-seguimiento .paso.hecho .punto { background: var(--azul); border-color: var(--azul); }
.mock-seguimiento .paso.hecho .punto svg { width: 11px; height: 11px; fill: #fff; }

.mock-seguimiento .paso.activo .punto {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 4px rgba(90, 200, 250, 0.2);
}

.mock-seguimiento .titulo-paso { font-size: 0.94rem; font-weight: 500; }
.mock-seguimiento .paso:not(.hecho):not(.activo) .titulo-paso { color: #7f93ad; }
.mock-seguimiento .cuando { color: #9fb3cd; font-size: 0.78rem; margin-top: 2px; }
.mock-seguimiento .paso.activo .titulo-paso { color: var(--azul-claro); }

/* ---------- Cómo trabajamos: pasos numerados ---------- */

.pasos-trabajo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.paso-trabajo {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  padding: 26px 24px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.paso-trabajo:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-media);
  border-color: #c3d3e8;
}

.paso-trabajo .numero {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--azul);
  margin-bottom: 12px;
}
.paso-trabajo h3 { font-size: 1.14rem; font-weight: 600; margin-bottom: 8px; }
.paso-trabajo p { color: var(--tenue); font-size: 0.94rem; line-height: 1.55; margin: 0; }

/* La línea que conecta los pasos en desktop. Es un detalle que convierte
   cuatro tarjetas sueltas en un proceso. */
.paso-trabajo:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 38px;
  right: -20px;
  width: 20px;
  height: 1px;
  background: var(--linea);
}

@media (max-width: 900px) {
  .pasos-trabajo { grid-template-columns: repeat(2, 1fr); }
  .paso-trabajo:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) {
  .pasos-trabajo { grid-template-columns: 1fr; }
}

/* ---------- Tira de dispositivos ----------
   "Qué reparamos", con la familia de equipos. Una sola imagen ancha resuelve
   la sección; mientras no exista, las pastillas de texto la sostienen. */

.tira-dispositivos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}

.tira-dispositivos .equipo-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--radio-pildora);
  background: var(--panel);
  border: 1px solid var(--linea);
  font-size: 0.95rem;
  box-shadow: var(--sombra-baja);
}
.tira-dispositivos .equipo-pill svg { width: 17px; height: 17px; fill: var(--azul-tinta); }

/* ---------- Multimarca ----------
   Segundo escalón, deliberadamente más discreto que el de Apple: son marcas
   que también se reparan, pero el posicionamiento del negocio es Apple. Las
   pastillas van sin icono --no existe una silueta que distinga un Honor de un
   Redmi-- y con el nombre solo, que es lo que el cliente busca. */

.multimarca {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--linea);
}

/* Mismo peso tipográfico que "Todo el ecosistema Apple": las dos familias
   se reparan, y una de las dos escrita en gris chico se lee como nota al pie. */
.multimarca h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--tinta);
  margin-bottom: 24px;
}

.tira-marcas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Misma pastilla que la de los equipos Apple, para que las dos filas se lean
   como el mismo sistema y no como dos listas distintas. */
.marca-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--radio-pildora);
  background: var(--panel);
  border: 1px solid var(--linea);
  font-size: 0.95rem;
  color: var(--tinta);
  box-shadow: var(--sombra-baja);
}
.marca-pill svg { width: 17px; height: 17px; fill: var(--azul-tinta); }

/* Cuando hay logo en vez de nombre. La escala de grises los empareja aunque
   cada marca venga con su propio color. */
.marca-pill img {
  height: 22px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.78;
}

.figura-familia {
  margin-top: 36px;
  text-align: center;
}
.figura-familia img { max-height: 260px; width: auto; }

/* ---------- Estado vacío, como tarjeta ----------
   Un párrafo gris centrado en una página en blanco es lo que hace ver
   amateur un catálogo. Contenido en una tarjeta, con icono y salida, se lee
   como "en construcción" en vez de "roto". */

.vacio-caja {
  max-width: 480px;
  margin: 12px auto;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--sombra-baja);
}

.vacio-caja .icono {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(28, 160, 224, 0.08);
}
.vacio-caja .icono svg { width: 32px; height: 32px; fill: var(--azul); opacity: 0.55; }
.vacio-caja h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.vacio-caja p { color: var(--tenue); font-size: 0.96rem; line-height: 1.55; margin: 0 0 24px; }
.vacio-caja .boton { border-radius: var(--radio-pildora); }

/* ---------- Tarjeta de producto: dos correcciones ---------- */

/* 'contain' y no 'cover': recortar una pantalla o un flex corta justo lo que
   el cliente está mirando. El aire interno evita que la pieza toque el borde. */
.tarjeta-foto img {
  object-fit: contain;
  padding: 8%;
  background: #fff;
}

/* Dos columnas en el teléfono, nunca una: en repuestos el cliente compara. */
@media (max-width: 620px) {
  .grilla { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---------- La página de repuestos ----------
   El hueco vertical: con el catálogo vacío, el contenido quedaba pegado
   arriba y sobraban 400px en blanco antes del pie, que no se lee como
   "página vacía" sino como "página rota". Con la altura mínima y el estado
   vacío centrado en ese espacio, se lee como lo que es. */

.pagina-tienda {
  min-height: calc(100vh - 330px);
  display: flex;
  flex-direction: column;
}

.pagina-tienda h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; }
.pagina-tienda .bajada { margin: 12px 0 26px; }
.pagina-tienda .conteo { font-size: 0.88rem; margin: 0 0 16px; }

/* El estado vacío se queda con el espacio que sobra y se centra en él. */
.pagina-tienda .vacio-caja { margin-top: auto; margin-bottom: auto; }

/* La barra de confianza acá no se monta sobre nada: va con su propio aire. */
.confianza-tienda {
  margin: 0 0 28px;
  box-shadow: var(--sombra-baja);
}

.vacio-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vacio-botones .boton { border-radius: var(--radio-pildora); }

/* ---------- Migas ---------- */

.miga-caja { max-width: 1120px; margin: 0 auto; padding: 20px 24px 0; }

/* ---------- Aviso legal del pie ---------- */

.pie-legal {
  max-width: 1120px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #9db0ca;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* El enlace del equipo estaba en 4.02:1 sobre el navy, debajo del mínimo
   accesible de 4.5:1. Con este gris queda en 7.6:1. */
.pie a.acceso-interno { color: #b9c7dd; }

/* ---------- WhatsApp flotante ---------- */

.wa-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--verde-wa);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), var(--sombra-media);
  transition: transform 0.18s ease;
}
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }
.wa-flotante:hover { transform: scale(1.06); }

@media (max-width: 620px) {
  .wa-flotante { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-flotante svg { width: 28px; height: 28px; }
}

/* ---------- Elegí tu equipo ----------
   La sección más fuerte de AppleFix: en vez de listar servicios, lista
   EQUIPOS, que es como la persona piensa el problema ("se me rompió el
   iPhone", no "necesito un cambio de módulo"). Debajo de cada uno, las
   fallas típicas de ese equipo, que hacen de palabras clave y de
   reconocimiento a la vez. */

.equipos-rejilla {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 36px;
}

.equipo-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  padding: 26px 18px 22px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.equipo-tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
  border-color: #c3d3e8;
}

.equipo-tarjeta .lienzo {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(160deg, #f4f7fb, #e6edf6);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.equipo-tarjeta .lienzo svg { width: 38px; height: 38px; fill: var(--azul-tinta); }

.equipo-tarjeta h3 { font-size: 1.04rem; font-weight: 600; margin-bottom: 6px; }
.equipo-tarjeta .fallas { color: var(--tenue); font-size: 0.84rem; line-height: 1.45; margin: 0 0 14px; }
.equipo-tarjeta .ver { margin-top: auto; color: var(--azul-tinta); font-size: 0.88rem; font-weight: 500; }

/* Cuatro equipos entran mejor en cuatro columnas que en cinco: con cinco
   quedaba una tarjeta más angosta de lo necesario. */
.equipos-cuatro { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .equipos-rejilla,
  .equipos-cuatro { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) { .equipos-rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- Dónde encontrarnos ----------
   Un taller es un lugar físico y la mitad de las visitas terminan en "¿dónde
   quedan y hasta qué hora?". Va sin mapa incrustado a propósito: un iframe
   de Google carga rastreadores de terceros en cada visita y obligaría a
   abrir la política de contenido. El botón "Cómo llegar" hace lo mismo sin
   ese costo. */

.donde {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  padding: 40px;
  box-shadow: var(--sombra-baja);
}

.donde h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 18px; }
.donde .dato-local { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.donde .dato-local svg { width: 19px; height: 19px; fill: var(--azul); flex: none; margin-top: 3px; }
.donde .dato-local strong { display: block; font-weight: 600; font-size: 0.92rem; }
.donde .dato-local span { color: var(--tenue); font-size: 0.92rem; }
.donde .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.donde .boton { border-radius: var(--radio-pildora); }

/* El plano dibujado: dos calles que se cruzan y el punto del local. No es un
   mapa de verdad --para eso está el botón-- es una ilustración que ocupa el
   lugar visual de uno sin pesar nada ni rastrear a nadie. */
.plano {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 46%, #dce5f0 46%, #dce5f0 54%, transparent 54%),
    linear-gradient(25deg, transparent 61%, #e7edf5 61%, #e7edf5 67%, transparent 67%),
    linear-gradient(160deg, #f7fafd, #eef3f9);
}
.plano::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 8px rgba(28, 160, 224, 0.2), 0 0 0 18px rgba(28, 160, 224, 0.09);
}

@media (max-width: 860px) {
  .donde { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .plano { order: -1; }
}

/* ==========================================================================
   SERVICIOS
   ========================================================================== */

/* El hero de una página interna: mismo lenguaje que el de la portada pero
   más bajo y a una columna. No compite con la home, la acompaña. */
.hero-interno { padding: 48px 24px 76px; }
/* El ancho se limita en el TEXTO, no en el contenedor: achicando el
   contenedor, el bloque se centraba dentro del ancho de página y el hero
   quedaba corrido a la derecha respecto del resto del sitio. */
.hero-caja-simple { display: block; min-height: 0; }
.hero-interno h1 { font-size: clamp(2rem, 4.2vw, 3rem); max-width: 24ch; }
.hero-interno p { max-width: 62ch; }

/* ---------- Las tarjetas de servicio ----------
   Antes eran cajas de texto sin nada que las distinguiera: seis rectángulos
   blancos con un título adentro. El icono no es decoración, es lo que
   permite encontrar "pin de carga" de un vistazo sin leer los seis. */

.servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.servicio {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  padding: 26px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.servicio:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-media);
  border-color: #c3d3e8;
}

.servicio-icono {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(28, 160, 224, 0.1);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.servicio-icono svg { width: 23px; height: 23px; fill: var(--azul); }

.servicio h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 8px; }
.servicio p { color: var(--tenue); font-size: 0.94rem; line-height: 1.55; margin: 0; }

/* Lo que el cliente vino a saber, fuera del párrafo: cuánto demora y qué
   garantía tiene. Adentro del texto nadie los encuentra; acá se comparan
   entre tarjetas de un vistazo. */
.servicio-datos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.dato-chip {
  font-size: 0.78rem;
  padding: 5px 11px;
  border-radius: var(--radio-pildora);
  background: var(--fondo);
  border: 1px solid var(--linea);
  color: var(--tinta);
}

/* El llamado por servicio. Un solo botón al final de la página obliga a
   escribir "hola, quiero cotizar" y explicar qué se necesita; este abre el
   chat con el servicio ya escrito. El margen automático lo pega abajo, así
   queda alineado aunque las tarjetas tengan textos de distinto largo. */
.servicio-cta {
  margin-top: auto;
  padding-top: 18px;
  color: var(--azul-tinta);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}
.servicio-cta:hover { color: var(--azul); }

@media (max-width: 900px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .servicios { grid-template-columns: 1fr; } }

/* ---------- Preguntas frecuentes ----------
   Con <details> nativo: sin una línea de JavaScript, accesible desde el
   teclado y abierto por defecto el primero, para que se vea que se despliega. */

.faq { max-width: 820px; margin-top: 8px; }

.faq-item {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-item summary {
  padding: 18px 22px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* La cruz que gira hasta volverse un menos. Dibujada con el pseudo-elemento
   para no cargar un icono más. */
.faq-item summary::after {
  content: '+';
  font-size: 1.35rem;
  line-height: 1;
  color: var(--azul);
  transition: transform 0.2s ease;
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--tenue);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 72ch;
}

/* ---------- Cierre de la página ---------- */

.cierre-servicios {
  margin-top: 56px;
  padding: 40px 32px;
  border-radius: var(--radio-grande);
  background: var(--panel);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-baja);
  text-align: center;
}
.cierre-servicios h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 8px; }
.cierre-servicios p { color: var(--tenue); margin: 0 0 24px; }
.cierre-servicios .boton-wa { max-width: 340px; margin-inline: auto; }