/* =========================================================
   ONLYNIKA · estilos
   Móvil primero. Sin frameworks ni compilación.
   Tipografía: Montserrat (títulos) + Jost (textos).
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  --verde: #143a2b;
  --verde-hondo: #0e2b20;
  --dorado: #e3a328;
  --dorado-claro: #eeb544;
  --crema: #f7f1e6;
  --crema-2: #efe6d4;
  --celeste: #6ca9db;          /* solo detalles pequeños */
  --texto-suave: #3d5a4c;      /* verde atenuado para textos secundarios sobre crema */

  --f-texto: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-titulo: 800;

  --gutter: clamp(18px, 5vw, 48px);
  --max: 1200px;
  --alto-cabecera: 66px;

  --sombra-btn: 0 6px 18px -6px rgba(14, 43, 32, .4);
  --sombra-btn-hover: 0 14px 28px -10px rgba(14, 43, 32, .5);
}

@media (min-width: 900px) {
  :root { --alto-cabecera: 78px; }
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--verde);
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

section[id] { scroll-margin-top: var(--alto-cabecera); }

.envoltorio {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: 6px;
}
.oscuro :focus-visible,
.cabecera :focus-visible,
.consulta :focus-visible,
.pie :focus-visible { outline-color: var(--dorado); }
/* Dentro de las tarjetas claras (sobre sección oscura) vuelve a verde */
.oscuro .tarjeta :focus-visible { outline-color: var(--verde); }

.saltar {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--verde);
  color: var(--crema);
  border-radius: 999px;
  font-weight: 500;
}
.saltar:focus { top: 12px; }

/* ---------- Tipografía común ---------- */
.titulo {
  font-family: var(--f-titulo);
  font-weight: var(--peso-titulo);
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -.005em;
  text-wrap: balance;
}

html:not(.js) .solo-js { display: none !important; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta::before,
.etiqueta::after {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--dorado);
}
@media (min-width: 600px) {
  .etiqueta { gap: 14px; letter-spacing: .2em; }
  .etiqueta::before,
  .etiqueta::after { width: 32px; }
}

.oscuro {
  background: var(--verde);
  color: var(--crema);
}

/* ---------- Botones: píldora sólida, sombra suave, leve elevación ---------- */
.btn {
  --b-fondo: var(--verde);
  --b-fondo-hover: #1b4a37;
  --b-texto: var(--crema);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: .85em 1.9em;
  border: 0;
  border-radius: 999px;
  background: var(--b-fondo);
  color: var(--b-texto);
  box-shadow: var(--sombra-btn);
  font-family: var(--f-texto);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.btn--dorado { --b-fondo: var(--dorado); --b-fondo-hover: var(--dorado-claro); --b-texto: var(--verde); }
.btn--crema  { --b-fondo: var(--crema);  --b-fondo-hover: #fffaf1;            --b-texto: var(--verde); }

.btn--sm { min-height: 44px; padding: .65em 1.35em; font-size: .78rem; }

.btn__icono { width: 1.25em; height: 1.25em; flex-shrink: 0; }

@media (hover: hover) {
  .btn:hover {
    background: var(--b-fondo-hover);
    transform: translateY(-2px);
    box-shadow: var(--sombra-btn-hover);
  }
}
.btn:active { transform: translateY(0); box-shadow: var(--sombra-btn); }

.oscuro .btn,
.cabecera .btn {
  --sombra-btn: 0 6px 18px -6px rgba(0, 0, 0, .45);
  --sombra-btn-hover: 0 14px 28px -10px rgba(0, 0, 0, .55);
}

/* ---------- 1. Barra superior ---------- */
.aviso {
  padding: 8px 12px;
  background: var(--dorado);
  color: var(--verde);
  font-size: clamp(11px, 3.1vw, 13.5px);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

/* ---------- 2. Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--verde);
  color: var(--crema);
  border-bottom: 1px solid rgba(247, 241, 230, .1);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--alto-cabecera);
}

.cabecera__logo { display: block; flex-shrink: 0; border-radius: 2px; }
.cabecera__logo img { width: clamp(140px, 38vw, 190px); }

.cabecera__nav { display: none; margin-left: auto; }
.cabecera__cta { display: none; }

.menu { display: flex; gap: clamp(22px, 2.8vw, 40px); }
.menu a {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 6px;
  background: linear-gradient(var(--dorado), var(--dorado)) left bottom / 0 2px no-repeat;
  transition: background-size .3s ease;
}
.menu a:hover { background-size: 100% 2px; }

.menu-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 241, 230, .1);
  color: var(--crema);
  font: 500 .8rem/1 var(--f-texto);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle__icono {
  position: relative;
  width: 18px;
  height: 12px;
}
.menu-toggle__icono::before,
.menu-toggle__icono::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.menu-toggle__icono::before { top: 1px; }
.menu-toggle__icono::after  { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icono::before { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icono::after  { top: 5px; transform: rotate(-45deg); }

.menu-movil {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100svh - var(--alto-cabecera));
  overflow-y: auto;
  padding: 8px var(--gutter) 28px;
  background: var(--verde);
  border-top: 1px solid rgba(247, 241, 230, .12);
  box-shadow: 0 24px 40px rgba(14, 43, 32, .35);
}
.menu-movil ul { margin-bottom: 24px; }
.menu-movil li + li { border-top: 1px solid rgba(247, 241, 230, .12); }
.menu-movil ul a {
  display: block;
  padding: 16px 0;
  font-family: var(--f-titulo);
  font-weight: var(--peso-titulo);
  font-size: 1.2rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.menu-movil .btn { width: 100%; }

@media (min-width: 900px) {
  .cabecera__nav { display: block; }
  .cabecera__cta { display: inline-flex; }
  .menu-toggle,
  .menu-movil { display: none !important; }
}

/* ---------- 3. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 82vh;
  min-height: calc(100svh - var(--alto-cabecera) - 34px);
  overflow: hidden;
  text-align: center;
}

/* Foto de fondo: images/hero-productos.jpg. Si no existe, se ve el verde. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../images/hero-productos.jpg') center / cover no-repeat;
}
/* Capa oscura para que el texto se lea sobre cualquier foto */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Calculada para que el texto cumpla el contraste mínimo incluso sobre zonas muy claras de la foto.
     Cuando tengas la foto, se puede aclarar un poco si se ve demasiado oscura. */
  background: linear-gradient(180deg, rgba(14, 43, 32, .78) 0%, rgba(14, 43, 32, .72) 50%, rgba(14, 43, 32, .86) 100%);
}

.hero__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(56px, 10vh, 120px);
}

.hero .etiqueta { color: var(--dorado); margin-bottom: 22px; }

.hero__titulo {
  font-size: clamp(1.5rem, 5.8vw, 3rem);
  margin-bottom: 22px;
}
.hero__titulo span { display: block; }
.hero__titulo .acento { color: var(--dorado); }

.hero__texto {
  max-width: 34rem;
  font-size: clamp(1.02rem, 2.6vw, 1.18rem);
  line-height: 1.7;
  color: rgba(247, 241, 230, .9);
  margin-bottom: 34px;
  text-wrap: pretty;
}

.hero__botones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  margin-bottom: 40px;
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(247, 241, 230, .92);
}
.hero__datos li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero__datos li::before {   /* detalle celeste */
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--celeste);
}

@media (min-width: 560px) {
  .hero__botones {
    flex-direction: row;
    justify-content: center;
    width: auto;
    max-width: none;
  }
}

/* ---------- 4. Frase destacada ---------- */
.destacada {
  padding-block: clamp(88px, 15vw, 168px);
  text-align: center;
}
.destacada__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.destacada__detalle {       /* detalle celeste */
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--celeste);
  margin-bottom: 28px;
}
.destacada__titulo {
  font-size: clamp(1.3rem, 4.4vw, 2.2rem);
  max-width: 20ch;
  margin-bottom: 22px;
}
/* Subrayado dorado detrás del texto (el texto sigue en verde para que se lea) */
.destacada__titulo mark {
  background: linear-gradient(transparent 62%, rgba(227, 163, 40, .55) 62%, rgba(227, 163, 40, .55) 92%, transparent 92%);
  color: inherit;
  padding-inline: .06em;
}
.destacada__texto {
  max-width: 30rem;
  font-size: clamp(1.02rem, 2.4vw, 1.15rem);
  color: var(--texto-suave);
  margin-bottom: 32px;
}

/* ---------- Cabecera de sección ---------- */
.cabeza-seccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 36px;
}
.cabeza-seccion .etiqueta { margin-bottom: 18px; }
.oscuro .cabeza-seccion .etiqueta { color: var(--dorado); }
.cabeza-seccion__titulo {
  font-size: clamp(1.35rem, 4.5vw, 2.1rem);
  margin-bottom: 14px;
}
.cabeza-seccion__titulo:focus { outline: none; }
.cabeza-seccion__texto {
  max-width: 32rem;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  text-wrap: pretty;
}
.oscuro .cabeza-seccion__texto { color: rgba(247, 241, 230, .85); }

/* ---------- 5. Productos ---------- */
.productos { padding-block: clamp(80px, 13vw, 140px); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.filtro {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 241, 230, .1);
  color: var(--crema);
  font: 500 .88rem/1 var(--f-texto);
  letter-spacing: .03em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .filtro:hover { background: rgba(247, 241, 230, .18); transform: translateY(-1px); }
}
.filtro[aria-pressed="true"] {
  background: var(--dorado);
  color: var(--verde);
  font-weight: 600;
}

.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 640px)  { .rejilla { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (min-width: 1040px) { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 30px; } }

.tarjeta {
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  background: var(--crema);
  color: var(--verde);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55);
  transition: transform .35s ease, box-shadow .35s ease;
}
.tarjeta[hidden] { display: none; }
@media (hover: hover) {
  .tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .6);
  }
  .tarjeta:hover .tarjeta__foto img { transform: scale(1.045); }
}

/* Foto protagonista */
.tarjeta__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 58%, #fffaf1 0%, var(--crema-2) 78%);
  overflow: hidden;
}
.tarjeta__foto img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8% 10% 4%;
  mix-blend-mode: multiply;   /* el fondo blanco de la foto se funde con el crema */
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Marcador de posición: visible solo si falta la foto (lo activa app.js) */
.tarjeta__sin-foto {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(20, 58, 43, .5);
}
.tarjeta__sin-foto::before {
  content: '';
  position: absolute;
  inset: 14%;
  border: 2px dashed rgba(20, 58, 43, .2);
  border-radius: 20px;
}
.sin-foto img { display: none; }
.sin-foto .tarjeta__sin-foto { display: flex; }

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}
.tarjeta__etiqueta {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(108, 169, 219, .18);   /* detalle celeste */
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tarjeta__nombre {
  font-family: var(--f-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(1.15rem, 3.4vw, 1.3rem);
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tarjeta__nombre .peso { text-transform: none; }   /* "1 kg", no "1 KG" */
.tarjeta__frase {
  color: var(--texto-suave);
  margin-bottom: 18px;
}
.tarjeta__datos {
  margin: 0 0 22px;
  border-top: 1px solid rgba(20, 58, 43, .12);
}
.tarjeta__datos div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 58, 43, .12);
  font-size: .92rem;
}
.tarjeta__datos dt { color: var(--texto-suave); }
.tarjeta__datos dd { margin: 0; font-weight: 600; }

.tarjeta__btn {
  width: 100%;
  margin-top: auto;
  letter-spacing: .05em;
}
.tarjeta__btn.en-consulta {
  --b-fondo: var(--verde);
  --b-fondo-hover: #1b4a37;
  --b-texto: var(--crema);
}

/* ---------- 6. Mi consulta (barra fija) ---------- */
.consulta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--verde-hondo);
  color: var(--crema);
  border-top: 3px solid var(--dorado);
  box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, .45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-reduced-motion: no-preference) {
  .consulta.entra { animation: consulta-entra .45s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes consulta-entra {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.consulta__barra {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 12px;
}
.consulta__ver {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  font: 500 .9rem/1 var(--f-texto);
  cursor: pointer;
}
@media (hover: hover) { .consulta__ver:hover { background: rgba(247, 241, 230, .08); } }
.consulta__contador {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--celeste);
  color: var(--verde-hondo);
  font-weight: 600;
  font-size: .82rem;
}
.consulta__flecha {
  width: 12px;
  height: 8px;
  transition: transform .25s ease;
}
.consulta__ver[aria-expanded="true"] .consulta__flecha { transform: rotate(180deg); }

.consulta__enviar {
  width: 100%;
  text-transform: none;
  letter-spacing: .01em;
  font-size: .92rem;
  padding-inline: 1.1em;
  --sombra-btn: 0 6px 18px -6px rgba(0, 0, 0, .5);
  --sombra-btn-hover: 0 14px 28px -10px rgba(0, 0, 0, .6);
}

@media (min-width: 640px) {
  .consulta__barra {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .consulta__enviar { width: auto; }
}

.consulta__panel {
  max-height: min(50vh, 420px);
  overflow-y: auto;
  padding-block: 18px 6px;
  border-bottom: 1px solid rgba(247, 241, 230, .12);
}
.consulta__titulo {
  margin-bottom: 8px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dorado);
}
.consulta__lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.consulta__lista li + li { border-top: 1px solid rgba(247, 241, 230, .1); }
.consulta__quitar {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid rgba(247, 241, 230, .35);
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  font: 500 .82rem/1 var(--f-texto);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .consulta__quitar:hover { background: rgba(247, 241, 230, .1); border-color: var(--crema); }
}

/* Deja sitio abajo para que la barra no tape el final de la página */
body { padding-bottom: var(--hueco-consulta, 0px); }

/* ---------- 7. Próximamente (más apagado, sin botón) ---------- */
.proximamente { padding-block: clamp(80px, 13vw, 140px); }

.prox {
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(20, 58, 43, .14);
  border-radius: 26px;
  overflow: hidden;
}

.prox__fotos {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6%;
  aspect-ratio: 4 / 3;
  overflow: hidden;          /* hace que la proporción sea estricta aunque la foto sea alta */
  padding: 9% 10% 7%;
  background: var(--crema-2);
}
/* multiply: el fondo blanco de las fotos se funde con el crema */
.prox__fotos img {
  height: 100%;
  width: auto;
  max-width: 47%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(.5);
  opacity: .9;
  transition: filter .5s ease, opacity .5s ease;
}
.prox__fotos:not(.prox__fotos--gin) > img:nth-child(2) { height: 82%; }   /* el formato pequeño, más bajo */

/* Gin: tres botellas recortadas una junto a otra */
.prox__fotos--gin { padding: 0; gap: 0; }
.prox__fotos--gin img {
  width: calc(100% / 3);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Foto de ambiente (con fondo propio): ocupa todo el recuadro */
.prox__fotos--ambiente { padding: 0; }
.prox__fotos--ambiente img {
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 60%;
  mix-blend-mode: normal;
}

/* Recuadro tipográfico (temporal, mientras no haya foto real) */
.prox__fotos--texto {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(227, 163, 40, .16) 0 36%, transparent 36.5%),
    var(--crema-2);
  color: var(--texto-suave);
  text-align: center;
}
.prox__marca {
  font-family: var(--f-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(2.2rem, 9vw, 2.8rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.prox__marca-sub {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .prox:hover .prox__fotos img { filter: saturate(.85); opacity: 1; }
}

/* Fotos que aún no existen */
.prox__foto {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 1 47%;
  height: 100%;
}
.prox__foto img { width: 100%; max-width: none; }
.prox__sin-foto {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(20, 58, 43, .2);
  border-radius: 16px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(20, 58, 43, .55);
}
.prox__foto.sin-foto img { display: none; }
.prox__foto.sin-foto .prox__sin-foto { display: flex; }

.prox__cuerpo { padding: 20px 22px 24px; color: var(--texto-suave); }
.prox__etiqueta {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border: 1.5px solid rgba(20, 58, 43, .3);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prox__nombre {
  font-family: var(--f-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(1.1rem, 3.2vw, 1.22rem);
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.prox__lista { margin-bottom: 6px; }
.prox__lista li { padding: 3px 0; }
.prox__lista li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--celeste);
  vertical-align: middle;
}
.prox__detalle { font-size: .95rem; }

/* ---------- 8. Contacto ---------- */
.contacto { padding-block: clamp(80px, 13vw, 140px); }

.contacto__bloque {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid rgba(247, 241, 230, .12);
  border-radius: 28px;
  background: rgba(247, 241, 230, .05);
}

.contacto__datos {
  display: grid;
  gap: 28px;
  margin: 0 0 38px;
}
@media (min-width: 700px) {
  .contacto__datos { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
}

.contacto__dato { position: relative; padding-left: 58px; min-height: 42px; }
.contacto__icono {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(227, 163, 40, .16);
  color: var(--dorado);
}
.contacto__dato dt {
  margin-bottom: 4px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado);
}
.contacto__dato dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}
.contacto__dato a {
  text-decoration: underline;
  text-decoration-color: rgba(227, 163, 40, .6);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
.contacto__dato a:hover { text-decoration-color: var(--dorado); }

.contacto__botones {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 560px) {
  .contacto__botones { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--hueco-consulta, 0px));
  z-index: 65;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--dorado);
  color: var(--verde);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5);
  transition: bottom .35s cubic-bezier(.2, .7, .2, 1), transform .25s ease, box-shadow .25s ease;
}
.wa-flotante svg { width: 28px; height: 28px; }
.wa-flotante.oculto {
  opacity: 0;
  visibility: hidden;          /* también fuera del orden de tabulación */
  transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s, bottom .35s ease;
}
.wa-flotante:not(.oculto) { transition-property: bottom, transform, box-shadow, opacity; }
@media (hover: hover) {
  .wa-flotante:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .55); }
}
.wa-flotante:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--crema);
}
@media (min-width: 900px) {
  .wa-flotante { right: 24px; bottom: calc(24px + var(--hueco-consulta, 0px)); }
}

/* ---------- Pie ---------- */
.pie {
  padding-block: 52px;
  background: var(--verde-hondo);
  color: var(--crema);
}
.pie__fila {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.pie__logo { width: 170px; }
.pie__legal {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(247, 241, 230, .75);
}
@media (min-width: 700px) {
  .pie__fila { flex-direction: row; justify-content: space-between; }
}

/* ---------- Aparición suave al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Con animación (no transición) para no interferir con los efectos al pasar el ratón */
  .js .revelar { opacity: 0; }
  .js .revelar.visible {
    opacity: 1;
    animation: aparecer .75s cubic-bezier(.2, .7, .2, 1) var(--retraso, 0s) backwards;
  }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Tarjetas de producto: entran en cascada (el retraso de cada una lo pone app.js)
   y la foto se asoma un instante después */
@media (prefers-reduced-motion: no-preference) {
  .js .rejilla > .revelar.visible {
    animation: aparecer-tarjeta .9s cubic-bezier(.2, .8, .2, 1) var(--retraso, 0s) backwards;
  }
  .js .rejilla > .visible .tarjeta__foto img,
  .js .rejilla > .visible .prox__fotos img {
    animation: foto-asoma 1s cubic-bezier(.2, .8, .2, 1) calc(var(--retraso, 0s) + .18s) backwards;
  }
}
@keyframes aparecer-tarjeta {
  from { opacity: 0; transform: translateY(56px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes foto-asoma {
  from { opacity: 0; transform: translateY(28px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* Movimiento reducido: sin desplazamientos ni zoom, solo cambios de color */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .filtro:hover, .tarjeta:hover, .wa-flotante:hover,
  .tarjeta:hover .tarjeta__foto img { transform: none !important; }
}

main:focus { outline: none; }