/* ══════════════════════════════════════════════════════════════════════════
   PATA SUCIA — hoja de estilos única
   HTML5 + CSS3 a mano. Sin frameworks, sin build, sin CDN, sin preprocesador.
   Mobile primero: base 360px → 768px → 1100px.

   ÍNDICE
     00 · Fuente de marca
     01 · Variables
     02 · Base y tipografía
     03 · Botones
     04 · Marcadores de foto
     05 · Encabezado y menú
     06 · Hero
     07 · Tres datos duros
     08 · Catálogo
     09 · Economía circular
     10 · Cómo comprar
     11 · Precios y envíos
     12 · Galería
     13 · Cuidados
     14 · Testimonios
     15 · Contacto y ubicación
     16 · Barra fija de acción (mobile)
     17 · Pie de página
     18 · Adaptaciones 768px
     19 · Adaptaciones 1100px

   ── DESVÍOS DEL ENCARGO, MANDADOS POR EL MANUAL DE MARCA v1.1 ─────────────
   1) LOGO DEL ENCABEZADO. El encargo pide logo-principal.png en el
      encabezado. El encabezado tiene fondo Marrón Pata (#8B4A0A) y el manual
      (pág. 8) dice que "la variante la determina el fondo, no la preferencia
      estética": sobre marrón va la versión NEGATIVO. Por eso el encabezado
      usa logo-claro.png. Con logo-principal.png el logo sería marrón sobre
      marrón: invisible.
   2) ALTURA DEL LOGO EN EL ENCABEZADO. El encargo pide 48px máx. en mobile.
      El manual (pág. 7) prohíbe reducir el conjunto por debajo de 70px de
      ANCHO, y el conjunto es vertical (ratio 0,781), así que 70px de ancho
      son ~90px de alto. No entra en 48px. La regla del manual para ese caso
      es "se usa el isotipo solo", pero el isotipo provisto es marrón y sobre
      fondo marrón no contrasta. Solución aplicada: conjunto en negativo al
      mínimo de 70px de ancho, recortando solo el margen transparente del PNG
      (el trazado no se toca). FALTA: el isotipo en blanco para poder hacer
      el encabezado compacto de 48px.
   3) PESO TIPOGRÁFICO DE TITULARES. El encargo pide 800 (ExtraBold). El
      manual (pág. 10) y el espécimen tipográfico definen Black (900) para
      titulares. Manda el manual: h1 y h2 van en 900.
   4) ISOTIPO SOBRE EL BLOQUE NARANJA. El encargo pide isotipos en los tres
      pasos de economía circular. El isotipo provisto es marrón y sobre
      Naranja Retazo da 3,08:1 — el manual (pág. 12) marca "fondo de bajo
      contraste" como uso incorrecto. Se usan íconos SVG en Negro Asfalto
      (5,78:1). FALTA: el isotipo monocromo negro, que el manual lista como
      variante autorizada pero no vino en el material.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   00 · FUENTE DE MARCA
   Montserrat variable (subconjunto latino), autoalojada. Un solo archivo
   cubre los 4 cortes del sistema: 400 texto · 500 datos · 700 producto ·
   900 titulares. Nada de Google Fonts en runtime.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-var.woff2') format('woff2-variations'),
       url('../fonts/montserrat-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ══════════════════════════════════════════════════════════════════════════
   01 · VARIABLES
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --marron-pata:    #8B4A0A;
  --negro-asfalto:  #1A1A1A;
  --blanco-hueso:   #F5F1EA;
  --naranja-retazo: #E07A1F;
  --gris-cemento:   #6E6E6E;

  --fuente: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ancho-max: 1100px;
  --radio: 4px;

  /* Alto de la barra fija de acción (solo mobile) */
  --alto-barra-accion: 60px;
}


/* ══════════════════════════════════════════════════════════════════════════
   02 · BASE Y TIPOGRAFÍA
   Cuerpo 17px mobile / 18px desktop · interlineado 1,6 · párrafo máx. 65ch.
   Ningún texto del sitio baja de 15px.
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* La barra fija de acción no puede tapar el último contenido */
  padding-bottom: var(--alto-barra-accion);
  background: var(--blanco-hueso);
  color: var(--negro-asfalto);
  font-family: var(--fuente);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto es obligatorio: sin eso el atributo height del HTML gana
   y el logo se deforma, cosa que el manual prohíbe (pág. 11). */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

/* El encabezado es fijo: los anclajes no pueden quedar tapados debajo */
[id] { scroll-margin-top: 120px; }

/* Foco visible siempre — se navega con teclado */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--marron-pata);
  outline-offset: 3px;
  border-radius: var(--radio);
}
.encabezado a:focus-visible,
.barra-accion a:focus-visible,
.pie a:focus-visible {
  outline-color: var(--blanco-hueso);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 20px;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--negro-asfalto); color: var(--blanco-hueso);
  padding: 14px 20px; font-weight: 700; text-decoration: none;
}
.saltar:focus { left: 0; }

h1, h2, h3 { font-family: var(--fuente); margin: 0 0 12px; text-wrap: balance; }

/* Titulares: Black (900) por manual, caja alta y tracking apretado */
h1 {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h2 {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--marron-pata);
}

/* Subrayado decorativo naranja bajo los h2 (nunca como color de texto) */
.titulo-seccion::after {
  content: '';
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 12px;
  background: var(--naranja-retazo);
  border-radius: 2px;
}

h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--negro-asfalto);
}

p, li { max-width: 65ch; }
p { margin: 0 0 16px; }

.bajada { font-size: 18px; line-height: 1.6; }

/* Etiquetas y datos: peso 500 */
.etiqueta-seccion {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.seccion { padding: 44px 0; }
.seccion-intro { margin-bottom: 28px; }

/* Dato duro que el cliente todavía no pasó */
.pendiente {
  display: inline-block;
  padding: 2px 10px;
  background: var(--naranja-retazo);
  color: var(--negro-asfalto);
  border-radius: var(--radio);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}


/* ══════════════════════════════════════════════════════════════════════════
   03 · BOTONES
   Toque mínimo 44px. Transición solo de color, máximo 150ms.
   ══════════════════════════════════════════════════════════════════════════ */
.boton,
.boton-linea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--fuente);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radio);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.boton {
  background: var(--marron-pata);
  color: var(--blanco-hueso);
}
.boton:hover { background: var(--naranja-retazo); color: var(--negro-asfalto); }

.boton-linea {
  background: transparent;
  color: var(--negro-asfalto);
  border-color: var(--marron-pata);
}
.boton-linea:hover { background: var(--marron-pata); color: var(--blanco-hueso); }

.boton svg, .boton-linea svg { flex: none; }

.boton-ancho { width: 100%; }


/* ══════════════════════════════════════════════════════════════════════════
   04 · MARCADORES DE FOTO
   ──────────────────────────────────────────────────────────────────────────
   REGLA DE PESO: ninguna imagen final puede pasar los 200 KB.
   JPG calidad 80. Las medidas exactas están en cada marcador y en LEEME.txt.
   ──────────────────────────────────────────────────────────────────────────
   Mientras la foto no existe se ve el marcador de marca. La img va encima
   con color:transparent, así no aparece ni el texto del alt ni el ícono de
   imagen rota, y no hace falta JS. El contenedor tiene la relación de
   aspecto exacta de la foto final: al copiar el archivo no se mueve un pixel.
   ══════════════════════════════════════════════════════════════════════════ */
.foto {
  position: relative;
  overflow: hidden;
  background: var(--blanco-hueso);
  border: 2px dashed var(--gris-cemento);
  border-radius: var(--radio);
  /* Sin esto, aspect-ratio + max-height calculan el ANCHO desde la altura y el
     marcador queda como un cuadradito arrinconado a la izquierda en vez de
     ocupar la columna. Se notaba en el hero en móvil. */
  width: 100%;
}

/* Isotipo centrado, al 25% del ancho */
.foto::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -62%);
  width: 25%;
  aspect-ratio: 1.138;              /* proporción real del isotipo (manual, pág. 5) */
  background: url('../img/isotipo.png') center / contain no-repeat;
  opacity: 0.15;
}

/* Mientras no hay foto, el visitante ve "Próximamente" — NO el nombre del
   archivo. El nombre y la medida siguen en el atributo data-archivo del HTML
   y en la lista del LEEME, que es donde los necesita quien carga las fotos.
   Antes esto imprimía data-archivo en pantalla: el sitio salió a la calle
   mostrando "hero-perro-buzo.jpg · 1200x900" a quien entraba. */
.foto::after {
  content: 'Próximamente';
  letter-spacing: .04em;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(24px);
  padding: 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gris-cemento);
}

.foto img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;      /* sin JS: no se lee el alt sobre el marcador */
}

/* Con JS: el onerror de la img agrega esta clase y saca también el ícono de
   imagen rota. Sin JS el sitio funciona igual, solo queda ese ícono chico. */
.foto img.sin-foto { display: none; }

/* Relaciones de aspecto según la lista de fotos */
.ar-4-3  { aspect-ratio: 4 / 3; }    /* 1200x900 · 800x600 */
.ar-1-1  { aspect-ratio: 1 / 1; }    /* 800x800 · 900x900 · 400x400 */
.ar-2-1  { aspect-ratio: 2 / 1; }    /* 1200x600 */
.ar-4-5  { aspect-ratio: 4 / 5; }    /* 800x1000 */
.ar-3-2  { aspect-ratio: 3 / 2; }    /* 1200x800 */


/* ══════════════════════════════════════════════════════════════════════════
   05 · ENCABEZADO Y MENÚ
   Fondo Marrón Pata, fijo. El teléfono nunca se esconde.
   En mobile el menú es una tira horizontal con scroll lateral (sin
   hamburguesa, para no tapar el contacto).
   ══════════════════════════════════════════════════════════════════════════ */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--marron-pata);
  color: var(--blanco-hueso);
}

/* Mobile: fila 1 = logo + teléfono · fila 2 = tira del menú a todo el ancho.
   Desktop (1100px): los tres en una sola fila. */
.encabezado-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 14px;
  padding: 6px 0 0;
}
.encabezado-marca { order: 1; }
.encabezado-tel   { order: 2; }
.menu             { order: 3; flex: 1 0 100%; }

/* El PNG del logo trae mucho margen transparente alrededor. Esta ventana
   recorta SOLO ese margen vacío: el trazado del logo no se toca, no se
   deforma ni se recorta. Medidas sacadas del archivo real:
   arte = 57,5% del ancho del lienzo y 73,7% del alto. */
.encabezado-marca {
  display: block;
  position: relative;
  flex: none;
  width: 70px;      /* ancho mínimo del conjunto según manual, pág. 7 */
  height: 90px;
  overflow: hidden;
}
.encabezado-marca img {
  position: absolute;
  width: 121.7px;
  height: 121.7px;
  max-width: none;
  left: -25.6px;
  top: -13.8px;
}

.encabezado-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--blanco-hueso);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radio);
  transition: background-color 150ms ease;
}
.encabezado-tel:hover { background: rgba(245, 241, 234, 0.16); }

/* Menú: 5 ítems, tira horizontal con scroll lateral en mobile */
.menu {
  border-top: 1px solid rgba(245, 241, 234, 0.25);
  /* El menú es una tira con scroll lateral a propósito. Sin esto el nav no
     podía encogerse —es un flex item— y medía 545px dentro de una ventana de
     390: el scroll quedaba a cargo del documento en vez del propio menú. */
  min-width: 0;
  max-width: 100%;
}
.menu ul {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu ul::-webkit-scrollbar { display: none; }
.menu li { max-width: none; flex: none; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--blanco-hueso);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radio);
  transition: background-color 150ms ease;
}
.menu a:hover { background: rgba(245, 241, 234, 0.16); }


/* ══════════════════════════════════════════════════════════════════════════
   06 · HERO
   Primera pantalla: en 360x640 entran título, bajada y los dos botones.
   Si algo no entra, se achica la foto, nunca el texto.
   ══════════════════════════════════════════════════════════════════════════ */
.hero { padding: 18px 0 28px; }

.hero h1 { font-size: 26px; margin-bottom: 10px; }
.hero .bajada { font-size: 17px; margin-bottom: 18px; }

.hero-acciones { display: grid; gap: 10px; margin-bottom: 20px; }

/* En mobile la foto del hero va recortada en alto para no empujar el texto:
   primero entran título, bajada y los dos botones. */
.hero .foto { max-height: 240px; }   /* franja ancha, no un sello chico */


/* ══════════════════════════════════════════════════════════════════════════
   07 · TRES DATOS DUROS
   ══════════════════════════════════════════════════════════════════════════ */
.datos-duros {
  background: var(--blanco-hueso);
  border-top: 1px solid var(--gris-cemento);
  border-bottom: 1px solid var(--gris-cemento);
  padding: 32px 0;
}

.datos-grilla { display: grid; gap: 26px; }

.dato-isotipo { width: 40px; height: 36px; margin-bottom: 12px; }

.dato h3 { margin-bottom: 6px; }
.dato p { margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   08 · CATÁLOGO
   Tres familias con subtítulo (sin filtros: no hay JS en esta etapa).
   ══════════════════════════════════════════════════════════════════════════ */
.familia { margin-bottom: 40px; }
.familia:last-of-type { margin-bottom: 28px; }

.familia-titulo {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--marron-pata);
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gris-cemento);
}

.catalogo-grilla { display: grid; gap: 20px; }

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco-hueso);
  border: 3px solid var(--marron-pata);
  border-radius: var(--radio);
  overflow: hidden;
}

.tarjeta .foto { border: 0; border-radius: 0; border-bottom: 1px solid var(--gris-cemento); }

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

/* Etiqueta "Pieza única": naranja de fondo, texto negro asfalto */
.chapa {
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--naranja-retazo);
  color: var(--negro-asfalto);
  border-radius: var(--radio);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarjeta h3 { margin: 0; }

.tarjeta-tela { margin: 0; font-size: 16px; }

.tarjeta-talles { margin: 0; font-size: 16px; font-weight: 500; }

.tarjeta-precio { margin: 2px 0 0; font-size: 21px; font-weight: 700; }

.tarjeta .boton { margin-top: 12px; }

/* Tabla de talles */
.talles { margin-top: 8px; }

.talles-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.talles-tabla caption {
  text-align: left;
  font-weight: 500;
  padding-bottom: 12px;
}
.talles-tabla th,
.talles-tabla td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gris-cemento);
}
.talles-tabla th {
  font-weight: 700;
  background: rgba(139, 74, 10, 0.08);
}


/* ══════════════════════════════════════════════════════════════════════════
   09 · ECONOMÍA CIRCULAR
   Bloque de ancho completo, fondo Naranja Retazo con texto Negro Asfalto.
   ══════════════════════════════════════════════════════════════════════════ */
.circular {
  background: var(--naranja-retazo);
  color: var(--negro-asfalto);
}
.circular h2 { color: var(--negro-asfalto); }
.circular .titulo-seccion::after { background: var(--negro-asfalto); }

.circular .foto {
  background: rgba(245, 241, 234, 0.55);
  border-color: var(--negro-asfalto);
}
.circular .foto::after { color: var(--negro-asfalto); }
.circular .foto::before { opacity: 0.25; }

.circular-pasos {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 20px;
}
.circular-paso {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  max-width: none;
}
.circular-paso svg { color: var(--negro-asfalto); }
.circular-paso h3 { margin-bottom: 2px; }
.circular-paso p { margin: 0; }

.circular-fotos { display: grid; gap: 16px; margin-top: 26px; }

/* La foto de antes/después es muy apaisada: a todo ancho quedaba enorme */
.foto-centrada { max-width: 760px; margin-left: auto; margin-right: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   10 · CÓMO COMPRAR
   ══════════════════════════════════════════════════════════════════════════ */
.pasos-compra {
  counter-reset: paso;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.paso-tarjeta {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  background: var(--blanco-hueso);
  border: 1px solid var(--gris-cemento);
  border-radius: var(--radio);
  max-width: none;
}

.paso-numero {
  counter-increment: paso;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--marron-pata);
}
.paso-numero::before { content: counter(paso); }

.paso-tarjeta h3 { margin-bottom: 4px; }
.paso-tarjeta p { margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   11 · PRECIOS Y ENVÍOS
   En mobile, lista de bloques (nunca scroll horizontal). En desktop, tabla.
   ══════════════════════════════════════════════════════════════════════════ */
.envios-bloques { display: grid; gap: 16px; margin-bottom: 24px; }

.envio-bloque {
  padding: 20px;
  background: var(--blanco-hueso);
  border: 1px solid var(--gris-cemento);
  border-radius: var(--radio);
}
.envio-bloque h3 { margin-bottom: 10px; }
.envio-bloque dl { margin: 0; }
.envio-bloque dt {
  font-weight: 700;
  font-size: 16px;
  margin-top: 10px;
}
.envio-bloque dt:first-child { margin-top: 0; }
.envio-bloque dd { margin: 2px 0 0; font-size: 16px; }

.envios-tabla { display: none; }

.pagos { margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════════════════
   12 · GALERÍA
   ══════════════════════════════════════════════════════════════════════════ */
.galeria-grilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}


/* ══════════════════════════════════════════════════════════════════════════
   13 · CUIDADOS
   ══════════════════════════════════════════════════════════════════════════ */
.cuidados-fila { display: grid; gap: 26px; }

.cuidados-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.cuidado {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  max-width: 65ch;
}
.cuidado svg { color: var(--marron-pata); margin-top: 3px; }
.cuidado h3 { font-size: 17px; margin-bottom: 2px; }
.cuidado p { margin: 0; font-size: 16px; }


/* ══════════════════════════════════════════════════════════════════════════
   14 · TESTIMONIOS
   ══════════════════════════════════════════════════════════════════════════ */
.testimonios-grilla { display: grid; gap: 20px; }

.testimonio {
  margin: 0;
  padding: 20px;
  background: var(--blanco-hueso);
  border: 1px solid var(--gris-cemento);
  border-radius: var(--radio);
}
.testimonio .foto { width: 96px; margin-bottom: 14px; border-radius: 50%; }
.testimonio .foto::after { font-size: 15px; transform: translateY(16px); }
.testimonio blockquote { margin: 0 0 12px; font-size: 17px; }
.testimonio figcaption { font-size: 16px; font-weight: 500; }


/* ══════════════════════════════════════════════════════════════════════════
   15 · CONTACTO Y UBICACIÓN
   ══════════════════════════════════════════════════════════════════════════ */
.contacto-fila { display: grid; gap: 28px; }

.contacto-tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--marron-pata);
  text-decoration: none;
  margin-bottom: 16px;
}
.contacto-tel:hover { text-decoration: underline; }

.contacto-direccion { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.contacto-horario { font-size: 17px; font-weight: 500; margin-bottom: 20px; }

.contacto-enlaces { display: grid; gap: 12px; }


/* ══════════════════════════════════════════════════════════════════════════
   16 · BARRA FIJA DE ACCIÓN (solo mobile)
   Dos botones al 50%. En desktop no va: el teléfono queda en el encabezado.
   ══════════════════════════════════════════════════════════════════════════ */
.barra-accion {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  display: flex;
  height: var(--alto-barra-accion);
  background: var(--negro-asfalto);
}

.barra-accion a {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--blanco-hueso);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.barra-accion a + a { border-left: 1px solid rgba(245, 241, 234, 0.3); }
.barra-accion a:hover { background: rgba(245, 241, 234, 0.14); }
.barra-accion .destacado { background: var(--marron-pata); }
.barra-accion .destacado:hover { background: var(--naranja-retazo); color: var(--negro-asfalto); }


/* ══════════════════════════════════════════════════════════════════════════
   17 · PIE DE PÁGINA
   ══════════════════════════════════════════════════════════════════════════ */
.pie {
  background: var(--negro-asfalto);
  color: var(--blanco-hueso);
  padding: 40px 0;
}

.pie-marca { width: 110px; margin-bottom: 20px; }

.pie-legal { font-size: 17px; font-weight: 500; line-height: 2; margin-bottom: 20px; }
.pie a { color: var(--blanco-hueso); }

/* El teléfono del pie va dentro de una frase: se le da alto de toque sin
   romper el renglón */
.pie-legal a { display: inline-block; padding: 8px 0; }

.pie-links {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.pie-links li { max-width: none; }
.pie-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.pie-links a:hover { text-decoration: underline; }

.pie-derechos {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 241, 234, 0.28);
  font-size: 16px;
}


/* ══════════════════════════════════════════════════════════════════════════
   18 · ADAPTACIONES — 768px
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  h1 { font-size: 42px; }
  h2 { font-size: 30px; }

  .seccion { padding: 60px 0; }

  .hero { padding: 40px 0 48px; }
  .hero-acciones { grid-auto-flow: column; justify-content: start; }
  /* Todavía a una columna: la foto no puede comerse la pantalla */
  .hero .foto { max-height: 380px; }

  .datos-grilla { grid-template-columns: repeat(3, 1fr); gap: 30px; }

  .catalogo-grilla { grid-template-columns: repeat(2, 1fr); }

  .circular-pasos { grid-template-columns: repeat(3, 1fr); }
  .circular-fotos { grid-template-columns: 1fr 1fr; }

  .pasos-compra { grid-template-columns: repeat(2, 1fr); }

  .testimonios-grilla { grid-template-columns: repeat(3, 1fr); }

  .cuidados-fila { grid-template-columns: 1.2fr 1fr; align-items: start; }

  .contacto-fila { grid-template-columns: 1fr 1fr; align-items: center; }
  .contacto-enlaces { grid-auto-flow: column; justify-content: start; }

  /* Envíos: en desktop sí entra la tabla */
  .envios-bloques { display: none; }
  .envios-tabla {
    display: table;
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
    margin-bottom: 24px;
  }
  .envios-tabla th,
  .envios-tabla td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--gris-cemento);
  }
  .envios-tabla thead th {
    font-weight: 700;
    background: rgba(139, 74, 10, 0.08);
  }
  .envios-tabla tbody th { font-weight: 700; }
}


/* ══════════════════════════════════════════════════════════════════════════
   19 · ADAPTACIONES — 1100px
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  body {
    font-size: 18px;
    padding-bottom: 0;          /* en desktop no hay barra fija */
  }

  h1 { font-size: 50px; }
  h2 { font-size: 34px; }
  h3 { font-size: 20px; }

  .seccion { padding: 76px 0; }

  [id] { scroll-margin-top: 130px; }

  /* Encabezado en una sola fila: logo · menú · teléfono */
  .encabezado-in { flex-wrap: nowrap; padding: 8px 0; gap: 24px; }
  .encabezado-tel { order: 3; }
  .menu { order: 2; flex: 1 1 auto; border-top: 0; }
  .menu ul { overflow-x: visible; justify-content: flex-end; }

  .hero { padding: 56px 0 64px; }
  .hero .foto { max-height: none; }
  .hero-fila {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
  }

  .catalogo-grilla { grid-template-columns: repeat(3, 1fr); }

  .circular-fila {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
  }
  /* Dentro de la columna angosta los tres pasos vuelven a una sola columna:
     en tres quedaban en tiras de dos palabras. */
  .circular-pasos { grid-template-columns: 1fr; }
  .circular-fotos { margin-top: 0; grid-template-columns: 1fr 1fr; }

  .pasos-compra { grid-template-columns: repeat(4, 1fr); }

  .galeria-grilla { grid-template-columns: repeat(3, 1fr); }

  .cuidados-fila { grid-template-columns: 1.3fr 1fr; }

  /* La barra fija es solo de mobile */
  .barra-accion { display: none; }

  .pie { padding: 56px 0; }
  .pie-marca { width: 130px; }
}


/* ── Preferencia de menos movimiento ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}