/* ==========================================================================
   Zarevo — Capa de diseño propia (carga última, gana por orden).
   Identidad: stage oscuro + tipografía display grande (Bricolage) + acento rojo
   puntual + producto protagonista. Sin eyebrows. Motion orquestado.
   ========================================================================== */

:root {
  --zv-stage: #1a1714;     /* near-black cálido (pocos bloques oscuros) */
  --zv-acc: #9c2a20;       /* rojo profundo sobre claro */
  --zv-acc-soft: #c0493b;  /* brick algo más claro para sobre oscuro */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Tipografía display más confiada en todo el sitio --- */
.display,
h1, h2, h3,
.rn-hero__content h1,
.rn-section h2,
.rn-story h2 {
  letter-spacing: -0.025em;
}

/* Matar el eyebrow/kicker (scaffolding genérico) en toda la home */
.rn-kicker { display: none !important; }

/* ============================ HERO ====================================== */
.zv-hero {
  position: relative;
  background: var(--c-crema);
  color: var(--c-tinta);
  overflow: hidden;
}
.zv-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.75rem, 5vw, 5.5rem) var(--gutter) clamp(2.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-height: min(78vh, 720px);
}

.zv-hero__tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.82rem; font-weight: 500;
  color: var(--c-tinta-3);
  letter-spacing: 0.01em;
}
.zv-hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-acento);
}
.zv-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
  color: var(--c-verde-900);
}
.zv-hero__lead {
  margin: 1.5rem 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.05rem + 0.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--c-tinta-2);
}
.zv-hero__actions {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.zv-hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin: 2.4rem 0 0; padding: 1.4rem 0 0;
  list-style: none;
  border-top: 1px solid var(--c-linea);
}
.zv-hero__meta li {
  position: relative;
  font-family: var(--font-sans);
  font-size: 0.86rem; font-weight: 500;
  color: var(--c-tinta-2);
  padding-left: 1.05rem;
}
.zv-hero__meta li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-acento);
}

/* Media: producto protagonista sobre glow de acento */
.zv-hero__media {
  position: relative;
  display: grid; place-items: center;
  margin: 0;
  min-height: 320px;
}
.zv-hero__glow, .zv-hero__ring { display: none; } /* fuera el glow/anillo (tell de IA) */
.zv-hero__img {
  position: relative; z-index: 1;
  width: min(100%, 560px); height: auto;
  border-radius: 14px;
  object-fit: cover; aspect-ratio: 5 / 4;
  background: var(--c-crema-2);
  box-shadow: 0 1px 2px rgba(26,23,20,0.05), 0 30px 64px -34px rgba(26,23,20,0.3);
}
.zv-hero__marquee { display: none; } /* fuera el marquee (tell de agencia) */

/* Botones del hero */
.zv-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.98rem; font-weight: 600;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.4s var(--ease-out-quint), background-color 0.25s ease, box-shadow 0.3s ease;
}
.zv-btn--accent {
  background: var(--c-acento-600); color: #fff;
}
.zv-btn--accent:hover { transform: translateY(-2px); background: var(--c-acento-700); }
.zv-btn__ico { display: inline-flex; transition: transform 0.4s var(--ease-out-quint); }
.zv-btn__ico svg { width: 1.05em; height: 1.05em; }
.zv-btn--accent:hover .zv-btn__ico { transform: translate(2px, -2px); }
.zv-link {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem;
  color: var(--c-verde-900); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid var(--c-verde-300);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.zv-link:hover { border-color: var(--c-acento); }

/* Entrada orquestada (solo si el usuario acepta motion) */
@media (prefers-reduced-motion: no-preference) {
  .zv-hero__tag, .zv-hero__title, .zv-hero__lead, .zv-hero__actions, .zv-hero__meta {
    animation: zv-rise 0.9s var(--ease-out-quint) both;
  }
  .zv-hero__title { animation-delay: 0.06s; }
  .zv-hero__lead { animation-delay: 0.14s; }
  .zv-hero__actions { animation-delay: 0.22s; }
  .zv-hero__meta { animation-delay: 0.3s; }
  .zv-hero__media { animation: zv-pop 1.1s var(--ease-out-quint) both; animation-delay: 0.15s; }
}
@keyframes zv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes zv-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .zv-hero__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 2.25rem; }
  .zv-hero__media { order: -1; min-height: 0; }
  .zv-hero__img { width: min(78%, 360px); }
  .zv-hero__glow { width: min(72%, 320px); }
  .zv-hero__ring { display: none; }
}

/* ===================== ENCABEZADOS DE SECCIÓN ========================== */
/* Reemplaza el ritmo "eyebrow + título" por título grande + acción */
.rn-home .rn-section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.rn-home .rn-section h2,
.rn-home .rn-section__title,
.rn-home .rn-story h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* ===================== TARJETAS DE PRODUCTO ============================ */
.rn-product {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: transform 0.45s var(--ease-out-quint);
}
.rn-product:hover { transform: translateY(-4px); }
.rn-product__media,
.rn-product .rn-product__thumb,
.rn-product a > img:first-child {
  border-radius: 16px;
  overflow: hidden;
  background: #f1f5f9;
}
.rn-product img {
  transition: transform 0.6s var(--ease-out-quint);
}
.rn-product:hover img { transform: scale(1.045); }
.rn-product__title { font-weight: 600; letter-spacing: -0.01em; }
.rn-product__title a { color: var(--c-verde-900); }
.rn-product .price, .rn-product ins, .rn-product .amount {
  font-family: var(--font-display);
  font-weight: 700;
}

/* ===================== CATEGORÍAS (bloques editoriales) ================= */
.rn-cat, .rn-cats__item {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.rn-cat img, .rn-cats__item img {
  transition: transform 0.7s var(--ease-out-quint);
}
.rn-cat:hover img, .rn-cats__item:hover img { transform: scale(1.06); }

/* ===================== HISTORIA / MARCA ================================= */
.rn-story { background: var(--zv-stage); color: #fff; }
.rn-story h2 { color: #fff; }
.rn-story p, .rn-story .text-muted { color: rgba(255,255,255,0.74) !important; }
.rn-story .rn-kicker { display: inline-block !important; color: var(--zv-acc) !important; }

/* ===================== FICHA DE PRODUCTO =============================== */
.product_title.entry-title,
.rn-single__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.summary .price,
.rn-single .price { font-family: var(--font-display); }
.summary .price ins .amount,
.summary .price > .amount { font-weight: 800; color: var(--c-verde-900); }
.summary .price del,
.summary .price del .amount { color: var(--c-tinta-3); font-weight: 500; }

/* Galería sobre superficie suave, sin caja dura */
.rn-single__gallery,
.woocommerce-product-gallery {
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-crema-2);
}

/* CTA principal de compra en ACENTO (jerarquía: rojo = la acción) */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce a.checkout-button.button,
.wc-proceed-to-checkout a.button {
  background: var(--c-acento) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 14px 32px -16px rgba(200, 30, 30, 0.75) !important;
  transition: transform 0.4s var(--ease-out-quint), background-color 0.25s ease !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce a.checkout-button.button:hover,
.wc-proceed-to-checkout a.button:hover {
  background: #b91c1c !important;
  transform: translateY(-2px);
}

/* ===================== CARRITO Y CHECKOUT ============================== */
/* Nombres de producto en tinta (no rojo) */
.woocommerce-cart-form .product-name a,
.cart_item .product-name a {
  color: var(--c-verde-900) !important;
  font-weight: 600;
}
.woocommerce-cart-form .product-name a:hover { color: var(--c-acento) !important; }

/* Foco de campos en acento */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout select:focus {
  border-color: var(--c-acento) !important;
  box-shadow: 0 0 0 3px rgba(200, 30, 30, 0.12) !important;
  outline: none !important;
}

/* Total del pedido en display */
.cart_totals .order-total .amount,
.woocommerce-checkout-review-order .order-total .amount,
.rn-order-total .amount { font-family: var(--font-display); font-weight: 800; }

/* Encabezados de carrito/checkout en display */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.rn-cart__title,
.rn-checkout__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }

/* ======================================================================
   SECCIONES NUEVAS DEL REDISEÑO DE HOME (feature / social / why)
   ====================================================================== */

/* ---- Feature: producto destacado editorial ---- */
.zv-feature-section {
  padding: clamp(4rem, 8vw, 7.5rem) 0;
  background: var(--c-crema-2);
  border-top: 1px solid var(--c-linea);
  border-bottom: 1px solid var(--c-linea);
}
.zv-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.zv-feature__media { position: relative; }
.zv-feature__media-link {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-crema);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04), 0 24px 60px -28px rgba(2, 6, 23, 0.28);
}
.zv-feature__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 4; object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zv-feature__media-link:hover .zv-feature__img { transform: scale(1.035); }
.zv-feature__panel { max-width: 30rem; }
.zv-feature__tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: 999px;
  background: var(--c-acento-50, #fbeaec);
  color: var(--c-acento, #c81e1e);
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; line-height: 1;
}
.zv-feature__tag svg { width: 14px; height: 14px; color: var(--c-acento, #c81e1e); }
.zv-feature__title {
  margin: 1.1rem 0 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--c-verde-900, #020617); text-wrap: balance;
}
.zv-feature__title a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--c-acento, #c81e1e), var(--c-acento, #c81e1e));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zv-feature__title a:hover { background-size: 100% 2px; }
.zv-feature__desc {
  margin: 1rem 0 0; font-family: var(--font-sans);
  font-size: 1.0625rem; line-height: 1.6; color: var(--c-tinta-3, #64748b); max-width: 34ch;
}
.zv-feature__price {
  margin-top: 1.5rem; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.1rem); line-height: 1; color: var(--c-tinta, #1e293b);
}
.zv-feature__price .amount, .zv-feature__price ins { text-decoration: none; color: var(--c-verde-900, #020617); }
.zv-feature__price del { margin-left: 0.55rem; font-size: 0.55em; font-weight: 600; color: var(--c-tinta-3, #64748b); opacity: 0.85; }
.zv-feature__cta { margin-top: 1.75rem; }
.zv-feature__trust { margin: 1.15rem 0 0; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.4; color: var(--c-tinta-3, #64748b); }
@media (max-width: 860px) {
  .zv-feature { grid-template-columns: 1fr; gap: 2rem; }
  .zv-feature__panel { max-width: none; }
  .zv-feature__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .zv-feature__img, .zv-feature__title a { transition: none; }
  .zv-feature__media-link:hover .zv-feature__img { transform: none; }
}

/* ---- Social proof band ---- */
.zv-social-section { background: var(--c-crema); }
.rn-home .zv-social-section { padding-block: clamp(3.25rem, 5.5vw, 5.5rem); }
.zv-social { display: grid; grid-template-columns: 0.82fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.zv-social__claim { max-width: 30ch; }
.zv-social__stars { display: inline-flex; gap: 0.18rem; color: var(--c-acento); margin-bottom: 1.1rem; }
.zv-social__stars svg { width: 1.35rem; height: 1.35rem; }
.zv-social__stat {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem); line-height: 0.98; letter-spacing: -0.035em;
  color: var(--c-verde-900); margin: 0; text-wrap: balance;
}
.zv-social__pledge { margin: 1.05rem 0 0; max-width: 32ch; font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.55; color: var(--c-tinta-3); }
.zv-social__reviews { display: flex; flex-direction: column; }
.zv-social__review { margin: 0; padding: clamp(1.4rem, 2.4vw, 1.9rem) 0; }
.zv-social__review + .zv-social__review { border-top: 1px solid var(--c-linea); }
.zv-social__review:first-child { max-width: 46ch; }
.zv-social__review:nth-child(2) { max-width: 40ch; margin-left: auto; }
.zv-social__quote {
  position: relative; margin: 0; padding-left: 1.5rem;
  font-family: var(--font-sans); font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--c-tinta);
}
.zv-social__quote::before {
  content: "\201C"; position: absolute; left: -0.05rem; top: -0.15em;
  font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--c-acento);
}
.zv-social__author { display: flex; align-items: baseline; gap: 0.55rem; margin-top: 0.85rem; padding-left: 1.5rem; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; color: var(--c-verde-900); }
.zv-social__city { font-weight: 500; color: var(--c-tinta-3); }
.zv-social__city::before { content: "·"; margin-right: 0.55rem; color: var(--c-linea); }
@media (max-width: 860px) {
  .zv-social { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.5rem); }
  .zv-social__claim { max-width: none; }
  .zv-social__review:first-child, .zv-social__review:nth-child(2) { max-width: none; margin-left: 0; }
  .zv-social__review:first-child { padding-top: 0; }
}

/* ---- Why Zarevo (valor / persuasión) ---- */
.zv-why { background: var(--c-crema); padding: clamp(4.5rem, 9vw, 8rem) 0; border-top: 1px solid var(--c-linea); }
.zv-why__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.zv-why__intro { position: sticky; top: 6rem; }
.zv-why__title { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; font-size: clamp(2.1rem, 4.4vw, 3.5rem); color: var(--c-verde-900); text-wrap: balance; }
.zv-why__lead { margin: 1.5rem 0 0; max-width: 34ch; font-family: var(--font-sans); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.6; color: var(--c-tinta-3); }
.zv-why__list { margin: 0; padding: 0; list-style: none; }
.zv-why__row { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.1rem, 2vw, 1.75rem); align-items: start; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--c-linea); }
.zv-why__row:first-child { padding-top: 0; border-top: 0; }
.zv-why__row:last-child { padding-bottom: 0; }
.zv-why__ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--r-md); background: var(--c-acento-50, #fbeaec); color: var(--c-acento); }
.zv-why__ico svg { width: 1.5rem; height: 1.5rem; }
.zv-why__copy { min-width: 0; padding-top: 0.15rem; }
.zv-why__row-title { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.15; color: var(--c-verde-900); }
.zv-why__row-desc { margin: 0.4rem 0 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--c-tinta-3); }
@media (max-width: 880px) {
  .zv-why__grid { grid-template-columns: 1fr; }
  .zv-why__intro { position: static; top: auto; }
  .zv-why__lead { max-width: 48ch; }
}
@media (max-width: 480px) {
  .zv-why__ico { width: 2.625rem; height: 2.625rem; }
  .zv-why__ico svg { width: 1.35rem; height: 1.35rem; }
}