/* ==========================================================================
   IRONTRAIL — hoja de estilos global
   Compartida por index.html (inicio) y tienda.html.
   Orden: tokens · base · layout · cabecera · hero · productos · pie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */

:root {
  /* Paleta clara */
  --color-crema: #f2ead9;
  --color-tinta: #221a13;
  --color-texto: #2a2018;
  --color-texto-suave: #6b5d4c;
  --color-apagado: #8a7c63;
  --color-marron: #7c4a2d;
  --color-marron-oscuro: #5e3620;
  --color-borde: #d9cbb0;
  --color-borde-tarjeta: #e3d8bf;
  --color-oro: #c9a876;
  --color-oliva: #5b6440;
  --color-rojo: #a8432b;

  /* Paleta del pie (fondo oscuro) */
  --pie-fondo: #221a13;
  --pie-texto: #e6dcc6;
  --pie-apagado: #b6a98f;
  --pie-enlace: #c9bda2;
  --pie-borde: #362b1e;
  --pie-chip-borde: #4a3d2c;

  /* Tipografía */
  --fuente-titulo: "Oswald", sans-serif;
  --fuente-texto: "Manrope", sans-serif;

  /* Métricas */
  --ancho-max: 1280px;
  --alto-hero: 460px;
}

@media (min-width: 900px) {
  :root {
    --alto-hero: 580px;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  font-family: var(--fuente-texto);
  background: var(--color-crema);
  color: var(--color-texto);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-marron);
  text-decoration: none;
}

a:hover {
  color: var(--color-marron-oscuro);
}

img {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Layout y utilidades
   -------------------------------------------------------------------------- */

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Marcador visual para las imágenes que aún no se han cargado. */
.marcador {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
}

/* Visible solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Barra de anuncio
   -------------------------------------------------------------------------- */

.anuncio {
  background: var(--color-tinta);
  color: var(--color-crema);
  padding: 9px 16px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Cabecera
   -------------------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-crema);
  border-bottom: 1px solid var(--color-borde);
}

.cabecera__barra {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.05em;
  color: var(--color-tinta);
}

.logo:hover {
  color: var(--color-tinta);
}

.logo__acento {
  color: var(--color-marron);
}

/* Botón hamburguesa (solo móvil) */
.hamburguesa {
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.hamburguesa__linea {
  width: 20px;
  height: 2px;
  background: var(--color-tinta);
}

/* Navegación de escritorio */
.nav {
  display: none;
  align-items: center;
  gap: 32px;
  font-family: var(--fuente-titulo);
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.nav__enlace {
  color: var(--color-tinta);
}

.nav__enlace:hover {
  color: var(--color-marron);
}

.nav__desplegable {
  position: relative;
}

.nav__disparador {
  color: var(--color-tinta);
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  letter-spacing: inherit;
}

.nav__menu {
  position: absolute;
  top: 28px;
  left: -16px;
  background: #ffffff;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(34, 26, 19, 0.12);
  padding: 10px 0;
  min-width: 200px;
  display: none;
  flex-direction: column;
}

.nav__desplegable:hover .nav__menu,
.nav__desplegable:focus-within .nav__menu {
  display: flex;
}

.nav__menu a {
  padding: 10px 20px;
  color: var(--color-texto);
  font-weight: 500;
}

/* Carrito */
.carrito {
  display: flex;
  align-items: center;
  gap: 18px;
}

.carrito__icono {
  color: var(--color-tinta);
}

.carrito__contador {
  font-family: var(--fuente-titulo);
  font-size: 13px;
  font-weight: 600;
  background: var(--color-marron);
  color: var(--color-crema);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Menú desplegable en móvil */
.menu-movil {
  display: none;
  border-top: 1px solid var(--color-borde);
  background: var(--color-crema);
  padding: 16px 24px;
  flex-direction: column;
  gap: 16px;
  font-family: var(--fuente-titulo);
  font-size: 15px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.menu-movil.esta-abierto {
  display: flex;
}

.menu-movil a {
  color: var(--color-tinta);
}

/* A partir de 900px se cambia hamburguesa por navegación completa. */
@media (min-width: 900px) {
  .hamburguesa {
    display: none;
  }

  .nav {
    display: flex;
  }

  .menu-movil,
  .menu-movil.esta-abierto {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. Hero / carrusel
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  height: var(--alto-hero);
  overflow: hidden;
  background: var(--color-tinta);
}

.hero__diapositiva {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s ease;
}

.hero__diapositiva.esta-activa {
  opacity: 1;
  z-index: 2;
}

.hero__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__marcador {
  color: var(--color-crema);
}

.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(34, 26, 19, 0.72) 0%,
    rgba(34, 26, 19, 0.35) 55%,
    rgba(34, 26, 19, 0.1) 100%
  );
  pointer-events: none;
}

.hero__contenido {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 0 8vw;
  max-width: 640px;
  pointer-events: none;
}

.hero__antetitulo {
  font-family: var(--fuente-titulo);
  color: var(--color-oro);
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 13px;
}

.hero__titulo {
  font-family: var(--fuente-titulo);
  color: var(--color-crema);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

.hero__texto {
  color: var(--pie-texto);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
}

.hero__cta {
  pointer-events: auto;
  align-self: flex-start;
  background: var(--color-marron);
  color: var(--color-crema);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 4px;
  margin-top: 6px;
}

.hero__cta:hover {
  background: var(--color-marron-oscuro);
  color: var(--color-crema);
}

/* Puntos de navegación */
.hero__puntos {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}

.hero__punto {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  border: none;
  background: rgba(242, 234, 217, 0.4);
  cursor: pointer;
  padding: 0;
  transition: width 0.3s ease, background 0.3s ease;
}

.hero__punto.esta-activo {
  width: 26px;
  background: var(--color-oro);
}

/* --------------------------------------------------------------------------
   7. Secciones de contenido
   -------------------------------------------------------------------------- */

.seccion {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 72px 24px 80px;
}

.seccion__encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.seccion__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  margin: 0;
  color: var(--color-tinta);
}

.seccion__enlace {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* Cabecera de la tienda */
.intro {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 40px 24px 8px;
}

.miga {
  font-size: 13px;
  color: var(--color-apagado);
}

.miga a {
  color: var(--color-apagado);
}

.intro__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  margin: 10px 0 0;
  color: var(--color-tinta);
}

.intro__texto {
  color: var(--color-texto-suave);
  font-size: 14px;
  margin: 8px 0 0;
  max-width: 560px;
}

.catalogo {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.catalogo__vacio {
  text-align: center;
  color: var(--color-apagado);
  padding: 60px 0;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   8. Rejilla y tarjeta de producto
   -------------------------------------------------------------------------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.tarjeta {
  background: #ffffff;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Es un <button> cuando hay foto: se le quitan los estilos nativos. */
.tarjeta__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  overflow: hidden;
}

button.tarjeta__media {
  cursor: zoom-in;
}

.tarjeta__media .tarjeta__imagen {
  transition: transform 0.35s ease;
}

button.tarjeta__media:hover .tarjeta__imagen,
button.tarjeta__media:focus-visible .tarjeta__imagen {
  transform: scale(1.04);
}

.tarjeta__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta__etiqueta {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-rojo);
  color: #ffffff;
  font-family: var(--fuente-titulo);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
}

.tarjeta__cuerpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.tarjeta__categoria {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-oliva);
  font-weight: 700;
  text-transform: uppercase;
}

.tarjeta__nombre {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--color-texto);
}

.tarjeta__tallas {
  font-size: 12px;
  color: var(--color-apagado);
}

/* margin-top:auto empuja precio y botón al fondo, para que las tarjetas
   de distinta altura alineen su CTA. */
.tarjeta__pie {
  margin-top: auto;
  padding-top: 10px;
}

.tarjeta__precio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-tinta);
}

/* CTA principal: abre WhatsApp con el producto ya escrito en el mensaje. */
.tarjeta__comprar {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 5px;
  background: #25d366;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s ease;
}

.tarjeta__comprar:hover,
.tarjeta__comprar:focus-visible {
  background: #1eb955;
  color: #ffffff;
}

.tarjeta__comprar-icono {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. Pie de página
   -------------------------------------------------------------------------- */

.pie {
  background: var(--pie-fondo);
  color: var(--pie-texto);
}

.pie__columnas {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 56px 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}

.pie__marca {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-crema);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.pie__marca-acento {
  color: var(--color-oro);
}

.pie__descripcion {
  font-size: 13px;
  line-height: 1.6;
  color: var(--pie-apagado);
  max-width: 260px;
  margin: 0 0 16px;
}

.pie__redes {
  display: flex;
  gap: 14px;
  font-size: 13px;
}

.pie__redes a {
  color: var(--pie-texto);
}

.pie__titulo {
  font-family: var(--fuente-titulo);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-crema);
  margin: 0 0 16px;
}

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}

.pie__lista a {
  color: var(--pie-enlace);
}

.pie__redes a:hover,
.pie__lista a:hover {
  color: var(--color-oro);
}

.pie__pagos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pie__chip {
  border: 1px solid var(--pie-chip-borde);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--pie-enlace);
}

.pie__legal {
  border-top: 1px solid var(--pie-borde);
  padding: 18px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--color-apagado);
}

/* --------------------------------------------------------------------------
   10. Visor de foto ampliada
   -------------------------------------------------------------------------- */

/* El fade lo hace `opacity`; `visibility` se retrasa hasta que termina para
   que el elemento siga siendo visible mientras se desvanece (si no, el fade
   out no se vería) y deje de recibir clics una vez cerrado. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(19, 14, 10, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.visor.esta-abierto {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}

.visor__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(640px, 100%);
}

.visor__imagen {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
  transform: scale(0.97);
  transition: transform 0.28s ease;
}

.visor.esta-abierto .visor__imagen {
  transform: scale(1);
}

.visor__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.visor__nombre {
  font-family: var(--fuente-titulo);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-crema);
}

.visor__precio {
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-oro);
}

.visor__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(242, 234, 217, 0.35);
  border-radius: 50%;
  background: none;
  color: var(--color-crema);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.visor__cerrar:hover,
.visor__cerrar:focus-visible {
  background: rgba(242, 234, 217, 0.14);
  border-color: var(--color-crema);
}

/* Evita que la página de fondo se desplace con el visor abierto. */
.sin-scroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   11. Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */

.whatsapp {
  position: fixed;
  right: 20px;
  /* safe-area evita que quede bajo la barra de gestos en iPhone. */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(34, 26, 19, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.whatsapp:hover,
.whatsapp:focus-visible {
  background: #1eb955;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(34, 26, 19, 0.34);
}

.whatsapp__icono {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

@media (min-width: 900px) {
  .whatsapp {
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
  }

  .whatsapp__icono {
    width: 32px;
    height: 32px;
  }
}

/* --------------------------------------------------------------------------
   12. Accesibilidad
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__diapositiva,
  .hero__punto,
  .whatsapp,
  .tarjeta__media .tarjeta__imagen,
  .visor,
  .visor__imagen {
    transition: none;
  }

  .whatsapp:hover,
  .whatsapp:focus-visible {
    transform: none;
  }

  button.tarjeta__media:hover .tarjeta__imagen,
  button.tarjeta__media:focus-visible .tarjeta__imagen {
    transform: none;
  }

  .visor__imagen {
    transform: none;
  }
}