/* El Parque Macetas — componentes y secciones de la portada */

/* ——— Cabecera ——— */
.sitio-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(247, 245, 240, 0.88);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

.sitio-header.is-scrolled {
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--borde-suave);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--aire);
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-link img {
  height: 40px;
  width: auto;
}

.nav-desktop {
  display: none;
  justify-content: center;
  gap: 0.15rem 1.35rem;
  list-style: none;
  flex-wrap: wrap;
}

.nav-desktop a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tinta);
  padding: 0.35rem 0;
}

.nav-desktop a:hover {
  color: var(--verde-hoja);
}

.header-cta {
  display: none;
}

.header-cta .btn {
  min-height: 42px;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  margin-left: auto;
  color: var(--tinta);
}

.menu-toggle:hover {
  background: rgba(13, 42, 51, 0.06);
}

.menu-toggle-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  border-radius: 1px;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.menu-toggle-icon::before { top: -7px; }
.menu-toggle-icon::after { top: 7px; }

body.menu-abierto .menu-toggle-icon {
  background: transparent;
}

body.menu-abierto .menu-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

body.menu-abierto .menu-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Menú móvil a pantalla completa */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--crema);
  padding: calc(var(--header-h) + 1.5rem) var(--aire) 2rem;
  overflow-y: auto;
}

.menu-movil[hidden] {
  display: none;
}

.menu-movil nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.menu-movil a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--tinta);
}

.menu-movil a:hover {
  color: var(--verde-hoja);
}

.menu-movil .btn {
  margin-top: 1.75rem;
  width: 100%;
}

@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  .header-cta { display: block; }
  .menu-toggle { display: none; }
  .menu-movil { display: none !important; }
}

/* ——— Hero ——— */
.hero {
  background: var(--verde-noche);
  color: var(--hueso);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero-grid {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

.hero h1 {
  color: var(--hueso);
  margin-bottom: 0.75rem;
}

.hero-bajada {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-foto {
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  background: var(--verde-noche-suave);
}

.hero-foto img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 606 / 288;
}

@media (min-width: 800px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }
}

/* ——— Familias ——— */
.familias-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

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

@media (min-width: 960px) {
  .familias-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tarjeta-familia {
  display: flex;
  flex-direction: column;
  background: var(--hueso);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  text-decoration: none;
  color: var(--tinta);
  transition: transform var(--transicion), box-shadow var(--transicion);
  height: 100%;
}

.tarjeta-familia:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(13, 42, 51, 0.14);
  color: var(--tinta);
  text-decoration: none;
}

.tarjeta-familia__foto {
  background: #e8e4db;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

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

.tarjeta-familia__cuerpo {
  padding: 1.15rem 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
}

.tarjeta-familia__cuerpo h3 {
  margin: 0;
  font-size: 1.05rem;
}

.tarjeta-familia__linea {
  font-size: 0.9rem;
  color: var(--tinta-suave);
  flex: 1;
  margin: 0;
}

.tarjeta-familia__precio {
  margin-top: 0.75rem;
  font-size: 1.05rem;
  color: var(--tinta);
}

.tarjeta-familia__precio .precio-nota {
  font-weight: 500;
}

/* ——— Guía de litraje ——— */
.litraje-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

@media (min-width: 900px) {
  .litraje-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.litraje-card {
  background: var(--hueso);
  border-radius: var(--radio);
  padding: 1.4rem 1.25rem 1.5rem;
  border: 1px solid var(--borde-suave);
  height: 100%;
}

.litraje-card__litros {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--verde-hoja);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.litraje-card__uso {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.02em;
}

.litraje-card__para {
  font-size: 0.9rem;
  color: var(--tinta-suave);
  margin: 0;
}

/* ——— Por qué de tela ——— */
.razones-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .razones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.razon {
  background: var(--hueso);
  border-radius: var(--radio);
  padding: 1.4rem 1.35rem;
  border-left: 4px solid var(--verde-hoja);
  box-shadow: var(--sombra);
}

.razon h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}

.razon p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

/* ——— Testimonios ——— */
.testimonios-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .testimonios-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonio {
  background: var(--hueso);
  border-radius: var(--radio);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonio blockquote {
  margin: 0 0 1rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.55;
  flex: 1;
}

.testimonio blockquote::before {
  content: '“';
  color: var(--verde-hoja);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 0;
  margin-right: 0.15rem;
  vertical-align: -0.15em;
}

.testimonio footer {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tinta);
  letter-spacing: -0.01em;
}

/* ——— Franja mayorista ——— */
.mayorista {
  text-align: center;
}

.mayorista h2 {
  margin-bottom: 0.75rem;
}

.mayorista-bajada {
  max-width: 36rem;
  margin: 0 auto 1.5rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
}

.mayorista-lista {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  max-width: 32rem;
  margin: 0 auto 1.75rem;
  text-align: left;
}

.mayorista-lista li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.98rem;
}

.mayorista-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--verde-hoja);
}

/* ——— Pie ——— */
.sitio-footer {
  background: var(--verde-noche);
  color: rgba(255, 255, 255, 0.85);
  padding-block: 3rem 2rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2.5rem;
  }
}

.footer-logo img {
  height: 48px;
  width: auto;
  margin-bottom: 0.85rem;
}

.footer-marca {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 18rem;
}

.footer-col h3 {
  color: var(--hueso);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  font-size: 0.95rem;
}

.footer-col a:hover {
  color: var(--verde-hoja);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.35rem;
  padding-bottom: 4.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* Crédito de quien hizo la web: se lee, pero no compite con la marca. */
.footer-credito {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

.footer-credito:hover,
.footer-credito:focus-visible {
  color: var(--verde-hoja);
  text-decoration-color: currentColor;
}

/* ——— WhatsApp flotante ——— */
.wa-flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.wa-flotante:hover {
  transform: scale(1.06);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.wa-flotante svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Empuje del contenido bajo header sticky no es necesario (sticky no saca flujo) */
main {
  min-height: 50vh;
}

/* ========== SPEC 2: Catálogo y fichas de producto ========== */

/* Nav activo */
.nav-desktop a.is-active {
  color: var(--verde-hoja);
}

/* ——— Catálogo ——— */
.catalogo-page h1 {
  margin-bottom: 0.35em;
}

.filtros-catalogo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.filtro-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--borde-suave);
  background: var(--hueso);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tinta);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

.filtro-pill:hover {
  border-color: var(--verde-hoja);
  color: var(--verde-noche);
}

.filtro-pill.is-active {
  background: var(--verde-noche);
  border-color: var(--verde-noche);
  color: var(--hueso);
}

.catalogo-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

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

/* Se salta el paso de 3 columnas a propósito: son 8 familias, así que 2 y 4
   dan filas llenas (4+4) y 3 dejaba una última fila coja de 2 con un hueco al
   lado. Si algún día hay 9 o 12 familias, vuelve a tener sentido el 3. */
@media (min-width: 1100px) {
  .catalogo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tarjeta-catalogo {
  display: flex;
  flex-direction: column;
  background: var(--hueso);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  text-decoration: none;
  color: var(--tinta);
  transition: transform var(--transicion), box-shadow var(--transicion);
  height: 100%;
}

.tarjeta-catalogo:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(13, 42, 51, 0.14);
  color: var(--tinta);
  text-decoration: none;
}

.tarjeta-catalogo[hidden] {
  display: none;
}

.tarjeta-catalogo__foto {
  background: #e8e4db;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

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

.tarjeta-catalogo__foto--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-noche);
  color: var(--hueso);
  padding: 1.25rem;
  text-align: center;
}

.tarjeta-catalogo__placeholder-nombre {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tarjeta-catalogo__cuerpo {
  padding: 1.15rem 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
}

.tarjeta-catalogo__nombre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.tarjeta-catalogo__linea {
  font-size: 0.9rem;
  color: var(--tinta-suave);
  flex: 1;
  margin: 0;
}

.tarjeta-catalogo__precio {
  margin-top: 0.75rem;
}

.tarjeta-catalogo__precio .precio {
  display: block;
  font-size: 1.1rem;
}

.tarjeta-catalogo__cta {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--verde-hoja);
}

.tarjeta-catalogo:hover .tarjeta-catalogo__cta {
  text-decoration: underline;
}

.catalogo-vacio {
  text-align: center;
  color: var(--tinta-suave);
  padding: 2rem 0;
}

/* ——— Ficha de producto ——— */
.ficha-page {
  padding-block: 1.5rem 3.5rem;
}

.ficha-wrap {
  max-width: var(--max);
}

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
  color: var(--tinta-suave);
  margin-bottom: 1.5rem;
}

.migas a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 500;
}

.migas a:hover {
  color: var(--verde-hoja);
}

.migas__sep {
  opacity: 0.5;
}

.migas [aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
}

/* Aviso decorativas */
.aviso-decorativa {
  background: #fff8e6;
  border: 1px solid #e8d48a;
  border-left: 4px solid #c9a227;
  border-radius: var(--radio);
  padding: 1.15rem 1.25rem 1.25rem;
  margin-bottom: 1.75rem;
}

.aviso-decorativa__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a6d12;
  margin: 0 0 0.4rem;
}

.aviso-decorativa__texto {
  margin: 0;
  font-size: 0.98rem;
  color: var(--tinta);
  line-height: 1.55;
}

.aviso-decorativa__estampas {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(201, 162, 39, 0.35);
}

.aviso-decorativa__estampas-titulo {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 0.45rem;
}

.aviso-decorativa__estampas ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.aviso-decorativa__estampas li {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Grid foto + compra */
.ficha-grid {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 2.75rem;
  align-items: start;
}

@media (min-width: 800px) {
  .ficha-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem;
  }
}

.ficha-foto {
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: #e8e4db;
  box-shadow: var(--sombra);
}

.ficha-foto img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Sin min-height: junto a aspect-ratio obligaba a un ancho mínimo de ~437px
   y desbordaba la pantalla en móvil (visto en la ficha de germinadores). */
.ficha-foto--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background: var(--verde-noche);
  color: var(--hueso);
  padding: 2rem 1.25rem;
  text-align: center;
  aspect-ratio: 4 / 3;
}

.ficha-foto__placeholder-nombre {
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: -0.02em;
}

.ficha-compra h1 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.ficha-intro {
  color: var(--tinta-suave);
  font-size: 0.98rem;
  margin-bottom: 0.75rem;
}

.ficha-colores {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--tinta);
}

/* Selectores pastilla */
.selector-variantes {
  margin-bottom: 1.15rem;
}

.selector-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  margin: 0 0 0.55rem;
}

.pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 3.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--borde-suave);
  background: var(--hueso);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--tinta);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

.pastilla:hover {
  border-color: var(--verde-hoja);
}

.pastilla.is-active {
  background: var(--verde-noche);
  border-color: var(--verde-noche);
  color: var(--hueso);
}

.ficha-precio {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0.25rem;
  color: var(--tinta);
  line-height: 1.15;
}

.ficha-medida {
  font-size: 1rem;
  color: var(--tinta-suave);
  margin: 0 0 0.35rem;
  font-weight: 500;
}

.ficha-medida--suave {
  font-size: 0.9rem;
  font-style: italic;
}

.ficha-mayorista {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.ficha-mayorista a {
  color: var(--tinta-suave);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ficha-mayorista a:hover {
  color: var(--verde-hoja);
}

.btn--bloque {
  width: 100%;
  max-width: 22rem;
}

/* Bloques inferiores de ficha */
.ficha-bloque {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde-suave);
}

.ficha-bloque h2 {
  margin-bottom: 0.75rem;
}

.ficha-bloque__intro {
  color: var(--tinta-suave);
  margin-bottom: 1.15rem;
  max-width: 40rem;
}

.tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radio);
  border: 1px solid var(--borde-suave);
  background: var(--hueso);
}

.tabla-precios {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 280px;
}

.tabla-precios th,
.tabla-precios td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--borde-suave);
}

.tabla-precios th {
  background: rgba(13, 42, 51, 0.04);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

.tabla-precios tbody tr:last-child td {
  border-bottom: none;
}

.tabla-precios tbody tr:hover td {
  background: rgba(122, 193, 66, 0.06);
}

.tabla-precios .col-precio {
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.tabla-precios td sup a {
  color: var(--verde-hoja);
  text-decoration: none;
  font-weight: 700;
}

.tabla-nota {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--tinta-suave);
  max-width: 44rem;
  line-height: 1.5;
}

.tabla-nota sup {
  color: var(--verde-hoja);
  font-weight: 700;
}

.litraje-grid--ficha {
  margin-top: 0.25rem;
}

.lista-cuidados {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  max-width: 44rem;
}

.lista-cuidados li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--tinta);
  font-size: 0.98rem;
  line-height: 1.55;
}

.lista-cuidados li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--verde-hoja);
}

/* ========== SPEC 3: páginas de contenido ========== */

.contenedor--lectura {
  max-width: 760px;
}

.pagina-contenido h1 {
  margin-bottom: 0.35em;
}

.pagina-contenido .h2-seccion {
  margin: 0 0 1.15rem;
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
}

.litraje-grid--guia {
  margin-bottom: 2.75rem;
}

.litraje-card--grande {
  padding: 1.65rem 1.4rem 1.75rem;
}

.litraje-card--grande .litraje-card__litros {
  font-size: clamp(1.55rem, 3vw, 1.95rem);
}

.litraje-card--grande .litraje-card__uso {
  font-size: 1.1rem;
}

.bloque-prosa {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde-suave);
}

.bloque-prosa--solo {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.bloque-prosa h2 {
  margin-bottom: 0.75rem;
}

.bloque-prosa p {
  color: var(--tinta);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 42rem;
}

.bloque-prosa p + p {
  margin-top: 0.85rem;
}

.bloque-prosa__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
}

.bloque-prosa__links .enlace-mas {
  margin-top: 0;
}

.bloque-prosa__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Escalones mayorista */
.escalones-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 0.5rem;
}

@media (min-width: 700px) {
  .escalones-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.escalon {
  background: var(--hueso);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra);
  height: 100%;
}

.escalon__nro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--verde-noche);
  color: var(--hueso);
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
}

.escalon h3 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}

.escalon p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-suave);
  line-height: 1.55;
}

.escalon strong {
  color: var(--tinta);
  font-weight: 700;
}

/* Pasos numerados */
.lista-pasos {
  list-style: none;
  display: grid;
  gap: 1.15rem;
  max-width: 42rem;
  counter-reset: paso;
  margin-bottom: 0.5rem;
}

.lista-pasos li {
  position: relative;
  padding-left: 3rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  counter-increment: paso;
}

.lista-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--verde-hoja);
  color: var(--verde-noche);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botón borde oscuro (404, CTAs secundarios en crema) */
.btn--borde-oscuro {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}

.btn--borde-oscuro:hover {
  background: rgba(13, 42, 51, 0.06);
  color: var(--tinta);
  border-color: var(--verde-noche);
}

/* 404 */
.pagina-404 {
  text-align: left;
}

/* Vamp en catálogo (tarjeta especial, sin vamp.css) */
.catalogo-vamp {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde-suave);
}

.tarjeta-catalogo--vamp {
  max-width: 28rem;
}

.tarjeta-catalogo__foto--vamp {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a0f3d;
  color: #b8f000;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  text-align: center;
}

.tarjeta-catalogo__foto--vamp .tarjeta-catalogo__placeholder-nombre {
  color: #b8f000;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
}

/* --- Marca en cabecera y pie -------------------------------------------
   El logo completo lleva el nombre dibujado dentro y a 40px de alto quedaba
   ilegible. Se usa el isotipo suelto y el nombre en texto, que además escala
   y se lee en cualquier tamaño. */
.logo-link,
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.logo-nombre {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tinta);
}

.footer-logo .logo-nombre {
  color: var(--hueso);
  font-size: 1rem;
}

/* Alto explícito: el isotipo mide 1028px de ancho y sin esto se renderiza a
   tamaño natural y revienta la cabecera en móvil. */
.logo-link img {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.footer-logo img {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

/* --- Producto instalado en viveros de clientes ------------------------- */
.viveros__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .viveros__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.viveros__foto {
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: #e8e4db;
  box-shadow: var(--sombra);
}

.viveros__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

/* El atributo hidden no puede contra un display explícito: sin esto, ocultar
   por JS no surtía efecto en las tarjetas ni en el bloque de Vamp. */
.tarjeta-catalogo[hidden],
.catalogo-vamp[hidden] {
  display: none !important;
}

/* ── Galería de la ficha ────────────────────────────────────────────────
   Foto grande + tira de miniaturas. La grande es la única que pesa: las
   miniaturas rondan los 6 KB y la siguiente foto grande no se descarga
   hasta que se pincha. Pensado para el móvil argentino, no para la fibra. */
.galeria__principal {
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: #e8e4db;
  box-shadow: var(--sombra);
}

/* `contain` y no `cover`, y cuadrado y no 4/3, a propósito: casi todas las
   fotos de producto son verticales, y en un recuadro apaisado con `cover` la
   maceta se quedaba sin base y sin borde de arriba. Aquí lo que importa es ver
   el producto entero, no llenar el rectángulo. El fondo es el mismo del
   recuadro, así que el relleno no se ve. */
.galeria__principal img {
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  background: #e8e4db;
  display: block;
}

.galeria__tira {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* De tablet para arriba la tira se dobla en filas. En el móvil el carrusel
   funciona —es el gesto natural y el recorte del borde ya avisa de que hay
   más—, pero en un ratón no hay gesto ni barra visible: con 36 estampas se
   veían 8 y las otras 28 no existían para quien mira.

   Apaño a propósito, no la solución: lo correcto es sacar los estampados a un
   mostrario propio y dejar aquí las fotos del producto (contraste Claude↔Grok,
   7-ago-2026). Está anotado en AGENTS.md. */
@media (min-width: 768px) {
  .galeria__tira {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.galeria__miniatura {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #e8e4db;
  cursor: pointer;
  transition: border-color var(--transicion);
}

.galeria__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeria__miniatura:hover,
.galeria__miniatura:focus-visible {
  border-color: var(--verde-hoja);
}

.galeria__miniatura[aria-current="true"] {
  border-color: var(--verde-noche);
}

@media (prefers-reduced-motion: reduce) {
  .galeria__miniatura { transition: none; }
}

/* ──────────────────────────────────────────────────────
   BLOG — listado
────────────────────────────────────────────────────── */
.blog-hero {
  background: var(--verde-noche);
  color: var(--hueso);
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/producto/sublimadas-grupo.jpg') center/cover no-repeat;
  opacity: .08;
}

.blog-hero__inner {
  position: relative;
  max-width: 640px;
}

.blog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--verde-hoja);
  margin: 0 0 16px;
}

.blog-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--hueso);
  margin: 0 0 16px;
  line-height: 1.15;
}

.blog-hero p {
  color: rgba(255,255,255,.7);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  padding: 56px 0 72px;
}

/* Card destacada (primera) ocupa 2 columnas en escritorio */
.blog-card {
  background: var(--hueso);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  text-decoration: none;
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(13,42,51,.16);
}

.blog-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--crema);
}

.blog-card__body {
  padding: 24px 26px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--verde-hoja);
  margin: 0 0 10px;
}

.blog-card__titulo {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--verde-noche);
}

.blog-card__bajada {
  font-size: .9rem;
  color: var(--tinta-suave);
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .75rem;
  color: var(--tinta-suave);
}

.blog-card__meta svg {
  flex-shrink: 0;
}

.blog-card--destacada {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .blog-card--destacada {
    grid-column: span 2;
    flex-direction: row;
  }
  .blog-card--destacada .blog-card__img {
    width: 52%;
    min-height: 300px;
    height: auto;
    aspect-ratio: auto;
    flex-shrink: 0;
    align-self: stretch;
    object-fit: cover;
  }
  .blog-card--destacada .blog-card__body {
    padding: 32px 36px;
    justify-content: center;
  }
  .blog-card--destacada .blog-card__titulo {
    font-size: 1.4rem;
  }
}

/* ──────────────────────────────────────────────────────
   BLOG — artículo
────────────────────────────────────────────────────── */

/* Hero con imagen de fondo */
.articulo-hero--imagen {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 0;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}

.articulo-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,42,51,.45) 0%, rgba(13,42,51,.85) 100%);
}

.articulo-hero__inner {
  position: relative;
  padding: 56px 0 48px;
}

.articulo-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .8rem;
  margin: 0 0 20px;
  transition: color var(--transicion);
}

.articulo-hero__back:hover { color: var(--verde-hoja); }

.articulo-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--verde-hoja);
  margin: 0 0 12px;
}

.articulo-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--hueso);
  margin: 0 0 20px;
  line-height: 1.15;
  max-width: 680px;
}

.articulo-hero__meta {
  display: flex;
  gap: 20px;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}

.articulo-hero__meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Cuerpo del artículo */
.articulo-cuerpo {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px var(--aire) 72px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--tinta);
}

.articulo-intro {
  font-size: 1.12rem;
  color: var(--verde-noche);
  font-weight: 500;
  line-height: 1.65;
  margin: 0 0 36px;
  padding-bottom: 36px;
  border-bottom: 2px solid var(--borde-suave);
}

.articulo-cuerpo h2 {
  font-size: 1.25rem;
  color: var(--verde-noche);
  margin: 44px 0 14px;
  line-height: 1.25;
  padding-left: 14px;
  border-left: 3px solid var(--verde-hoja);
}

.articulo-cuerpo p {
  margin: 0 0 20px;
}

.articulo-cuerpo ul {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}

.articulo-cuerpo ul li {
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
}

.articulo-cuerpo ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--verde-hoja);
  font-weight: 700;
}

.articulo-cuerpo a:not(.btn) {
  color: var(--verde-hoja);
  text-underline-offset: 3px;
  font-weight: 500;
}

.articulo-cuerpo a:not(.btn):hover {
  color: var(--verde-hoja-hover);
}

.articulo-cuerpo strong {
  color: var(--verde-noche);
}

/* Diagrama SVG */
.articulo-diagrama {
  margin: 8px 0 36px;
}

.articulo-diagrama svg {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  overflow: visible;
}

.articulo-diagrama figcaption {
  font-size: .8rem;
  color: var(--tinta-suave);
  text-align: center;
  margin-top: 10px;
}

/* Fotos en el artículo */
.articulo-foto {
  margin: 32px 0;
}

.articulo-foto img {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  display: block;
}

.articulo-foto figcaption {
  font-size: .8rem;
  color: var(--tinta-suave);
  margin-top: 8px;
  text-align: center;
}

.articulo-foto--derecha {
  float: right;
  margin: 4px 0 24px 28px;
  max-width: 340px;
}

@media (max-width: 600px) {
  .articulo-foto--derecha {
    float: none;
    max-width: 100%;
    margin: 24px 0;
  }
}

/* Par de fotos */
.articulo-fotos-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}

.articulo-fotos-par figure {
  margin: 0;
}

.articulo-fotos-par img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radio);
  display: block;
}

.articulo-fotos-par figcaption {
  font-size: .78rem;
  color: var(--tinta-suave);
  margin-top: 6px;
  text-align: center;
}

@media (max-width: 500px) {
  .articulo-fotos-par { grid-template-columns: 1fr; }
}

/* Cita destacada */
.articulo-quote {
  background: var(--verde-noche);
  color: var(--verde-hoja);
  border: none;
  border-radius: var(--radio);
  padding: 24px 28px;
  margin: 32px 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
}

.articulo-quote::before {
  content: '"';
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 4rem;
  line-height: 1;
  color: rgba(122,193,66,.2);
  font-family: Georgia, serif;
}

/* Iconos beneficios */
.articulo-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 28px 0;
}

.beneficio {
  background: var(--crema);
  border-radius: var(--radio);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.beneficio__icono {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--verde-noche);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde-hoja);
}

.beneficio div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.beneficio strong {
  font-size: .9rem;
  color: var(--verde-noche);
  font-weight: 700;
}

.beneficio span {
  font-size: .78rem;
  color: var(--tinta-suave);
  line-height: 1.4;
}

/* CTA del artículo */
.articulo-cta {
  background: var(--verde-noche);
  color: var(--hueso);
  border-radius: var(--radio-lg);
  padding: 28px 32px;
  margin: 44px 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.articulo-cta__texto {
  flex: 1;
  min-width: 200px;
}

.articulo-cta__texto p {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--hueso);
}

.articulo-cta__texto span {
  font-size: .85rem;
  color: rgba(255,255,255,.65);
}

.articulo-link-guia {
  font-size: .9rem;
  color: var(--tinta-suave);
  clear: both;
}

/* Breadcrumb / nav inferior */
.articulo-nav {
  border-top: 1px solid var(--borde-suave);
  padding: 28px var(--aire) 28px;
  max-width: 720px;
  margin: 0 auto;
}

.articulo-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--verde-noche);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transicion);
}

.articulo-nav a:hover { color: var(--verde-hoja); }

/* Clearfix para float */
.articulo-cuerpo::after {
  content: '';
  display: table;
  clear: both;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .articulo-hero__back { transition: none; }
}