/* ═══════════════════════════════════════════════════════════════
   CAPAJUASO — Páginas interiores
   La comparten propuesta.html y productos.html.
   Se carga DESPUÉS de styles.css y reutiliza su paleta, su reset,
   el resplandor de fondo, el interruptor de idioma y las redes.
   Todo lo propio de estas páginas lleva el prefijo .pv-
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pv-wrap:   64rem;   /* 1024px — ancho de lectura de esta página */
  --pv-narrow: 46rem;   /*  736px — bloques de texto centrado       */
}

/* La página larga necesita su propio ritmo vertical */
.pv { overflow-x: hidden; }

/* ── Contenedores ──────────────────────────────────────────── */
.pv-wrap {
  width: 100%;
  max-width: var(--pv-wrap);
  margin-inline: auto;
  padding-inline: 1.15rem;
}
.pv-narrow { max-width: var(--pv-narrow); }

.pv-sec { padding-block: 3.25rem; }

/* Bandas oscuras alternas: dan estructura sin cortar el resplandor */
.pv-sec--dark {
  position: relative;
  background: rgba(9, 11, 15, .55);
  border-block: 1px solid var(--stroke);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pv-gold {
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ═══════════════ Barra superior ═══════════════ */
.topbar--nav {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: var(--pv-wrap);
}

.backlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .85rem .42rem .7rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(14, 17, 22, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.backlink svg { width: 1rem; height: 1rem; flex: none; transition: transform .2s ease; }

/* ═══════════════ Portada ═══════════════ */
/* La barra superior flota sobre la imagen: subimos la portada su altura */
.pv-hero { margin-top: -4.2rem; }

.pv-hero__media {
  position: relative;
  width: 100%;                /* fija el ancho: sin esto min-height + aspect-ratio
                                 estiran la caja y desbordan en pantallas estrechas */
  aspect-ratio: 1568 / 400;   /* proporción real de la portada */
  min-height: 11rem;          /* en móvil recorta al centro en lugar de adelgazar */
  max-height: 22rem;
}
.pv-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Velo: funde la foto con el fondo y garantiza contraste del texto */
.pv-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,17,22,.62) 0%, rgba(14,17,22,.28) 38%, rgba(14,17,22,.92) 88%, var(--bg) 100%),
    linear-gradient(90deg, rgba(14,17,22,.5), transparent 45%, rgba(14,17,22,.5));
}

.pv-hero__body {
  position: relative;
  width: 100%;
  max-width: var(--pv-wrap);
  margin-inline: auto;
  padding: 1.5rem 1.15rem 0;
  text-align: center;
}

.pv-hero__eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-2);
}

.pv-hero__name {
  margin-top: .5rem;
  font-family: Sora, Inter, system-ui, sans-serif;
  font-size: clamp(1.75rem, 6.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.pv-hero__taglines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .35rem .6rem;
  max-width: 44rem;
  margin: .8rem auto 0;
  font-size: .86rem;
  color: var(--muted);
  text-wrap: pretty;
}
.pv-hero__taglines b { color: var(--text); font-weight: 600; letter-spacing: .02em; }
.pv-sep { color: var(--amber); opacity: .7; }

/* ═══════════════ Filosofía ═══════════════ */
.pv-philo {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

.pv-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pv-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--stroke), transparent);
}
.pv-label--center { justify-content: center; margin-bottom: 1.4rem; }
.pv-label--center::after { display: none; }

.pv-quote {
  margin-top: 1rem;
  font-family: Sora, Inter, system-ui, sans-serif;
  font-size: clamp(1.4rem, 4.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.pv-quote-sub {
  margin-top: .75rem;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* Tarjeta de perfil + contacto */
.pv-cardme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1.2rem;
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.pv-cardme__photo {
  width: 9rem;
  height: 9rem;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--amber), var(--amber-2), #6E7C90, var(--amber));
  box-shadow: 0 10px 34px -14px rgba(240,135,31,.85);
}
.pv-cardme__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  border: 3px solid var(--bg);
  background: var(--bg-2);
}

.pv-contact { display: grid; gap: .45rem; width: 100%; }
.pv-contact a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  font-size: .82rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.pv-contact svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--amber-2); }
.pv-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════ Texto corrido ═══════════════ */
.pv-lead {
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}
.pv-lead + .pv-lead { margin-top: 1rem; }
.pv-lead strong { color: var(--text); font-weight: 600; }
.pv-lead strong.pv-gold { color: transparent; }

.pv-h2 {
  font-family: Sora, Inter, system-ui, sans-serif;
  font-size: clamp(1.35rem, 4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.pv-h2--center { text-align: center; margin-inline: auto; max-width: 34rem; }

.pv-sub {
  max-width: 38rem;
  margin: .7rem auto 0;
  font-size: .95rem;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
}

.pv-role { text-align: center; }
.pv-role .pv-lead { margin-top: .9rem; }

/* Banderas de origen */
.pv-origins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.85rem;
}
.pv-origins li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  font-size: .84rem;
  font-weight: 500;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--surface);
}
.pv-flag {
  width: 1.4rem;
  height: .94rem;   /* 3:2, la proporción del viewBox */
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

/* ═══════════════ Productos ═══════════════ */
.pv-grid { display: grid; gap: .7rem; margin-top: 1.9rem; }

.pv-prod {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: 1.15rem 1.05rem;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.pv-prod__ico {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  color: var(--amber-2);
  background: var(--amber-dim);
  border: 1px solid rgba(240,135,31,.2);
}
.pv-prod__ico svg { width: 1.45rem; height: 1.45rem; }

.pv-prod h3 {
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.pv-code {
  margin-top: auto;
  padding: .2rem .55rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--amber-2);
  background: var(--amber-dim);
  border-radius: 999px;
}

/* ═══════════════ Catálogo (productos.html) ═══════════════
   Fichas más compactas que las de la propuesta: aquí solo hay
   icono y nombre, así que van centradas y en rejilla automática. */
/* Con 11 fichas: 2 columnas en móvil, 3 en tablet y 4 en escritorio
   (4+4+3, que reparte mejor que 6+5). */
.pv-grid--cat {
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: .6rem;
}

.pv-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 8.5rem;
  padding: 1.15rem .8rem;
  text-align: center;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.pv-cat__ico {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 13px;
  color: var(--amber-2);
  background: var(--amber-dim);
  border: 1px solid rgba(240,135,31,.2);
}
.pv-cat__ico svg { width: 1.55rem; height: 1.55rem; }

.pv-cat h3 {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* Aviso de entrega inmediata / crédito local */
.pv-note {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  max-width: 44rem;
  margin: 1.6rem auto 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(240,135,31,.22);
  border-radius: var(--r);
  background: var(--amber-dim);
}
.pv-note__ico { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--amber-2); }
.pv-note p { font-size: .95rem; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.pv-note strong { font-weight: 600; }

/* ═══════════════ Cadena de suministro ═══════════════ */
.pv-steps {
  position: relative;
  display: grid;
  gap: .55rem;
  max-width: 42rem;
  margin: 1.9rem auto 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* Riel vertical que une los pasos */
.pv-steps::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: 2.5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--stroke) 12%, var(--stroke) 88%, transparent);
}

.pv-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.pv-step__n {
  display: grid;
  place-items: center;
  flex: 0 0 2.6rem;
  height: 2.6rem;
  font-family: Sora, Inter, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #17120A;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  box-shadow: 0 4px 14px -6px rgba(240,135,31,.8);
}

.pv-step__body { min-width: 0; }
.pv-step__body h3 {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.pv-step__body p {
  margin-top: .15rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ═══════════════ Misión ═══════════════ */
.pv-mission { text-align: center; }
.pv-mission__ico {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  color: var(--amber-2);
  background: var(--amber-dim);
  border: 1px solid rgba(240,135,31,.22);
}
.pv-mission__ico svg { width: 1.8rem; height: 1.8rem; }

/* ═══════════════ Principios ═══════════════ */
.pv-grid--prin { gap: .7rem; }

.pv-prin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: 1.6rem 1rem;
  text-align: center;
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.pv-prin__ico {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  color: var(--amber-2);
  background: var(--amber-dim);
  border: 1px solid rgba(240,135,31,.22);
}
.pv-prin__ico svg { width: 1.6rem; height: 1.6rem; }

.pv-prin h3 {
  font-family: Sora, Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Subrayado ámbar bajo el título */
.pv-prin h3::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin: .65rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
}

/* ═══════════════ Valores personales ═══════════════ */
.pv-values { text-align: center; }

.pv-formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem .9rem;
  margin-block: 1.5rem;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.35rem, 5.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .01em;
}
.pv-formula span {
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pv-formula i {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  opacity: .55;
}

/* ═══════════════ Público objetivo ═══════════════ */
.pv-grid--aud { gap: .6rem; }

.pv-aud {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem .95rem;
  font-size: .88rem;
  font-weight: 500;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.pv-aud svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--amber-2); }

.pv-cta { max-width: 30rem; margin: 1.9rem auto 0; }

/* ═══════════════ Tarjeta de presentación ═══════════════ */
.pv-bcard {
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.pv-bcard img { width: 100%; height: auto; }

.pv-bcard__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: 1.1rem;
}

/* ═══════════════ Pie ═══════════════ */
.pv-foot {
  padding: 2.75rem 0;
  padding-bottom: max(2.75rem, env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--stroke);
}

.pv-foot__tag {
  max-width: 34rem;
  margin-inline: auto;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--muted);
  text-wrap: balance;
}
.pv-foot__tag strong {
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pv-foot .socials { margin-top: 1.6rem; }

.pv-foot__legal {
  margin-top: 1.5rem;
  font-size: .72rem;
  color: var(--muted);
  opacity: .65;
}

/* ═══════════════ Aparición al hacer scroll ═══════════════
   El JS pone .is-in cuando el bloque entra en pantalla.
   Sin JS todo queda visible (ver el bloque .no-js de abajo). */
.pv-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.pv-rv.is-in { opacity: 1; transform: none; }

/* Escalonado dentro de una misma rejilla o lista */
.pv-grid > .pv-rv:nth-child(2),
.pv-steps > .pv-rv:nth-child(2) { transition-delay: .07s; }
.pv-grid > .pv-rv:nth-child(3),
.pv-steps > .pv-rv:nth-child(3) { transition-delay: .14s; }
.pv-grid > .pv-rv:nth-child(4),
.pv-steps > .pv-rv:nth-child(4) { transition-delay: .21s; }
.pv-grid > .pv-rv:nth-child(5),
.pv-steps > .pv-rv:nth-child(5) { transition-delay: .28s; }
.pv-grid > .pv-rv:nth-child(6) { transition-delay: .35s; }

/* Entrada de la portada (no depende del scroll) */
.pv-in {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .6s cubic-bezier(.2,.7,.3,1) .1s forwards;
}

/* ═══════════════ Interacción ═══════════════ */
.pv-prod:active, .pv-step:active, .pv-prin:active, .pv-aud:active, .pv-cat:active { transform: scale(.99); }

@media (hover: hover) and (pointer: fine) {
  .backlink:hover { color: var(--text); border-color: var(--stroke-h); background: rgba(20,25,34,.9); }
  .backlink:hover svg { transform: translateX(-3px); }

  .pv-contact a:hover { color: var(--text); background: var(--surface-h); border-color: var(--stroke); }

  .pv-prod:hover, .pv-prin:hover, .pv-aud:hover, .pv-cat:hover {
    transform: translateY(-2px);
    background: var(--surface-h);
    border-color: var(--stroke-h);
  }
  .pv-step:hover { background: var(--surface-h); border-color: var(--stroke-h); }
}

/* ═══════════════ Puntos de quiebre ═══════════════ */
@media (min-width: 36rem) {
  .pv-sec { padding-block: 4rem; }
  .pv-grid--prod { grid-template-columns: repeat(2, 1fr); }
  .pv-grid--prin { grid-template-columns: repeat(3, 1fr); }
  .pv-grid--aud  { grid-template-columns: repeat(2, 1fr); }
  .pv-step { padding: 1rem 1.2rem; gap: 1.15rem; }
}

@media (min-width: 52rem) {
  .pv-sec { padding-block: 5rem; }
  .pv-philo { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
  .pv-philo__text { text-align: left; }
  .pv-grid--prod { grid-template-columns: repeat(3, 1fr); }
  .pv-grid--aud  { grid-template-columns: repeat(3, 1fr); }
  .pv-hero__body { padding-top: 2rem; }
}

/* ═══════════════ Accesibilidad y preferencias ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .pv-rv { opacity: 1; transform: none; transition: none; }
  .pv-in { opacity: 1; transform: none; animation: none; }
  .pv-cta .cta__pulse { display: none; }
}

/* ═══════════════ Impresión ═══════════════ */
@media print {
  .glow, .topbar, .pv-hero__veil, .pv-bcard__actions, .cta__pulse { display: none !important; }
  body { background: #fff; color: #000; }
  .pv-rv, .pv-in { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pv-sec { padding-block: 1.25rem; break-inside: avoid; }
  .pv-sec--dark { background: none; }
  .pv-prod, .pv-prin, .pv-step, .pv-aud, .pv-cat, .pv-cardme, .pv-bcard, .pv-origins li {
    border-color: #bbb; background: none; box-shadow: none; color: #000;
  }
  .pv-note { border-color: #bbb; background: none; }
  .pv-gold, .pv-formula span, .pv-foot__tag strong { -webkit-text-fill-color: #B45309; color: #B45309; }
  .pv-lead, .pv-sub, .pv-quote-sub, .pv-step__body p { color: #333; }
}