/* ==========================================================================
   Victoria Espinela · Portada
   Solo la portada. Necesita global.css (variables, fuentes, botones y cabecera),
   que se carga antes. Se usa tal cual en el prototipo y en el tema hijo.
   Móvil primero. Todas las clases llevan el prefijo ve- para no chocar con Astra.
   ========================================================================== */

/* ---------- Base ---------- */
.ve-home {
  margin: 0;
  background: var(--ve-bg);
  color: var(--ve-ink);
  font-family: var(--ve-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ve-home *, .ve-home *::before, .ve-home *::after { box-sizing: border-box; }
/* Grano de papel muy sutil, fijo y sin eventos (no se repinta al hacer scroll) */
.ve-home::after {
  content: ""; position: fixed; inset: 0; z-index: var(--ve-z-grain); pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Reseteos con la misma especificidad que los estilos de elemento del tema (0,0,1).
   Como este CSS se carga después, ganan a Astra; y cualquier clase ve- los sobrescribe. */
:where(.ve-home) :is(h1, h2, h3, p, ul, ol, dl, dt, dd, figure, blockquote, table, caption) { margin: 0; padding: 0; }
:where(.ve-home) :is(ul, ol) { list-style: none; }
:where(.ve-home) :is(h1, h2, h3) { clear: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: 400; line-height: inherit; text-transform: none; letter-spacing: normal; }
:where(.ve-home) :is(table, th, td) { border: 0; }
:where(.ve-home) blockquote { border: 0; font-size: inherit; font-style: normal; }
:where(.ve-home) blockquote::before, :where(.ve-home) blockquote::after { content: none; }
:where(.ve-home) img { display: block; max-width: 100%; height: auto; }
:where(.ve-home) a { color: inherit; text-decoration: none; }
:where(.ve-home) a:is(:hover, :focus) { color: inherit; }
:where(.ve-home) a:focus:not(:focus-visible) { outline: none; }
.ve-home a, .ve-home button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ve-home :focus-visible { outline: 2px solid var(--ve-ink); outline-offset: 3px; }

/* ---------- Tipografía ---------- */
.ve-h2 {
  font-family: var(--ve-serif);
  font-weight: 400;
  font-size: clamp(34px, 23.2px + 2.9vw, 60px);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.ve-h2 em, .ve-hero__title em { font-style: italic; letter-spacing: -.01em; }
.ve-head { margin-bottom: 32px; }
.ve-head__text { max-width: 52ch; margin-top: 14px; color: var(--ve-muted); font-size: 17px; text-wrap: pretty; }
.ve-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
@media (min-width: 1024px) { .ve-head { margin-bottom: 48px; } }

/* Hueco de la cabecera fija en la portada: el contenido empieza debajo
   (el hero sube por detrás con margen negativo) */
.ve-home #contenido { padding-top: var(--ve-header-h); }

/* ==========================================================================
   SECCIÓN: hero
   ========================================================================== */
.ve-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: min(86vh, 860px);
  margin-top: calc(-1 * var(--ve-header-h));
  padding: calc(var(--ve-header-h) + 48px) 0 56px;
  color: var(--ve-white); background: #2B2724;
}
@supports (height: 1dvh) { .ve-hero { min-height: min(86dvh, 860px); } }
.ve-hero__media, .ve-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ve-hero__media { z-index: -2; }
.ve-hero__media img { object-fit: cover; object-position: 30% 50%; }
.ve-hero::before, .ve-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Oscurecido: arriba para la cabecera, abajo/izquierda para el texto */
.ve-hero::before { background: linear-gradient(to bottom, rgba(12, 10, 9, .45), rgba(12, 10, 9, 0) 160px); }
.ve-hero::after { background: linear-gradient(to top, rgba(12, 10, 9, .8) 0%, rgba(12, 10, 9, .45) 42%, rgba(12, 10, 9, 0) 72%); }
.ve-hero__welcome { font-family: var(--ve-serif); font-style: italic; font-size: 20px; line-height: 1.3; color: #F2EFEA; }
.ve-hero__title {
  margin-top: 6px;
  font-family: var(--ve-serif); font-weight: 400;
  font-size: clamp(52px, 30.4px + 6.4vw, 120px);
  line-height: .95; letter-spacing: -.025em;
  text-wrap: balance;
}
.ve-hero__sub { margin-top: 16px; font-size: 18px; color: #F2EFEA; }
.ve-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 420px) { .ve-hero__actions .ve-btn { flex: 1 1 100%; } }
@media (min-width: 768px) {
  .ve-hero { align-items: center; padding-bottom: 80px; }
  .ve-hero__media img { object-position: center; }
  .ve-hero::after { background: linear-gradient(90deg, rgba(12, 10, 9, .72) 0%, rgba(12, 10, 9, .4) 40%, rgba(12, 10, 9, 0) 66%); }
  .ve-hero__welcome { font-size: 24px; }
  .ve-hero__sub { font-size: 20px; }
}

/* ==========================================================================
   SECCIÓN: confianza
   ========================================================================== */
.ve-trust { background: var(--ve-surface); }
/* Móvil: tres columnas iguales con el icono encima del texto */
.ve-trust__list { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 18px; font-size: 13px; line-height: 1.3; text-align: center; }
.ve-trust__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-inline: 6px; }
.ve-trust__item + .ve-trust__item { border-left: 1px solid #D8D5D0; }
.ve-trust__icon { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--ve-gold); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) {
  .ve-trust__list { display: flex; justify-content: center; padding-block: 22px; font-size: 15px; text-align: left; }
  .ve-trust__item { flex-direction: row; gap: 12px; padding-inline: 36px; }
  .ve-trust__item + .ve-trust__item { border-left-color: #CFCCC7; }
}

/* ==========================================================================
   Secciones genéricas y scroll horizontal
   ========================================================================== */
.ve-section { padding-block: var(--ve-section); }
/* Dos secciones seguidas con el mismo fondo no suman dos rellenos */
.ve-novedades + .ve-journals, .ve-journals + .ve-cats { padding-top: 0; }
#journals { scroll-margin-top: calc(var(--ve-header-h) + 24px); }

.ve-scroller {
  display: grid; grid-auto-flow: column; gap: 16px;
  margin-inline: calc(-1 * var(--ve-gutter)); padding: 4px var(--ve-gutter) 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--ve-gutter);
  scrollbar-width: thin; scrollbar-color: #CFCCC7 transparent;
}
.ve-scroller > * { position: relative; scroll-snap-align: start; }
.ve-scroller:focus-visible { outline-offset: -2px; }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */
.ve-card { position: relative; display: flex; flex-direction: column; }
.ve-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ve-white); }
.ve-home .ve-card .ve-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; transform: none;
  transition: opacity .5s var(--ve-ease), transform .9s var(--ve-ease);
}
.ve-home .ve-card .ve-card__img--alt { opacity: 0; }
@media (hover: hover) {
  .ve-home .ve-card.has-alt:hover .ve-card__img--alt { opacity: 1; }
  .ve-home .ve-card:hover .ve-card__img { transform: scale(1.03); }
}
.ve-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.ve-badge { padding: 5px 8px; background: var(--ve-bg); color: var(--ve-ink); font-size: 12px; font-weight: 500; line-height: 1; }

.ve-card__body { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.ve-card__title { font-family: var(--ve-serif); font-weight: 400; font-size: 20px; line-height: 1.2; }
.ve-card__link { text-decoration: none; }
.ve-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ve-card__link:focus-visible { outline: none; }
.ve-card:has(.ve-card__link:focus-visible) { outline: 2px solid var(--ve-ink); outline-offset: 4px; }
.ve-card__meta { margin-top: 2px; font-size: 13px; color: var(--ve-muted); }
.ve-card__price { margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ve-card__price .myp-from-label, .ve-card__from { margin-right: .3em; font-size: .85em; color: var(--ve-muted); }
.ve-card--journal .ve-card__price { margin-bottom: 14px; }
.ve-card__cta {
  display: inline-flex; align-items: center; justify-content: center; align-self: stretch;
  min-height: 42px; margin-top: auto; padding: 8px 12px;
  border: 1px solid var(--ve-ink); border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: background-color .2s, color .2s;
}
.ve-card:hover .ve-card__cta { background: var(--ve-ink); color: var(--ve-white); }
@media (min-width: 1024px) {
  .ve-card--journal .ve-card__title { font-size: 26px; }
  .ve-card__cta { align-self: flex-start; padding-inline: 24px; }
}

/* ==========================================================================
   SECCIÓN: novedades (carrusel)
   ========================================================================== */
.ve-carousel__track { grid-auto-columns: 68%; }
@media (min-width: 600px) { .ve-carousel__track { grid-auto-columns: calc((100% - 2 * var(--ve-gutter) - 2 * 16px) / 2.4); } }
@media (min-width: 1024px) {
  .ve-carousel__track { grid-auto-columns: calc((100% - 2 * var(--ve-gutter) - 3 * 32px) / 4); gap: 32px; }
}
/* Botón "Ver producto": solo se ve cuando hay pocas novedades (tarjetas horizontales) */
.ve-card--producto .ve-card__cta { display: none; }

/* Pocas novedades (1-3): en vez de carrusel, ocupan todo el ancho sin dejar hueco.
   En móvil, un solo producto ocupa todo el ancho; con 2-3 se sigue deslizando. */
.ve-carousel__track[data-count="1"] { grid-auto-columns: 100%; }
@media (min-width: 768px) {
  .ve-carousel__track:is([data-count="1"], [data-count="2"], [data-count="3"]) {
    grid-auto-flow: row; grid-auto-columns: auto; gap: 32px;
    margin-inline: 0; padding: 0; overflow: visible;
  }
  .ve-carousel__track[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ve-carousel__track[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve-carousel__track[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

  /* 1 y 2: tarjeta horizontal, foto a la izquierda y texto a la derecha */
  .ve-carousel__track:is([data-count="1"], [data-count="2"]) .ve-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px;
    background: var(--ve-white);
  }
  .ve-carousel__track:is([data-count="1"], [data-count="2"]) .ve-card__media { aspect-ratio: 1 / 1; }
  .ve-carousel__track:is([data-count="1"], [data-count="2"]) .ve-card__body { padding: 24px 28px 24px 0; }
  .ve-carousel__track:is([data-count="1"], [data-count="2"]) .ve-card__title { font-size: 28px; }
  .ve-carousel__track:is([data-count="1"], [data-count="2"]) .ve-card__price { margin: 8px 0 20px; font-size: 16px; }
  .ve-carousel__track:is([data-count="1"], [data-count="2"]) .ve-card--producto .ve-card__cta {
    display: inline-flex; align-self: flex-start; margin-top: 0; padding-inline: 24px;
  }

  /* 1: destacado grande */
  .ve-carousel__track[data-count="1"] .ve-card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); }
  .ve-carousel__track[data-count="1"] .ve-card__media { aspect-ratio: 5 / 4; }
  .ve-carousel__track[data-count="1"] .ve-card__body { padding: 32px clamp(24px, 4vw, 64px) 32px 0; }
  .ve-carousel__track[data-count="1"] .ve-card__title { font-size: clamp(32px, 22px + 1.6vw, 48px); line-height: 1.05; }
  .ve-carousel__track[data-count="1"] .ve-card__price { font-size: 18px; margin: 12px 0 28px; }
}

.ve-carousel__nav { display: none; gap: 8px; }
/* Única excepción al radio 0: los botones de flecha son círculos */
.ve-carousel__btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--ve-ink); border-radius: 50%; background: transparent; color: var(--ve-ink);
  cursor: pointer; transition: background-color .2s, color .2s, opacity .2s, transform .15s;
}
.ve-carousel__btn.ve-carousel__btn, .ve-carousel__btn.ve-carousel__btn:focus { background: transparent; color: var(--ve-ink); border: 1px solid var(--ve-ink); box-shadow: none; }
.ve-carousel__btn.ve-carousel__btn:hover:not(:disabled) { background: var(--ve-ink); color: var(--ve-white); }
.ve-carousel__btn:active:not(:disabled) { transform: scale(.96); }
.ve-carousel__btn:disabled { opacity: .25; cursor: default; }
@media (min-width: 1024px) and (hover: hover) {
  [data-ve-carousel].is-scrollable .ve-carousel__nav { display: flex; }
}

/* ==========================================================================
   SECCIÓN: journals
   Se ven 4; el resto aparece con "Ver los N modelos" (sin JS se ven todos).
   ========================================================================== */
.ve-grid--journals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
@media (min-width: 768px) { .ve-grid--journals { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 20px; } }
@media (min-width: 1024px) { .ve-grid--journals { gap: 64px 32px; } }
.ve-js .ve-grid--journals:not(.is-expanded) .ve-card--extra { display: none; }
.ve-journals__more { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 40px; }
.ve-journals__more [hidden] { display: none; }
@media (min-width: 768px) { .ve-journals__more { flex-direction: row; justify-content: center; gap: 40px; margin-top: 56px; } }

/* ==========================================================================
   SECCIÓN: categorias (dos bloques grandes, asimétricos en escritorio)
   ========================================================================== */
.ve-cats__title { margin-bottom: 32px; }
.ve-cats__list { display: grid; gap: 16px; }
.ve-cat { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ve-surface); color: var(--ve-white); }
.ve-home .ve-cat .ve-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 1s var(--ve-ease); }
.ve-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 10, 9, .66), rgba(12, 10, 9, 0) 55%); pointer-events: none; }
.ve-cat__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 24px; }
.ve-cat__title { font-family: var(--ve-serif); font-weight: 400; font-size: clamp(32px, 24px + 2vw, 52px); line-height: 1; }
.ve-cat__link { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; }
.ve-cat__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.ve-cat__link::after { content: "→"; font-family: var(--ve-sans); font-size: .5em; transition: transform .3s var(--ve-ease); }
.ve-cat__text { margin-top: 6px; font-size: 15px; color: #F2EFEA; }
.ve-home .ve-cat:hover .ve-cat__img { transform: scale(1.04); }
.ve-cat:hover .ve-cat__link::after { transform: translateX(6px); }
.ve-cat__link:focus-visible { outline: none; }
.ve-cat:has(.ve-cat__link:focus-visible) { outline: 2px solid var(--ve-ink); outline-offset: 4px; }
/* Móvil: el primero ancho y los otros dos en fila. Escritorio: uno grande y dos apilados. */
.ve-cats__list { grid-template-columns: 1fr 1fr; }
.ve-cat:first-child { grid-column: 1 / -1; }
.ve-cat:not(:first-child) { aspect-ratio: 3 / 4; }
.ve-cat:not(:first-child) .ve-cat__body { padding: 16px; }
.ve-cat:not(:first-child) .ve-cat__title { font-size: clamp(19px, 5vw, 30px); }
@media (max-width: 767px) { .ve-cat:not(:first-child) .ve-cat__link::after { display: none; } }
.ve-cat:not(:first-child) .ve-cat__link { gap: 6px; }
.ve-cat:not(:first-child) .ve-cat__text { font-size: 13px; }
@media (min-width: 768px) {
  .ve-cats__list { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; min-height: 620px; }
  .ve-cat:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .ve-cat, .ve-cat:not(:first-child) { aspect-ratio: auto; }
  .ve-cat__body, .ve-cat:not(:first-child) .ve-cat__body { padding: 32px; }
  .ve-cat:not(:first-child) .ve-cat__title { font-size: clamp(28px, 20.8px + 1.2vw, 40px); }
  .ve-cat:not(:first-child) .ve-cat__text { font-size: 15px; }
}
@media (min-width: 1024px) { .ve-cats__list { gap: 32px; min-height: 720px; } }
/* Solo dos tarjetas (p. ej. si aún no existe la categoría Complementos) */
.ve-cat:nth-child(2):last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .ve-cat:nth-child(2):last-child { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; } }
/* Solo una tarjeta */
.ve-cat:only-child { grid-column: 1 / -1; }

/* ==========================================================================
   SECCIÓN: pasos (foto + lista)
   ========================================================================== */
.ve-steps { background: var(--ve-stone); color: var(--ve-ink); }
.ve-steps .ve-head__text, .ve-steps .ve-step__text { color: var(--ve-muted); }
/* Sobre el fondo piedra, el botón va en negro (el HTML sigue siendo ve-btn--light) */
.ve-steps .ve-btn.ve-btn--light, .ve-steps .ve-btn.ve-btn--light:focus { background: var(--ve-ink); color: var(--ve-white); }
.ve-steps .ve-btn.ve-btn--light:hover { background: #333; color: var(--ve-white); }
.ve-steps .ve-btn--light .ve-btn__icon { background: rgba(255, 255, 255, .14); }
.ve-steps__layout { display: grid; gap: 40px; }
.ve-steps__media { overflow: hidden; aspect-ratio: 1 / 1; background: var(--ve-white); }
.ve-steps__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (min-width: 600px) and (max-width: 899px) { .ve-steps__media { aspect-ratio: 16 / 9 !important; } }
.ve-steps__list { display: grid; margin: 28px 0 32px; border-top: 1px solid rgba(21, 21, 21, .12); }
.ve-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(21, 21, 21, .12); }
.ve-step__draw { width: 56px; height: 40px; color: var(--ve-gold); }
.ve-step__draw .line { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ve-step__draw .dot, .ve-step__draw .txt { fill: currentColor; font-family: var(--ve-serif); }
.ve-step__title { font-family: var(--ve-serif); font-weight: 400; font-size: 20px; line-height: 1.2; }
.ve-step__text { margin-top: 2px; color: var(--ve-muted); font-size: 14px; }
@media (max-width: 899px) {
  .ve-steps__layout { gap: 32px; }
  .ve-steps__media { aspect-ratio: 4 / 3; }
  .ve-steps__content > .ve-btn { width: 100%; justify-content: space-between; padding-left: 28px; }
}
@media (min-width: 900px) {
  .ve-steps__layout { grid-template-columns: 5fr 6fr; gap: clamp(48px, 7vw, 112px); align-items: start; }
  .ve-steps__media { position: sticky; top: calc(var(--ve-header-h) + 32px); aspect-ratio: 3 / 4; }
  .ve-steps__content { padding-top: 24px; }
  .ve-steps__list { margin: 40px 0 48px; }
  .ve-step { grid-template-columns: 96px 1fr; gap: 28px; padding: 24px 0; }
  .ve-step__draw { width: 96px; height: 64px; }
  .ve-step__title { font-size: 26px; }
}

/* ==========================================================================
   SECCIÓN: pieles
   ========================================================================== */
/* Comparación: cabeceras (foto + nombre) lado a lado y filas por rasgo.
   Móvil: el rasgo ocupa toda la fila y debajo van las dos pieles en dos columnas.
   Escritorio: columna de rasgos a la izquierda y las dos pieles alineadas. */
.ve-compare { --ve-label: 0px; }
.ve-compare__heads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ve-compare__media { aspect-ratio: 1; margin-bottom: 14px; font-size: 11px; }
.ve-compare__media:not(.ve-ph) { overflow: hidden; background: var(--ve-surface); }
.ve-compare__img { width: 100%; height: 100%; object-fit: cover; }
.ve-compare__title { font-family: var(--ve-serif); font-weight: 400; font-size: clamp(22.4px, 16px + 1.6vw, 40px); line-height: 1.05; }
.ve-compare__motto { margin-top: 2px; font-family: var(--ve-serif); font-style: italic; font-size: clamp(16px, 16px + .4vw, 20px); color: var(--ve-muted); }
.ve-compare__table { width: 100%; margin: 28px 0 0; border: 0; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.ve-compare__table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--ve-line); }
.ve-compare__table tr:last-child { border-bottom: 1px solid var(--ve-line); }
.ve-compare__table th { grid-column: 1 / -1; margin-bottom: 6px; padding: 0; border: 0; font-weight: 600; text-align: left; }
.ve-compare__table td { padding: 0; border: 0; color: var(--ve-muted); vertical-align: top; }
@media (min-width: 768px) {
  .ve-compare { --ve-label: 180px; }
  .ve-compare__heads { grid-template-columns: var(--ve-label) 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
  .ve-compare__heads::before { content: ""; }
  .ve-compare__media { aspect-ratio: 4 / 3; margin-bottom: 20px; font-size: 13px; }
  .ve-compare__table { margin-top: 40px; font-size: 15px; }
  .ve-compare__table tr { grid-template-columns: var(--ve-label) 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); padding: 18px 0; }
  .ve-compare__table th { grid-column: auto; margin: 0; }
}

/* Hueco de foto pendiente (solo mientras falten fotos) */
.ve-ph {
  display: grid; place-items: center; padding: 16px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--ve-surface) 0 12px, #E8E6E2 12px 24px);
  border: 1px dashed #A9A5A0;
  color: var(--ve-muted); font-size: 13px; font-weight: 600; letter-spacing: .08em;
}
.ve-ph small { font-weight: 400; letter-spacing: 0; }

/* ==========================================================================
   SECCIÓN: accesorios (lista compacta)
   ========================================================================== */
.ve-accesorios { padding-top: 0; }
.ve-minilist { display: grid; gap: 12px; }
.ve-mini {
  position: relative; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 16px;
  padding: 10px 16px 10px 10px; background: var(--ve-white);
  transition: background-color .2s;
}
.ve-mini:hover { background: var(--ve-surface); }
.ve-mini__media { aspect-ratio: 1; overflow: hidden; background: var(--ve-surface); }
.ve-mini__img { width: 100%; height: 100%; object-fit: cover; }
.ve-mini__title { font-family: var(--ve-serif); font-weight: 400; font-size: 19px; line-height: 1.2; }
.ve-mini__link { text-decoration: none; }
.ve-mini__link::after { content: ""; position: absolute; inset: 0; }
.ve-mini__link:focus-visible { outline: none; }
.ve-mini:has(.ve-mini__link:focus-visible) { outline: 2px solid var(--ve-ink); outline-offset: 2px; }
.ve-mini__price { margin-top: 2px; font-size: 14px; color: var(--ve-muted); font-variant-numeric: tabular-nums; }
.ve-mini__arrow { width: 18px; height: 18px; color: var(--ve-muted); transition: transform .3s var(--ve-ease); }
.ve-mini:hover .ve-mini__arrow { transform: translateX(4px); color: var(--ve-ink); }
@media (min-width: 768px) { .ve-minilist { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .ve-minilist { grid-template-columns: repeat(3, 1fr); } .ve-mini { grid-template-columns: 96px 1fr auto; } }

/* ==========================================================================
   SECCIÓN: resenas (una reseña cada vez)
   ========================================================================== */
.ve-resenas { background: var(--ve-surface); }
.ve-resenas__layout { display: grid; gap: 32px; }
.ve-resenas__layout > *, .ve-steps__layout > * { min-width: 0; }
.ve-rating { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.ve-rating__score { font-family: var(--ve-serif); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.ve-rating__count { margin-top: 4px; font-size: 14px; color: var(--ve-muted); }
.ve-stars { display: inline-flex; gap: 2px; }
.ve-stars svg { width: 16px; height: 16px; fill: #CFCCC7; }
.ve-stars svg.is-on { fill: var(--ve-gold); }
.ve-resenas .ve-carousel__nav { margin-top: 32px; }
.ve-resenas.is-scrollable .ve-carousel__nav { display: flex; }

.ve-quotes { grid-auto-columns: 88%; }
.ve-quote figure { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.ve-quote__text { font-family: var(--ve-serif); font-size: 22px; line-height: 1.35; text-wrap: pretty; }
.ve-quote__meta { display: flex; flex-direction: column; gap: 2px; margin-top: auto; font-size: 15px; }
.ve-quote__author { font-weight: 600; }
.ve-quote__detail { color: var(--ve-muted); }
.ve-quote__more { align-self: flex-start; margin-top: 10px; font-size: 14px; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .ve-resenas__layout { grid-template-columns: 4fr 7fr; gap: clamp(48px, 7vw, 112px); align-items: start; }
  .ve-quotes { grid-auto-columns: 100%; gap: 48px; margin: 0; padding: 0 0 12px; scroll-padding-inline: 0; }
  .ve-quote__text { font-size: clamp(26px, 17.6px + 1vw, 34px); line-height: 1.3; }
}

/* ==========================================================================
   SECCIÓN: muestra (foto a todo el ancho con bloque de texto superpuesto)
   ========================================================================== */
.ve-muestra { padding-bottom: var(--ve-section); }
.ve-muestra__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ve-surface); }
.ve-muestra__media img { width: 100%; height: 100%; object-fit: cover; }
.ve-muestra__card { position: relative; margin-top: -56px; padding: 32px 24px 36px; background: var(--ve-bg); }
.ve-muestra__card p { max-width: 44ch; margin: 16px 0 28px; color: var(--ve-muted); font-size: 17px; }
@media (min-width: 768px) {
  .ve-muestra__media { aspect-ratio: 21 / 9; max-height: 680px; width: 100%; }
  .ve-muestra__card { max-width: 560px; margin-top: -200px; padding: 56px 56px 60px; }
}

/* Solo prototipo: marca del pie de Astra */
.ve-proto-footer { padding: 40px var(--ve-gutter); background: var(--ve-surface); color: var(--ve-muted); font-size: 14px; text-align: center; border-top: 1px solid var(--ve-line); }

/* ==========================================================================
   Aparición suave al hacer scroll (bloques marcados con .ve-reveal por home.js)
   ========================================================================== */
.ve-js .ve-reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ve-ease), transform .9s var(--ve-ease); transition-delay: calc(var(--ve-i, 0) * 70ms); }
.ve-js .ve-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ve-home *, .ve-home *::before, .ve-home *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .ve-js .ve-reveal { opacity: 1; transform: none; }
  .ve-home .ve-card:hover .ve-card__img, .ve-home .ve-cat:hover .ve-cat__img { transform: none; }
}