/*
Theme Name:   Gigi Pet Grooming
Theme URI:    https://gigipetgrooming.com/
Description:  Tema hijo de Hello Elementor con el diseño de Gigi Pet Grooming (dirección B en ámbar). Bilingüe EN/ES vía Polylang.
Author:       Gigi Pet Grooming
Template:     hello-elementor
Version:      1.9.1
Text Domain:  gigipet
*/

/* ============================================================
   FUENTES — servidas desde el propio tema

   Antes venían de fonts.googleapis.com. Eso costaba cuatro peticiones
   que bloquean el pintado y, peor, dos servidores nuevos (googleapis y
   gstatic): cada uno con su búsqueda de DNS, su conexión y su
   negociación TLS antes de bajar el primer byte. En un celular con
   datos eso es medio segundo largo en el que la pantalla está en blanco.
   Ahora los archivos viajan dentro del tema, se piden al mismo servidor
   que ya está conectado, y functions.php los precarga.

   Son archivos VARIABLES: uno solo cubre del peso 400 al 900, por eso
   font-weight lleva un rango y no un número. Google servía el mismo
   archivo dos veces, una por peso; comprobado que eran idénticos.

   Fraunces y Source Sans 3 son de licencia SIL Open Font, que permite
   alojarlas uno mismo. Copia de la licencia en assets/fonts/OFL.txt.

   font-display: swap = el texto se ve desde el primer momento con la
   tipografía del sistema y cambia cuando llega la buena. Nunca hay un
   hueco en blanco donde debería haber texto.
   ============================================================ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-var-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-var.woff2") format("woff2");
}

/* ============================================================
   TOKENS
   Los tokens que se usan como FONDO OSCURO son constantes:
   si se aclararan en modo oscuro, el texto encima se perdería.
   ============================================================ */
:root {
  --basin-solid: #2A1D06;   /* café casi negro — hero, pie, barra */
  --basin-band:  #4A3410;   /* café medio — botón de llamada, idioma */
  --on-dark:     #FFF3DC;

  --basin:       #8A6207;   /* ámbar tostado: acento de texto */
  --foam:        #F2E6CE;   /* tinte cálido de superficie */
  --marigold:    #F5B94A;
  --clay:        #A8481C;

  --paper:       #FFF8EC;
  --surface:     #FFFFFF;
  --ink:         #241A0B;
  --muted:       #756346;
  --hair:        #E6D8BE;

  --display: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #171208;
    --surface: #221A0D;
    --ink:     #FBF3E4;
    --muted:   #B7A585;
    --hair:    #3B2E18;
    --foam:    #2C2211;
    --basin:   #F0C979;
    --clay:    #E9863F;
  }
}
:root[data-theme="dark"] {
  --paper:   #171208;
  --surface: #221A0D;
  --ink:     #FBF3E4;
  --muted:   #B7A585;
  --hair:    #3B2E18;
  --foam:    #2C2211;
  --basin:   #F0C979;
  --clay:    #E9863F;
}

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

body.gigi {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Safari en iPhone agranda por su cuenta el texto de algunos bloques al
     girar el teléfono, y descuadra la retícula. Esto se lo impide sin
     quitarle a nadie el zoom con los dedos. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.gigi img { max-width: 100%; height: auto; display: block; }
.gigi a { color: inherit; }
.gigi a:focus-visible,
.gigi button:focus-visible,
.gigi input:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--basin-solid);
  color: var(--on-dark);
  padding: 0.7rem 1.1rem;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- navegación ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  padding: 0.85rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

.wordmark {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-right: auto;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.wordmark i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--basin);
}
.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin: 0; padding: 0;
  font-size: 0.9rem;
}
.nav ul a { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav ul a:hover { border-bottom-color: var(--basin); }
.nav ul a[aria-current] { border-bottom-color: var(--marigold); border-bottom-width: 2px; }

.lang {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  flex: none;
}
.lang a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  line-height: 1.5;
}
.lang a[aria-current="true"] { background: var(--basin-band); color: #FFF; }

.callbtn {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--basin-band);
  color: #FFF;
  text-decoration: none;
  padding: 0.5rem 0.95rem;
  border-radius: 3px;
  white-space: nowrap;
}
.callbtn:hover { background: var(--basin-solid); color: #FFF; }

/* ---------- hero ---------- */
.hero {
  background: var(--basin-solid);
  color: var(--on-dark);
  padding: clamp(3rem, 7vw, 6rem) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marigold);
  margin: 0 0 1.4rem;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 1.3rem;
  text-wrap: balance;
  color: #FFF8EC;
}
.hero h1 em { font-style: italic; color: var(--marigold); }
.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  max-width: 38ch;
  margin: 0 0 2.1rem;
  color: #D7C6A2;
}
.herobtns { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.btn {
  font-family: var(--body);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 3px;
  border: 1px solid transparent;
  display: inline-block;
  cursor: pointer;
}
.btn-solid { background: var(--marigold); color: #2A1D06; }
.btn-solid:hover { background: #FFD37A; color: #2A1D06; }
.btn-ghost { border-color: currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* ---------- comparador antes/después (elemento firma) ---------- */
.compare { display: grid; gap: 0.85rem; }
.compare-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: #3A2B10;
  touch-action: pan-y;
}
.compare-frame .layer { position: absolute; inset: 0; }
.compare-frame .layer img { width: 100%; height: 100%; object-fit: cover; }
.compare-frame .after { clip-path: inset(0 0 0 var(--split, 50%)); }
.compare-frame .divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--marigold);
  pointer-events: none;
}
.compare-frame .divider::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2.6rem; height: 2.6rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--marigold);
  border-radius: 50%;
  background: rgba(26, 17, 4, 0.6);
}
.compare-frame .stamp {
  position: absolute;
  bottom: 0.8rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(26, 17, 4, 0.88);
  color: var(--on-dark);
  padding: 0.28rem 0.6rem;
  border-radius: 2px;
}
.stamp.l { left: 0.8rem; }
.stamp.r { right: 0.8rem; }

.compare input[type="range"] {
  width: 100%;
  accent-color: var(--marigold);
  cursor: ew-resize;
}
.compare .hint {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A08A5C;
  margin: 0;
  text-align: center;
}

/* ---------- marcador de foto (mientras no hay imagen) ---------- */
.ph {
  width: 100%; height: 100%;
  min-height: 8rem;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.05) 0 10px,
      rgba(0,0,0,0.10) 10px 20px);
  background-color: var(--foam);
  color: var(--muted);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.3rem;
  padding: 1.1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ph b { display: block; font-size: 0.78rem; color: var(--ink); letter-spacing: 0.04em; }
.ph i { font-style: normal; font-size: 1.3rem; line-height: 1; }
.compare-frame .ph { background-color: #3A2B10; color: #A08A5C; }
.compare-frame .ph b { color: var(--on-dark); }

/* ---------- etiqueta de foto de banco ----------
   Marca las fotos de muestra que viajan dentro del tema. No hay que
   acordarse de quitarla: cada una desaparece sola en cuanto se sube la
   foto real de ese hueco, porque entonces ya no hay muestra que marcar. */
.gal-grid .frame,
.person .frame { position: relative; }

.sample-tag {
  position: absolute;
  z-index: 2;
  bottom: 0.5rem;
  left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(26, 17, 4, 0.86);
  color: var(--on-dark);
  padding: 0.22rem 0.5rem;
  border-radius: 2px;
  pointer-events: none;
}

/* En el comparador los sellos Antes/Después ya ocupan la parte de abajo,
   así que la etiqueta sube. Cada capa lleva la suya a un lado distinto:
   la de "después" va a la derecha porque esa capa se recorta desde la
   izquierda y allí siempre queda visible. */
.compare-frame .sample-tag { bottom: auto; top: 0.8rem; }
.compare-frame .after .sample-tag { left: auto; right: 0.8rem; }

/* ---------- secciones ---------- */
.gigi section { padding: clamp(3.2rem, 7vw, 6rem) var(--pad); }
.section-head { max-width: 44rem; margin: 0 0 3rem; }
.section-head .kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--basin);
  margin: 0 0 0.9rem;
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}
.section-head p { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 58ch; }

/* ---------- lista de precios ---------- */
.pricelist { display: grid; gap: 0; max-width: 54rem; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-top: 1px solid var(--hair);
}
.row:last-child { border-bottom: 1px solid var(--hair); }
.row h3 {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.32rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.row p { grid-column: 1; grid-row: 2; margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; max-width: 54ch; }
.row .amt {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--basin);
}
.row .amt small { display: block; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: right; }
.row.hi { background: var(--foam); margin-inline: calc(var(--pad) * -0.35); padding-inline: calc(var(--pad) * 0.35); }

.pricefoot {
  margin: 1.7rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- precios: encabezado plantado, lista a lo ancho ----------
   Esta sección entra justo después de una portada que llena la pantalla.
   Con la lista en una sola columna estrecha pegada a la izquierda, en un
   monitor de 1600 px sobraban unos 570 px de nada a la derecha.
   Con dos columnas el encabezado se planta en la suya y se queda fijo
   mientras recorres la lista, y los importes caen al borde derecho como
   en una carta impresa. Por debajo de 992 px vuelve a apilarse. */
@media (min-width: 62rem) {
  .section-split {
    display: grid;
    grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
  }
  .section-split .section-head {
    position: sticky;
    /* deja libre la barra de navegación, que también es sticky */
    top: 5.5rem;
    max-width: none;
    margin-bottom: 0;
  }
  .section-split .section-head p { max-width: 34ch; }
  .section-split .pricelist { max-width: none; }

  /* El realce sangraba usando --pad, que aquí ya no corresponde:
     dentro de la columna se pasaba de largo. Sangrado fijo y contenido. */
  .section-split .row.hi {
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
}

/* ---------- galería ---------- */
.gallery { background: var(--foam); }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.2rem;
}
.gal-grid figure { margin: 0; }
.gal-grid .frame { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--surface); }
.gal-grid .frame img { width: 100%; height: 100%; object-fit: cover; }
.gal-grid .ph { background-color: var(--surface); }
/* Un solo renglón: el nombre del corte. Antes había dos —nombre y raza— y
   el segundo iba en gris; ahora que queda uno solo va en tinta plena, si no
   el pie se lee como una nota al pie en vez de como el título de la foto. */
.gal-grid figcaption {
  font-size: 0.9rem;
  font-weight: 600;
  padding-top: 0.6rem;
  color: var(--ink);
}

/* Casilla ancha para una foto horizontal suelta. Hoy no la usa nadie —la
   galería son seis verticales iguales— pero se queda lista: en cuanto
   entre una foto apaisada, basta con marcarla 'wide' en inc/copy.php.
   Cada archivo de assets/ph/ se genera ya con la proporción de su casilla,
   así que este marco no vuelve a recortar nada; antes las fotos eran
   cuadradas, se recortaban dos veces y al gato le cortaba la cabeza. */
.gal-grid figure.wide .frame { aspect-ratio: 16 / 9; }
.gal-grid figure.wide { grid-column: 1 / -1; }

@media (min-width: 62rem) {
  .gal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Seis columnas y dos por foto = tres por fila, dos filas exactas. */
  .gal-grid figure { grid-column: span 2; }
}

/* ---------- equipo ---------- */
.team-photo {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
}
.team-photo .frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}
.team-photo .frame img { width: 100%; height: 100%; object-fit: cover; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}
.person .frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; margin-bottom: 1rem; }
.person .frame img { width: 100%; height: 100%; object-fit: cover; }
.person h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 0.15rem;
}
.person .role {
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--basin);
  margin: 0 0 0.6rem;
}
.person p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Retrato sin foto: monograma con las iniciales.
   Aquí no van fotos de banco. Edwin, Guisela, Guillermo y Hesler tienen
   nombre y apellido en la página; ponerles encima la cara de un
   desconocido sería atribuirles una identidad que no es suya. */
.person .mono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--foam);
  border: 1px solid var(--hair);
}
.person .mono span {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  letter-spacing: 0.08em;
  /* compensa el espacio que letter-spacing añade tras la última letra */
  text-indent: 0.08em;
  color: var(--basin);
}

/* ---------- promesa: la única banda ámbar de la página ---------- */
.promise {
  background: var(--marigold);
  color: #2A1D06;
  text-align: center;
}
.promise blockquote {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 3.6vw, 2.3rem);
  line-height: 1.3;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}
.promise .who {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B4E0C;
  margin: 1.6rem 0 0;
}

/* ---------- visita ---------- */
.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.4rem;
}
/* Va con ".gigi" delante a propósito. Es un <h3>, y el CSS de Elementor
   que colorea los encabezados lo alcanzaba: "HORARIO" y "DIRECCIÓN" salían
   en morado. Con .gigi .minihead (0,2,0) queda por encima. */
.gigi .minihead {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--basin);
  margin: 0 0 1rem;
}
/* Quienes te reciben. La foto se queda estrecha a propósito: es un retrato
   de dos personas, no una portada, y si crece se come el horario. */
.hosts .frame {
  aspect-ratio: 3 / 4;
  max-width: 15rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}
.hosts .frame img { width: 100%; height: 100%; object-fit: cover; }
.hosts-names {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0.9rem 0 0.35rem;
}
.hosts p { max-width: 25rem; }

.hours { list-style: none; margin: 0; padding: 0; max-width: 25rem; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.48rem 0;
  border-bottom: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}
.hours li:last-child { border-bottom: 0; }
.hours .closed { color: var(--clay); font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gigi address { font-style: normal; line-height: 1.75; }
.gigi address strong { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 400; }
.mapbox { margin-top: 1.2rem; border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; line-height: 0; }
.mapbox iframe { width: 100%; height: 15rem; border: 0; display: block; }
.mapbox .ph { min-height: 11rem; }

/* ---------- reservar ---------- */
.book { background: var(--surface); border-top: 1px solid var(--hair); text-align: center; }
.book h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.book > p { max-width: 48ch; margin: 0 auto 2rem; color: var(--muted); }
.book .btn-ghost { border-color: var(--hair); color: var(--ink); }
.book .btn-ghost:hover { background: var(--foam); }

/* ---------- color de encabezados: defensa contra Elementor ----------
   Elementor define un color global para h1–h6 en TODO el sitio. Al ser una
   regla directa sobre el elemento, gana a la herencia del body y estos
   encabezados salían en morado sobre el fondo café.
   Van enumerados uno a uno a propósito: un reset general del tipo
   ".gigi h3" tendría más especificidad que .minihead, que sí quiere su
   ámbar, y se lo llevaría por delante.
   Esta regla va al final para ganar los empates de especificidad con las
   definiciones de arriba, que solo fijan tipografía y tamaño. */
.section-head h2,
.row h3,
.person h3,
.book h2 { color: var(--ink); }
.book .note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.7rem 0 0;
}
.book .square-embed { max-width: 46rem; margin: 0 auto; }
.center { justify-content: center; }

/* ---------- pie ---------- */
.gigi footer {
  background: var(--basin-solid);
  color: #C9B68E;
  padding: clamp(2.6rem, 5vw, 3.8rem) var(--pad) 2rem;
  font-size: 0.92rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #4A3818;
}
.gigi footer h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marigold);
  margin: 0 0 0.85rem;
}
.gigi footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.gigi footer a { color: var(--on-dark); text-decoration: none; }
.gigi footer a:hover { text-decoration: underline; }
.gigi footer p { margin: 0; }
.legal {
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
}

/* ---------- teléfono ----------
   La mayoría de la gente entra desde el celular, así que esto no es un
   remiendo al final: es el caso principal.

   El encabezado va fijo arriba, y apilado en tres filas se comía un cuarto
   de la pantalla de un teléfono, de forma permanente. Ahora son dos filas:
   arriba el nombre y el botón de llamar —lo único que alguien busca con
   urgencia— y debajo los enlaces, que se deslizan de lado si no caben en
   vez de saltar a otro renglón. */
@media (max-width: 48rem) {
  .nav {
    padding: 0.55rem var(--pad);
    gap: 0.15rem 0.9rem;
  }
  .nav .wordmark { order: 1; margin-right: auto; }
  .nav .callbtn  { order: 2; }

  /* Corta la línea: obliga a los enlaces a bajar a una fila propia. */
  .nav::after { content: ""; order: 3; flex-basis: 100%; height: 0; }

  .nav ul {
    order: 4;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 1.1rem;
    font-size: 0.86rem;
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav ul li { flex: none; }
  .nav .lang { order: 5; }

  /* Zonas de toque. Un dedo necesita cerca de 44 px de alto; los enlaces
     del menú y el conmutador de idioma se quedaban en 24 y fallaba el
     primer intento. Se crece hacia arriba para no despegar el subrayado
     del enlace activo. */
  .nav ul a  { display: block; padding-top: 0.62rem; padding-bottom: 0.5rem; }
  .lang a    { padding: 0.72rem 0.85rem; }
  .callbtn   { padding: 0.62rem 0.95rem; }

  /* En el pie viven el teléfono, el WhatsApp y el correo: los enlaces por
     los que de verdad entra el trabajo. Medían 21 px de alto, la mitad de
     lo que necesita un dedo, y fallar el toque en el número de teléfono es
     perder al cliente. Se separan y se les da altura. */
  .gigi footer ul { gap: 0; }
  .gigi footer ul a { display: block; padding: 0.6rem 0; }
  .legal { gap: 0.4rem 1.5rem; }
  .legal a { display: inline-block; padding: 0.45rem 0; }

  /* Lo mismo en la dirección: ahí están el teléfono y el correo. */
  .visit-grid a { display: inline-block; padding: 0.4rem 0; }
  .wordmark { padding: 0.35rem 0; }
}

/* El comparador se arrastra con un input range nativo. Rehacerle el pulgar
   obligaría a repintar todo el control a mano, así que en pantalla táctil
   solo se le da altura: el área que responde al dedo crece y el control
   sigue siendo el del sistema. */
@media (pointer: coarse) {
  .compare input[type="range"] { height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gigi *, .gigi *::before, .gigi *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}