/* ALIC V5 — sections.css */
/* El hero en uso es .hero-intro (final de este archivo). El sistema anterior
   (.hero, .hero-video, .hero::after, .hero-scroll, @keyframes float) se retiró
   el 2026-07-26 tras verificar que ningún HTML declara esas clases. */

.doctrine-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--onice);
}

.doctrine-section__media,
.doctrine-section__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.doctrine-section__media {
  z-index: 0;
  overflow: hidden;
  background: var(--onice);
}

.doctrine-section__overlay {
  z-index: 1;
  background: color-mix(in srgb, var(--onice) 4%, transparent);
}

.doctrine-section__media iframe,
.doctrine-section__media video {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 177.78vh;
  height: 56.25vw;
  border: 0;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

/* El fondo onice de .doctrine-section__media es el fallback: visible en
   idle/loading/fallback y sin JavaScript. Solo el estado "video" revela el
   iframe una vez confirmada su carga. */
.doctrine-section[data-media-state="video"] .doctrine-section__media iframe {
  opacity: 1;
}

.doctrine-section::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: clamp(64px, 9vw, 140px);
  background: linear-gradient(to bottom, transparent 0%, var(--pearl) 100%);
  pointer-events: none;
}

/* MP4 MIGRATION: only replace the media factory in doctrine-media.js; these layers and cover rules remain unchanged. */
.doctrine-section > .section-heading,
.doctrine-section > .principles-grid {
  position: relative;
  z-index: 2;
}

.doctrine-section > .section-heading {
  width: min(100%, 72rem);
  margin-inline: auto;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--onice) 78%, transparent) 0 48%, color-mix(in srgb, var(--onice) 58%, transparent) 68%, transparent 100%);
}

.doctrine-section > .section-heading .section-label,
.doctrine-section > .section-heading .section-title,
.doctrine-section > .section-heading .section-subtitle {
  color: var(--papel);
}

.doctrine-section > .section-heading .section-title {
  font-size: clamp(2.75rem, 5.8vw, 5.75rem);
  line-height: 1.05;
  letter-spacing: calc(var(--tracking-h1) * 1.25);
}

.hero-overlay {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--papel);
  padding: 0 var(--page-margin);
  width: min(100%, var(--content-width));
}

.hero-overlay h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 4.05rem);
  font-weight: 600;
  letter-spacing: calc(var(--tracking-h1) * 1.35);
  line-height: 1.12;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}

.hero-overlay h1 span { display: block; }

.hero-overlay .hero-intro__copy {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2.5vw, 22px);
  font-style: italic;
  line-height: 1.5;
  max-width: 44rem;
  margin-bottom: var(--space-md);
  color: var(--dorado-light);
  text-wrap: balance;
}

.hero-overlay .hero-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-style: normal;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  color: var(--dorado-light);
}

/* PROMISE SECTION */
.home-section[data-section="editorial-statement"] { padding-bottom: 0; }

.promise-scroll {
  --promise-block-gap: clamp(3rem, 5vw, 5.5rem);
  --promise-section-padding: clamp(4rem, 7vw, 7rem);
  position: relative;
  height: auto;
  min-height: 0;
  padding-block: var(--promise-block-gap) var(--promise-section-padding);
  row-gap: var(--promise-block-gap);
  overflow-x: clip;
}

.promise-scroll__stage {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  height: auto;
  min-height: 0;
}

.promise-scroll__sticky {
  position: relative;
  height: auto;
  min-height: 0;
}

.promise-scroll__media {
  position: relative;
  z-index: var(--layer-promise-media);
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(min(84.375vw, 52.75rem) + var(--space-md));
  margin: 0;
  padding: var(--space-md) 0 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, var(--onice) 0 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--onice) 0 70%, transparent 100%);
}

.promise-scroll__poster,
.promise-scroll__video {
  grid-area: 1 / 1;
  width: min(100%, 62.5rem);
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: scale(1.5) translateY(var(--space-xs));
  transform-origin: center;
}

.promise-scroll__poster img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 1;
}

.promise-scroll__video {
  height: auto;
  visibility: hidden;
  background: transparent;
}

.promise-scroll[data-media-state="ready"] .promise-scroll__video { visibility: visible; }
.promise-scroll[data-media-state="ready"] .promise-scroll__poster { visibility: hidden; }

.promise-scroll__content {
  position: relative;
  z-index: var(--layer-promise-content);
  padding-block: 0;
}

.promise-scroll__content .section-label {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-button);
  margin-bottom: var(--space-sm);
}

.promise-scroll__content .section-title {
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  letter-spacing: calc(var(--tracking-h1) * 1.35);
  line-height: 1.12;
  margin-bottom: var(--space-sm);
}

.promise-scroll__content .section-subtitle {
  max-width: 42rem;
  text-wrap: balance;
}

.promise-scroll__pillars {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
  margin-top: 0;
}

.promise-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md) var(--page-margin);
}

.promise-card .icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-sm);
  color: var(--cardenal);
}
.promise-icon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promise-card h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.04em; margin-bottom: 8px; text-transform: uppercase; }
.promise-card p { font-size: 14px; color: var(--gris-lectura); line-height: 1.6; }
.section-dark .promise-card p { color: var(--gris-santo); }

/* PRINCIPLES */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.principle-card {
  border: 1px solid color-mix(in srgb, var(--dorado) 34%, transparent);
  background: color-mix(in srgb, var(--onice) 72%, transparent);
  padding: 32px;
}

.principle-card .number {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--dorado);
  margin-bottom: 12px;
}

.principle-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.principle-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gris-lectura);
}

.section-dark .principle-card p { color: var(--papel); }

/* CURATED BRAND MEDIA */
.brand-media {
  overflow: hidden;
  background: var(--onice);
  border: 1px solid color-mix(in srgb, var(--dorado) 24%, transparent);
}

.brand-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.brand-media--story {
  aspect-ratio: 2 / 3;
  margin: 0;
}

.brand-media--story img { object-position: center 42%; }

.brand-media--editorial {
  width: min(100%, 34rem);
  aspect-ratio: 2 / 3;
  margin: var(--space-lg) auto;
}

/* Variante apaisada. El recuadro editorial es 2/3, vertical, y una
   fotografia apaisada recortada a esa caja pierde los extremos: en la de
   La Casa se comia las vinajeras de los dos lados. */
.brand-media--apaisada { aspect-ratio: 3 / 2; }

.brand-media--consultation {
  aspect-ratio: 4 / 5;
  margin: var(--space-md) 0;
}

.brand-media--consultation img { object-position: center 38%; }

/* COLLECTION GRID */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.collection-card {
  position: relative;
  overflow: hidden;
}

.collection-card .card-image {
  aspect-ratio: 3/4;
  background: var(--onice);
  overflow: hidden;
}

.collection-card .card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
}

.collection-card:is(:hover, :focus-visible) .card-image img { transform: scale(1.02); }
.collection-card .card-image .collection-image--monumental { object-position: center 44%; }
.collection-card .card-image .collection-image--devotion { object-position: center 52%; }
.collection-card .card-image .collection-image--commission { object-position: center 42%; }

.collection-card .card-body {
  padding: 16px 0;
}

.collection-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.collection-card p {
  font-size: 13px;
  color: var(--gris-lectura);
  margin-bottom: 12px;
}

/* PRODUCT GRID */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.product-card { cursor: pointer; }

/* Vertical, no cuadrada: todo el material fotográfico de la casa es 9:16 y
   en un cuadrado se perdía la mitad de cada pieza por arriba y por abajo. */
.product-card .card-image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--onice);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dorado);
  font-size: 36px;
  transition: opacity var(--transition-fast);
}

.product-card:hover .card-image { opacity: 0.85; }
.product-card .card-image img { width: 100%; height: 100%; object-fit: cover; }

.product-card .card-body { padding: 12px 0; }
.product-card h3 { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
.product-card .category { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris-santo); }

/* PRODUCT DETAIL PAGE */
.product-detail {
  padding-top: 120px;
}

/* minmax(0, ...) en las dos columnas: un `1fr` a secas lleva un minimo
   `auto`, asi que la galeria ensanchaba la pista hasta el ancho de la tira de
   miniaturas y la pagina se desbordaba. Medido en movil: 441 px de mas en la
   ficha del Cristo, que lleva diez vistas. En escritorio no cambia nada,
   porque alli sobra sitio. */
.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.product-gallery .main-image {
  aspect-ratio: 4/5;
  background: var(--onice);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dorado);
  font-size: 64px;
}

/* Las miniaturas se reparten en filas en vez de salirse. Con diez vistas la
   tira medía 780 px y no cabía en ningun movil. En escritorio la fila sigue
   entrando entera, asi que no se ve el cambio. */
.product-gallery .thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.product-gallery .thumb {
  width: 70px;
  height: 70px;
  background: var(--onice);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dorado);
  font-size: 18px;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0;
  font: inherit;
}

@media (min-width: 1024px) and (orientation: landscape) {
  .js-enhanced .promise-scroll[data-scroll-enhanced="true"] .promise-scroll__poster,
  .js-enhanced .promise-scroll[data-scroll-enhanced="true"] .promise-scroll__video {
    width: min(72vw, 1000px);
  }
}

.product-gallery .thumb.active { border-color: var(--dorado); }
.product-gallery .main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery .thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info .collection-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-santo);
  margin-bottom: 8px;
}

.product-info h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: var(--tracking-h1);
  line-height: 1.2;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.product-info .product-description {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris-lectura);
  margin-bottom: 24px;
}

.product-detail-cta {
  width: 100%;
  padding: 16px;
  background: var(--onice);
  color: var(--papel);
  font-family: var(--font-sans);
  font-size: var(--text-button);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;
  border: none;
  transition: opacity var(--transition-fast);
  margin-bottom: 32px;
}

.product-detail-cta:hover { opacity: 0.85; }

.product-accordion { border-top: 1px solid rgba(10,10,10,0.1); }
.accordion-item { border-bottom: 1px solid rgba(10,10,10,0.1); }
.accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--onice);
}

.accordion-trigger::after {
  content: '+';
  font-size: 18px;
  transition: transform var(--transition-fast);
}

.accordion-item.open .accordion-trigger::after { transform: rotate(45deg); }

.accordion-content {
  max-height: none;
  overflow: visible;
}

.js-enhanced .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.js-enhanced .accordion-item.open .accordion-content {
  max-height: 300px;
}

.accordion-content-inner {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gris-lectura);
}

.related-products {
  padding: var(--section-padding) 0;
}

.related-products h2 {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
  text-align: center;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* EDITORIAL PAGE */
.editorial-page { padding-top: 120px; }

.editorial-hero {
  height: 50vh;
  min-height: 350px;
  background: var(--onice);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--papel);
  padding: 0 var(--page-margin);
  margin-bottom: var(--section-padding);
}

.editorial-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600;
  letter-spacing: var(--tracking-h1);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 600px;
}

.editorial-hero .hero-icon { font-size: 48px; margin-bottom: 16px; color: var(--dorado); }

/* Cabecera del certificado: el documento entra en el bloque negro, junto al
   titular. Manda el contenido y no un 50vh fijo, porque con el alto forzado
   la fotografía se salía del bloque —el mismo fallo que tenía la de José—. */
.editorial-hero--cert {
  height: auto;
  min-height: 0;
  padding-block: clamp(48px, 7vw, 96px);
  text-align: left;
}

.cert-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  width: 100%;
  max-width: 1100px;
}

.cert-hero .hero-icon { margin-bottom: 12px; }
.cert-hero h1 { max-width: 9ch; }

.cert-hero__pie {
  margin: 20px 0 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--papel) 62%, transparent);
}

/* Sin recuadro ni fondo: la fotografía ya está tomada sobre terciopelo
   oscuro y funde sola con el negro de la cabecera. */
.cert-hero__media {
  margin: 0;
  width: clamp(220px, 26rem, 380px);
}

.cert-hero__media img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
  .cert-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .cert-hero h1 { max-width: none; }
  .cert-hero__media { width: 74vw; max-width: 340px; }
}

.editorial-hero--house {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.editorial-hero--house .editorial-hero__media {
  position: absolute;
  inset: -6% 0;
  z-index: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 65% 12%;
}

/* El encuadre de cada cabecera. El 65%/12% de la regla base esta medido para
   el paisaje de Jalisco; estas dos fotografias son verticales y con ese valor
   se quedaba solo su franja superior. */
.editorial-hero--cuidado .editorial-hero__media { object-position: 55% 62%; }
.editorial-hero--proceso .editorial-hero__media { object-position: 50% 22%; }

.editorial-hero--house .editorial-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 18%, color-mix(in srgb, var(--onice) 30%, transparent) 58%, color-mix(in srgb, var(--onice) 78%, transparent) 100%);
  pointer-events: none;
}

.editorial-hero--house .editorial-hero__content {
  position: relative;
  z-index: 2;
}

.editorial-content { max-width: 720px; margin: 0 auto; }
.editorial-content h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; margin-top: 40px; margin-bottom: 12px; text-transform: uppercase; }
.editorial-content h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.04em; margin-top: 32px; margin-bottom: 8px; text-transform: uppercase; }
.editorial-content p { margin-bottom: 16px; font-size: 15px; line-height: 1.8; color: var(--gris-lectura); }
.editorial-content blockquote {
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--cardenal);
  border-left: 2px solid var(--dorado);
  padding-left: 24px;
  margin: 24px 0;
  line-height: 1.6;
}

.editorial-content ul { margin-bottom: 16px; padding-left: 20px; }
.editorial-content ul li { list-style: disc; margin-bottom: 8px; font-size: 15px; line-height: 1.7; color: var(--gris-lectura); }

/* Los cuatro compromisos del certificado. Sin viñeta de disco: cada punto
   lleva una palma dorada delante, como en la lámina de la casa. */
.editorial-content ul.respaldo-lista { padding-left: 0; margin-bottom: 24px; }

.respaldo-lista li {
  position: relative;
  list-style: none;
  padding-left: 30px;
  margin-bottom: 14px;
}

.respaldo-lista li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--dorado);
  font-size: 14px;
  line-height: 1.8;
}

.respaldo-lista li strong { color: var(--onice); font-weight: 500; }

.editorial-alt-image {
  margin: 40px 0;
  aspect-ratio: 16/9;
  background: var(--onice);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dorado);
  font-size: 48px;
}

/* CONSULTA PAGE */
.consulta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.consulta-form { padding-top: 0; }
.consulta-form .form-group { margin-bottom: 20px; }
.consulta-form label { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; margin-bottom: 6px; color: var(--gris-santo); }
.consulta-form input,
.consulta-form select,
.consulta-form textarea {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--onice);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--onice);
  outline: none;
}

.consulta-form textarea { min-height: 100px; resize: vertical; }
.consulta-form input:focus,
.consulta-form select:focus,
.consulta-form textarea:focus { border-bottom-width: 2px; }

.consulta-info { padding-top: 0; }
.consulta-info h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.04em; margin-bottom: 16px; text-transform: uppercase; }
.consulta-info p { font-size: 14px; line-height: 1.7; color: var(--gris-lectura); margin-bottom: 24px; }

/* CONTACT PAGE */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.contact-method { text-align: center; padding: 32px; background: var(--papel); }
.contact-method .icon { font-size: 32px; margin-bottom: 12px; }
.contact-method h3 { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.contact-method p { font-size: 14px; color: var(--gris-lectura); line-height: 1.6; }
.contact-method a { color: var(--cardenal); }

/* BREADCRUMB */
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris-santo);
  margin-bottom: 24px;
}

.breadcrumb a { color: var(--gris-santo); transition: opacity var(--transition-fast); }
.breadcrumb a:hover { opacity: 0.7; color: var(--onice); }
.breadcrumb .sep { color: var(--gris-santo); opacity: 0.4; }

/* PAGE HERO (internal pages) */
.page-hero {
  padding: 120px 0 40px;
  text-align: center;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: var(--tracking-h1);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.page-hero p {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-style: italic;
  color: var(--gris-lectura);
}

/* BREADCRUMB (internal) */
.breadcrumb-nav {
  padding: 100px var(--page-margin) 0;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* PAGINATION / EMPTY STATES */
.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-state .icon { font-size: 48px; margin-bottom: 16px; color: var(--gris-santo); }
.empty-state h3 { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.04em; margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--gris-lectura); max-width: 400px; margin: 0 auto 24px; }

.hero-intro {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  align-items: end;
  background: var(--onice);
  isolation: isolate;
}

.hero-intro__media,
.hero-intro__scrim {
  position: absolute;
  inset: 0;
}

.hero-intro__media { z-index: var(--layer-hero-media); background: var(--onice); }

.hero-intro__poster,
.hero-intro__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-intro__poster { position: absolute; inset: 0; }
.hero-intro__video { position: relative; display: block; }

.hero-intro__scrim {
  z-index: var(--layer-hero-overlay);
  opacity: var(--hero-overlay-opacity);
  background: linear-gradient(to bottom, transparent 0%, transparent 46%, color-mix(in srgb, var(--onice) 42%, transparent) 62%, color-mix(in srgb, var(--onice) 82%, transparent) 100%);
}

.hero-intro__content {
  position: relative;
  z-index: var(--layer-hero-content);
  align-self: end;
  justify-self: center;
  padding-block: 0 clamp(4rem, 8vh, 6.5rem);
  text-align: center;
}

.hero-intro__content .btn { justify-self: center; }
.consulta-copy { max-width: 620px; }

/* ---- La pieza en movimiento ----
   El vídeo vertical de cada pieza, al pie de su ficha. Solo corre mientras
   se ve; fuera de cuadro no tiene sentido decodificar. Se pide al acercarse
   (preload="none"), así que no pesa en la carga de la ficha. */
.product-reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}

.product-reel__video {
  width: min(320px, 70vw);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--onice);
  justify-self: end;
}

.product-reel__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-reel h2 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.product-reel p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gris-lectura);
  max-width: 44ch;
}

@media (max-width: 768px) {
  .product-reel { grid-template-columns: 1fr; gap: 28px; }
  .product-reel__video { justify-self: center; }
}

/* ---- Cabecera de José Orfebre ----
   El retrato en el centro y las tres fotografías del taller en fila debajo.
   Donde antes había un emoji de relleno. */
/* Altura automática, no el 50vh fijo de la cabecera genérica: con ese alto
   las fotografías se salían del bloque negro y caían sobre el texto de
   abajo. Aquí manda el contenido. */
.editorial-hero--jose {
  height: auto;
  min-height: 0;
  padding-block: 88px;
  align-items: center;
}

/* El retrato manda y las tres del taller lo acompañan en la columna de al
   lado, dentro del mismo bloque. */
.jose-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  grid-template-areas:
    "retrato taller"
    "titulo  taller";
  align-items: center;
  gap: 28px 36px;
  width: min(100%, 1120px);
  margin-inline: auto;
  text-align: left;
}

.jose-hero__retrato {
  grid-area: retrato;
  margin: 0;
  overflow: hidden;
  background: var(--onice);
}

.jose-hero__retrato img { width: 100%; height: auto; display: block; }

.jose-hero h1 { grid-area: titulo; max-width: none; margin: 0; }

.jose-hero__taller {
  grid-area: taller;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  height: 100%;
}

.jose-hero__taller figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--onice);
}

.jose-hero__taller img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow, .6s ease);
}

.jose-hero__taller figure:hover img { transform: scale(1.03); }

/* En estrecho todo pasa a una columna: retrato, título y las tres del
   taller una debajo de otra. */
@media (max-width: 900px) {
  .jose-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "retrato" "titulo" "taller";
    text-align: center;
  }
  .jose-hero__taller { grid-template-rows: none; }
}