/* DEMO Paseo Bonito · build-v8 (BUILD_CHANGE sobre build-v7: condiciones de publicación DEMO) · capa de composición (dirección explore-01 aprobada por Ricardo, 22 sep 2026)
   Extiende a todo el sitio: bandas a sangre, ritmo por color y movimiento sutil. Paleta y tipografías de CD-001/002/002a sin cambios. */

:root {
  --x-edge: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  --x-ease: cubic-bezier(.2, .7, .2, 1);
  --x-shadow: 0 18px 40px -22px rgba(37, 42, 37, .35);
}

/* ---------- Revelado al hacer scroll (explore.js) ---------- */
.rv { transition: opacity .7s ease, transform .7s var(--x-ease); }
.js-rv .rv:not(.in) { opacity: 0; transform: translateY(18px); animation: x-rv-safety 0s 3.5s forwards; }
@keyframes x-rv-safety { to { opacity: 1; transform: none; } }

/* ---------- HERO ---------- */
.x-hero { padding: 0; background: var(--cream); overflow: hidden; }
.x-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: stretch; min-height: 600px;
}
.x-hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px 56px 88px var(--x-edge);
}
.x-hero h1 {
  font-size: clamp(54px, 5.3vw, 78px); line-height: 1; letter-spacing: -0.03em;
  margin: 14px 0 22px; max-width: 9.5em; text-wrap: balance;
}
.x-hero .hero-desc { font-size: 19px; line-height: 1.55; max-width: 36ch; margin-bottom: 32px; }
.x-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.x-btn { min-height: 54px; padding: 0 30px; font-size: 17px; }
.x-btn .icon, .x-link::after { transition: transform .25s var(--x-ease); }
.x-btn:hover .icon { transform: translateX(4px); }
.x-link {
  color: var(--ink); font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1.5px no-repeat;
  transition: background-size .3s var(--x-ease);
}
.x-link:hover { background-size: 40% 1.5px; }

.x-hero-media { position: relative; display: flex; align-items: center; padding: 72px var(--x-edge) 96px 0; }
.x-hero-bg {
  position: absolute; top: 0; bottom: 0; left: 72px; right: 0;
  background: var(--sand); border-radius: 0 0 0 220px;
}
/* build-v6 · escenario de la foto: las notas se anclan a la foto, no a la columna (V5-F01) */
.x-hero-stage { position: relative; width: min(640px, 100%); }
/* build-v6 · V5-F02 (RICARDO_DECISION-iter6): se ratifica cover, con tope de ampliación 1.0×.
   PB01 mide 753×332: el marco nunca supera 332 px de alto ni 753 de ancho, así la foto no se amplía. */
.x-hero-figure {
  position: relative; width: 100%; aspect-ratio: 1.48; max-height: 332px; border-radius: 28px; overflow: hidden;
  box-shadow: var(--x-shadow);
}
.x-hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 42%; }

.x-hero .note { max-width: none; }
/* build-v6 · V5-F01: la nota 1 cuelga bajo el borde inferior de la foto (no pisa el pelaje de MAX) */
.x-note-1 {
  position: absolute; left: -32px; top: calc(100% + 14px); z-index: 2;
  background: var(--cream); padding: 12px 22px 14px; border-radius: 999px; box-shadow: var(--x-shadow);
  font-size: 26px; white-space: nowrap; rotate: -2deg;
}
/* build-v6 · V5-F01: la nota 2 pasa a la esquina superior izquierda, sobre la pared del fondo (x < 45 % de PB01), lejos de la cabeza de MAX */
.x-hero .x-note-2 {
  position: absolute; left: -56px; top: -58px; z-index: 2;
  width: max-content; max-width: 250px; text-align: center;
  background: var(--cream); padding: 22px 34px; font-size: 25px; line-height: 1.12;
  border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; box-shadow: var(--x-shadow);
  animation: x-float 6s ease-in-out infinite;
}
@keyframes x-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* franja de beneficios a sangre */
.x-benefits { background: var(--olive); color: var(--cream); }
.x-benefits-list {
  max-width: 1280px; margin: 0 auto; padding: 22px var(--gutter);
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px 32px;
}
.x-benefits-list li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; }
.x-benefits-list .icon-lg { color: var(--sand); }

/* ---------- PRODUCTOS ---------- */
.x-products { background: var(--sage); padding: 96px 0 104px; }
.x-wrap { max-width: calc(1040px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.x-products-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end;
  margin-bottom: 48px;
}
.x-kicker {
  font-size: 15px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta-action);
  margin-bottom: 12px;
}
.x-h2 { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.x-products-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 6px; }
.x-products-lead p:first-child { font-size: 19px; line-height: 1.5; max-width: 38ch; }
.x-products .chip { background: var(--cream); font-size: 15px; }

.x-products .product-block { max-width: none; margin: 0; }
.x-products .cat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 248px)); justify-content: center; gap: 16px; align-items: stretch;
  padding-bottom: 48px; /* reserva el escalonado */
}
.x-products .cat-grid > li:nth-child(even) { margin-top: 48px; margin-bottom: -48px; }
.x-products .cat-card {
  display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left;
  background: var(--cream); border: 0; border-radius: 22px; overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 0 rgba(37, 42, 37, .06);
  transition: transform .35s var(--x-ease), box-shadow .35s var(--x-ease);
}
.x-products .cat-card:hover { background: var(--cream); transform: translateY(-6px); box-shadow: var(--x-shadow); }
.x-products .cat-card[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ink), var(--x-shadow); }
.x-products .cat-frame { aspect-ratio: 1 / 1; display: block; background: var(--sand); overflow: hidden; }
.x-products .cat-frame img {
  width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;
  transition: transform .8s var(--x-ease);
}
.x-products .cat-card:hover .cat-frame img { transform: scale(1.06); }
/* build-v7 · RICARDO_DECISION-build-v6-revision §2: 'Kits de paseo' vuelve al encuadre de build-v5
   (recorte 1:1 con cover y object-position 4% 50%, sin franjas lino). Ricardo acepta que el portabolsas quede fuera. */
.cat-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.x-products .cat-title { font-family: var(--f-serif); font-size: 25px; line-height: 1.1; font-weight: 400; }
.cat-line { font-size: 16px; line-height: 1.4; color: #4a4f48; }
.cat-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px;
  font-size: 15px; font-weight: 600; color: var(--terracotta-action);
}
.cat-more .icon { transition: transform .25s var(--x-ease); }
.cat-card:hover .cat-more .icon { transform: translateX(5px); }
.x-swipe { display: none; }

.x-products .cat-panel { margin-top: 32px; max-width: none; border: 0; border-radius: 22px; box-shadow: var(--x-shadow); padding: 28px; }

.x-products .x-story {
  margin-top: 32px; padding: 0; border-radius: 28px; overflow: hidden; background: var(--rose);
  display: grid; grid-template-columns: minmax(0, 276px) minmax(0, 1fr); column-gap: 0; align-items: center;
  max-width: none;
}
/* build-v5: PB06 completo, proporción natural y tope de 248 px (CD-002a); marco con aire en lugar de recorte */
.x-story .story-figure { display: flex; align-items: center; justify-content: center; padding: 28px 0 28px 28px; min-height: 0; }
.x-story .story-figure img { width: 100%; max-width: 248px; height: auto; border-radius: 18px; object-fit: contain; }
.x-story .story-text { padding: 48px 56px; justify-content: center; gap: 14px; }
.x-story .story-title { font-size: 34px; line-height: 1.1; max-width: 16em; } /* CD-002a: 34/1.1 escritorio y tableta, 30/1.1 móvil */
.x-story .story-text p { font-size: 18px; max-width: 52ch; }

/* ---------- Tableta ---------- */
@media (max-width: 1099px) {
  .x-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .x-hero-copy { padding: 56px var(--gutter) 48px; align-items: center; text-align: center; }
  .x-hero-actions { justify-content: center; }
  .x-hero h1 { font-size: clamp(46px, 7vw, 64px); }
  .x-hero-media { padding: 76px var(--gutter) 112px; justify-content: center; } /* build-v6: aire para las notas ancladas arriba y abajo de la foto */
  .x-hero-bg { left: 0; border-radius: 120px 0 0 0; }
  .x-note-1 { left: -12px; top: calc(100% + 14px); }
  .x-hero .x-note-2 { left: -24px; top: -52px; }

  .x-benefits-list { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .x-benefits-list li { font-size: 16px; }

  .x-products { padding: 72px 0 80px; }
  .x-products-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
  .x-products .cat-grid { grid-template-columns: repeat(2, minmax(0, 248px)); gap: 16px; max-width: 512px; margin: 0 auto; padding-bottom: 36px; }
  .x-products .cat-grid > li:nth-child(even) { margin-top: 36px; margin-bottom: -36px; }
  .x-products .cat-panel, .x-products .x-story { max-width: 720px; margin-left: auto; margin-right: auto; }
  .x-products .x-story { grid-template-columns: minmax(0, 276px) minmax(0, 1fr); }
  .x-story .story-text { padding: 36px 40px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  .x-hero-copy { padding: 32px var(--gutter) 32px; align-items: flex-start; text-align: left; }
  .x-hero-actions { justify-content: flex-start; }
  .x-hero h1 { font-size: 44px; margin: 10px 0 18px; }
  .x-hero .hero-desc { font-size: 17px; margin-bottom: 24px; }
  .x-hero-actions { gap: 8px 22px; }
  .x-btn { width: 100%; }
  .x-hero-media { flex-direction: column; align-items: center; gap: 14px; padding: 28px var(--gutter) 36px; }
  .x-hero-bg { border-radius: 72px 0 0 0; }
  .x-hero-stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .x-hero-figure { width: 100%; aspect-ratio: 1.2; border-radius: 22px; }
  .x-hero-figure img { object-position: 74% 40%; }
  /* notas en flujo, sin superponerse (CD-002a §4: en móvil las notas en DM Sans) */
  .x-hero .x-note-1, .x-hero .x-note-2 { position: relative; left: auto; right: auto; top: auto; bottom: auto; rotate: none; }
  .x-note-1 {
    margin-top: 0; font-family: var(--f-sans); /* build-v6: sin solaparse con la foto (antes -34 px sobre el pecho de MAX) */ font-size: 16px; white-space: normal; text-align: center;
    padding: 10px 18px; max-width: calc(100% - 24px);
  }
  .x-hero .x-note-2 {
    font-family: var(--f-sans); font-size: 16px; line-height: 1.4; max-width: min(calc(15em + 52px), 100%);
    padding: 14px 26px; text-wrap: balance; box-shadow: none; animation: none;
  }

  .x-benefits-list { grid-template-columns: minmax(0, 1fr); padding: 20px var(--gutter); gap: 12px; }

  .x-products { padding: 56px 0 64px; }
  .x-products-head { margin-bottom: 28px; gap: 16px; }
  .x-h2 { font-size: 38px; }
  .x-products-lead p:first-child { font-size: 17px; }
  /* carrusel horizontal con snap */
  .x-products .cat-grid {
    display: flex; justify-content: flex-start; gap: 14px; max-width: none; padding: 4px var(--gutter) 12px;
    margin: 0 calc(-1 * var(--gutter)); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .x-products .cat-grid::-webkit-scrollbar { display: none; }
  .x-products .cat-grid > li { flex: 0 0 min(76%, 248px); scroll-snap-align: start; }
  .x-products .cat-grid > li:nth-child(even) { margin: 0; }
  .x-products .cat-card:hover { transform: none; }
  .x-swipe { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: #4a4f48; margin-top: 4px; }
  .x-products .cat-panel { padding: 20px; }
  .x-products .x-story { margin-top: 40px; grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .x-story .story-figure { padding: 22px 22px 0; }
  .x-story .story-text { padding: 24px 22px 28px; }
  .x-story .story-title { font-size: 30px; }
  .x-story .story-text p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-rv .rv:not(.in) { opacity: 1; transform: none; }
  .x-note-2 { animation: none; }
}


/* ================= build-v5 · extensión al resto del sitio ================= */

/* ---------- Utilidades: banda arena a sangre, paneles como tarjetas ---------- */
.utilities { background: var(--sand); padding: 88px 0 96px; }
.utilities-grid { gap: 16px; }
.utilities .panel {
  border: 0; border-radius: 22px; padding: 32px 30px 34px; gap: 14px;
  box-shadow: 0 1px 0 rgba(37, 42, 37, .06);
}
.utilities .panel h2 { font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; }
.utilities .sizes { background: var(--cream); }
.utilities .personalize { background: var(--rose); align-self: stretch; }
.utilities .consult { background: var(--sage); }
.utilities .sizes-row { margin: 14px 0 6px; }
.utilities .plate-figure img { border-radius: 14px; }
.utilities .btn-secondary { min-height: 48px; }

/* ---------- Cierre: banda crema con firma ---------- */
.reassurance { background: var(--cream); padding: 64px 0; }
.reassurance-grid { border-top: 0; padding-top: 0; gap: 32px 48px; }
.reassurance-list { gap: 32px; }
.reassurance-list li { font-size: 17px; }
.reassurance-list .icon-lg { color: var(--terracotta); flex: none; }
.signoff { font-size: 27px; }


@media (max-width: 1099px) {
  .utilities { padding: 72px 0 80px; }
  .utilities .personalize { align-self: start; }
  .reassurance-grid { justify-items: center; }
  .reassurance-list li { flex-direction: column; text-align: center; gap: 10px; }
}
@media (max-width: 767px) {
  .utilities { padding: 48px 0 56px; }
  .utilities .panel { padding: 26px 22px 28px; }
  .utilities .panel h2 { font-size: 30px; }
  .reassurance { padding: 44px 0 40px; }
  .reassurance-list { gap: 18px; }
  .reassurance-list li { font-size: 16px; flex-direction: row; text-align: left; gap: 14px; }
  .reassurance-grid { justify-items: stretch; }
  .x-story .story-text { padding-top: 18px; }
  .signoff { font-size: 24px; justify-self: center; }
}

/* build-v6 · V5-F05 (RICARDO_DECISION-iter6): '320 px útiles' = contenido. Por debajo de ~800 px (840)
   personalización y consulta se apilan en una columna. Dos columnas sólo cuando cada tarjeta conserva ≥ 320 px
   de contenido (desde 840 px; a 800 serían 308 px y a 768, 292 px). */
@media (max-width: 839px) {
  .utilities-grid { grid-template-columns: minmax(0, 1fr); }
  .utilities .sizes { grid-column: auto; }
}

/* build-v6 · C.9 (revisión visual global): entre 1100 y 1279 px la navegación se partía en 2–3 líneas
   ('Guía de tallas', 'Sobre Paseo Bonito'), heredado de build-v4/v5. Mismos textos, orden y CTA; sólo espaciado. */
.site-nav a, .btn-header span { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .header-inner { column-gap: 14px; }
  .site-nav ul { gap: 0; }
  .site-nav a { padding: 0 7px; font-size: 15px; }
  .site-nav a[aria-current="true"]::after { left: 8px; right: 8px; }
  .btn-header { min-width: 0; padding-left: 18px; padding-right: 18px; gap: 8px; }
  .header-actions { gap: 12px; }
}

/* build-v8 · DECISION-publicacion-demo-build-v8 §1: rótulo superior, visible en todas las anchuras, arriba del encabezado.
   Texto LOCKED. Sin efecto sobre el resto del layout (es un bloque más en el flujo). */
.demo-banner {
  background: var(--olive); color: var(--cream);
  font-family: var(--f-sans); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0.08em;
  text-align: center; padding: 10px var(--gutter);
}
@media (max-width: 359px) { .demo-banner { letter-spacing: 0.04em; } }