/* Stoppiello · Dirección B "Vitrina" (DECISIONES 118, 3/11).
   Minimalismo de base + tipografía de lujo de acento: una pieza por vez, mucho aire, el azul hace de tinta.
   Por ahora solo en la portada y las fichas (body.st-vitrina). Se apoya en los tokens de marca.css; no define colores nuevos.
   Agregados: franja con la dirección (de C), línea de tiempo 1900 / 1949 / Hoy (de C) y "Cómo se hizo" en la ficha (de A). */


.st-vitrina { --v-aire: clamp(4.5rem, 3rem + 7vw, 10rem); --v-titulo: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem); }

/* Tipo: títulos finos en azul, botones y enlaces en minúscula (sin mayúsculas espaciadas de catálogo) */
.st-vitrina h1, .st-vitrina h2 { font-weight: 500; letter-spacing: -.01em; }   /* antes 300 (DECISIONES 133) */
.st-vitrina h3 { font-weight: 500; }
.st-vitrina .wp-block-button__link, .st-vitrina .boton, .st-vitrina .st-wa a, .st-vitrina .st-wa .ctc_cta { text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: var(--t-s); }
.st-vitrina .enlace { text-transform: none; letter-spacing: 0; font-size: var(--t-s); }
.st-vitrina #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: var(--t-s); }
.st-vitrina .seccion + .seccion { border-top: 0; }
.st-vitrina .seccion { padding-block: var(--v-aire); }
.st-vitrina .cabeza-seccion { flex-direction: column; align-items: center; text-align: center; gap: var(--s1); }
.st-vitrina .cabeza-seccion h2 { max-width: 22ch; font-size: var(--v-titulo); }
::selection { background: var(--azul); color: var(--fondo); }

/* ===== Portada ===== */
/* Vitrina: la pieza puesta, centrada, con su cartelito; el H1 de siempre abajo */
.vitrina > .wp-block-group__inner-container, .franja > .wp-block-group__inner-container { display: contents; }   /* Kadence envuelve los grupos */
.vitrina { display: grid; justify-items: center; text-align: center; padding: var(--s2) var(--margen) var(--s5); }
.vitrina .vitrina__foto { margin: 0 auto; width: min(62vw, 30rem); display: block; }
.vitrina__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--beige); }
.vitrina__foto figcaption { margin-top: .75rem; font-size: var(--t-xs); color: var(--grafito); letter-spacing: .02em; }
.vitrina__texto { display: grid; justify-items: start; text-align: left; width: min(100%, 30rem); margin-top: var(--s3); }   /* etiqueta, H1, texto y botón alineados a la izquierda (4/11) */
.vitrina h1 { font-size: var(--v-titulo); line-height: 1.22; max-width: 21ch; margin: 0 0 var(--s2); color: var(--azul); text-wrap: balance; }
.vitrina h1 .hero__marca { display: block; font-weight: 500; font-size: var(--t-m); letter-spacing: .01em; margin-bottom: .5rem; }
.vitrina p { color: var(--grafito); max-width: 40ch; margin-inline: 0; font-size: .9375rem; line-height: 1.6; }
.vitrina .acciones { justify-content: flex-start; margin-top: var(--s1); }
@media (min-width: 56rem) {   /* compu: la pieza a la izquierda y el H1 a su lado, todo en la primera pantalla */
  .vitrina { grid-template-columns: minmax(0, 28rem) minmax(0, 30rem); justify-content: center; align-items: center; column-gap: clamp(3rem, 6vw, 7rem); padding: var(--s4) var(--margen) var(--s5); }
  .vitrina .vitrina__foto { width: 100%; }
  .vitrina__texto { margin-top: 0; }
}

/* Franja de la dirección (de C): texto real, en el mismo renglón en la compu */
.franja { border-block: 1px solid var(--filete); padding: var(--s2) var(--margen); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25rem var(--s3); text-align: center; }
.franja p { margin: 0; max-width: none; }
.franja__dir a { color: var(--azul); font-weight: 500; text-decoration: none; display: inline-block; min-height: 24px; }
.franja__dir a:hover { text-decoration: underline; }
.franja__hora { font-size: var(--t-s); color: var(--grafito); }

/* Tipos de pieza: fotos cuadradas sobre papel, nombre centrado */
.s-tipos .grilla-col { gap: var(--s4) var(--s2); }
.s-tipos .wp-block-image { text-align: center; }
.s-tipos .wp-block-image img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.s-tipos figcaption, .s-tipos .tarjeta-col span { font: 400 var(--t-s)/1.3 var(--sans) !important; letter-spacing: .01em !important; margin-top: .6rem; color: var(--azul); }

/* Alianzas: la única banda azul llena */
.s-alianzas { background: var(--azul); color: var(--fondo); }
.s-alianzas h2, .s-alianzas p, .s-alianzas li span { color: var(--fondo) !important; }
.s-alianzas h2 { font-size: var(--v-titulo); max-width: 14ch; }
.s-alianzas .lista-datos, .s-alianzas .lista-datos li { border-color: rgba(245, 243, 240, .25); }
.s-alianzas .lista-datos li span:first-child { opacity: .75; }
.s-alianzas .wp-block-button__link { background: var(--fondo) !important; color: var(--azul) !important; border-color: var(--fondo) !important; }
.s-alianzas .is-style-outline .wp-block-button__link { background: transparent !important; color: var(--fondo) !important; }
.s-alianzas .wp-block-button__link:hover { background: transparent !important; color: var(--fondo) !important; }
.s-alianzas a:focus-visible { outline-color: var(--fondo); }

/* La esclava: foto real de la pieza sobre papel */
.s-esclava .wp-block-media-text img { aspect-ratio: 4 / 5; object-fit: contain; background: #F4EFE6; }

/* Línea de tiempo (de C) */
/* «Un taller desde 1949»: alineado a la izquierda, en el mismo eje que el bloque de texto de la portada (DECISIONES 127) */
.s-anios { background: var(--beige); text-align: left; }
.s-anios h2 { font-size: var(--v-titulo); margin-inline: 0; }
.s-anios .contenedor > p { margin-inline: 0; color: var(--grafito); }
.anios { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s4); max-width: 60rem; }
.anios li { display: grid; gap: .25rem; justify-items: start; margin: 0; }
.s-anios ol.anios, .s-anios ol.anios.wp-block-list { padding-inline-start: 0; margin-inline-start: 0; }
.s-anios .anios li { padding-inline-start: 0; margin-inline-start: 0; }
.anios__n { font-weight: 300; font-size: clamp(3rem, 2rem + 4.5vw, 5.5rem); line-height: 1; color: var(--azul); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.anios__t { font-weight: 500; color: var(--azul); margin-top: .5rem; }
.anios__d { color: var(--grafito); font-size: var(--t-s); max-width: 26ch; }
@media (min-width: 48rem) { .anios { grid-template-columns: repeat(3, 1fr); } }

/* Reseñas, servicios y guías: sin filete grueso, títulos finos */
.st-vitrina .resena { border-top-color: var(--filete); }
.s-servicios h2, .s-guias h2, .s-resenas h2 { text-align: center; }
.st-vitrina .guias a { font-weight: 400; font-size: var(--t-m); }

/* ===== Ficha ===== */
.single-product.st-vitrina .sello--estampa { display: none; }
.single-product.st-vitrina .product_title { font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.2; letter-spacing: -.01em; }
.single-product.st-vitrina .summary .price { font-weight: 400; font-size: var(--t-l); color: var(--azul); }
.single-product.st-vitrina .envio-gratis { border: 0; padding: 0; background: none; text-transform: none; letter-spacing: 0; font-size: var(--t-s); color: var(--grafito); gap: .4rem; min-height: 0; }
.single-product.st-vitrina .envio-gratis svg { width: 16px; height: 16px; }
.single-product.st-vitrina .woocommerce-product-details__short-description p { color: var(--texto); }
.single-product.st-vitrina .lista-datos li { font-size: var(--t-s); }
@media (max-width: 55.99rem) {   /* celular: nombre y precio más arriba */
  .single-product.st-vitrina .flex-control-thumbs { display: none; }
  .single-product.st-vitrina .migas-fila { font-size: var(--t-xs); }
}
.single-product.st-vitrina .acordeon summary, .single-product.st-vitrina .ficha-desplegables summary { text-transform: none; letter-spacing: 0; font-weight: 500; }
@media (min-width: 56rem) { .single-product.st-vitrina .summary { padding-left: var(--s3); } }

/* Cómo se hizo (de A): foto real del taller + dos líneas, debajo de la info principal */
.como-se-hizo { clear: both; display: grid; gap: var(--s3); margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--filete); align-items: center; }
.como-se-hizo__foto { width: 100%; max-width: 26rem; aspect-ratio: 4 / 5; object-fit: cover; }
.como-se-hizo h2 { font-size: var(--v-titulo); margin-bottom: var(--s2); }
.como-se-hizo p { color: var(--texto); max-width: 40ch; }
.como-se-hizo .enlace { color: var(--azul); }
@media (min-width: 56rem) { .como-se-hizo { grid-template-columns: minmax(0, 26rem) 1fr; gap: var(--s5); } }

/* Relacionadas: título centrado y fino */
.single-product.st-vitrina .related > h2 { text-align: center; font-size: var(--v-titulo); }
.st-vitrina .sello { border: 0; padding: 0; background: none; letter-spacing: .02em; text-transform: none; font-size: var(--t-xs); color: var(--grafito); }

/* ===== Colecciones (4/11) ===== */
/* Cabeza: centrada, H1 fino, la bajada en el texto de la web (no la serif grande), el conteo como dato chico debajo */
.tax-product_cat.st-vitrina .cabeza-coleccion, .post-type-archive-product.st-vitrina .cabeza-coleccion { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--s4); margin: 0 auto var(--s5); max-width: 46rem; }
.st-vitrina .cabeza-coleccion h1 { font-size: var(--v-titulo); line-height: 1.2; max-width: 20ch; margin: 0 auto var(--s2); text-wrap: balance; }
.st-vitrina .cabeza-coleccion .bajada { font: 400 .9375rem/1.65 var(--sans); color: var(--grafito); max-width: 44ch; margin: 0 auto; text-wrap: pretty; }
.st-vitrina .cabeza-coleccion .etq { order: 3; text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: var(--t-xs); margin: var(--s2) 0 0; }
.st-vitrina .cabeza-coleccion .acciones { order: 4; justify-content: center; margin-top: var(--s3); }
.st-vitrina .migas-fila { text-align: center; }
@media (max-width: 47.99rem) { .st-vitrina .cabeza-coleccion { padding-top: var(--s2); margin-bottom: var(--s4); } }

/* Grilla: cada pieza en su vitrina beige, datos centrados y chicos; más aire entre filas */
.st-vitrina ul.products li.product { text-align: center; }   /* colecciones y relacionadas: metal, nombre y precio en el mismo eje (4/11) */
.st-vitrina ul.products li.product .sello { justify-self: center; margin-top: .25rem; }
.st-vitrina ul.products li.product .woocommerce-loop-image-link { background: var(--beige); margin-bottom: .9rem; padding: 0; min-height: 0; }   /* sin el relleno táctil de los enlaces de texto: la foto llena su marco */
.st-vitrina ul.products li.product img { background: var(--beige); }
.st-vitrina ul.products li.product .woocommerce-loop-product__title { font-size: var(--t-s) !important; line-height: 1.35 !important; color: var(--azul) !important; margin: .35rem 0 .2rem !important; justify-self: center; max-width: 24ch; }
.st-vitrina ul.products li.product .price, .st-vitrina ul.products li.product .cotizacion { font-weight: 400; font-size: var(--t-xs) !important; }
@media (min-width: 48rem) { .tax-product_cat.st-vitrina ul.products, .post-type-archive-product.st-vitrina ul.products { column-gap: var(--s4); } }

/* ===== Servicios (Fase 1, 4/11): visita primero; el resto se suma de a una ===== */
/* Mismo lenguaje que colecciones: H1 fino en azul, bajada en el texto de la web, etiqueta chica sin mayúsculas, la foto real manda */
.page.st-vitrina .seccion--arriba { padding-block: var(--s2) var(--v-aire); }
.page.st-vitrina .seccion--arriba .wp-block-media-text { align-items: start; }
.page.st-vitrina .seccion--arriba .wp-block-media-text > * { align-self: start; }
.page.st-vitrina .seccion--arriba .wp-block-media-text__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--beige); }
.page.st-vitrina .seccion--arriba .etq { text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: var(--t-xs); color: var(--grafito); margin-bottom: var(--s1); }
.page.st-vitrina .seccion--arriba h1 { font-size: var(--v-titulo); line-height: 1.2; color: var(--azul); max-width: 20ch; margin: 0 0 var(--s2); text-wrap: balance; }
.page.st-vitrina .seccion--arriba .bajada { font: 400 .9375rem/1.65 var(--sans); color: var(--grafito); max-width: 44ch; text-wrap: pretty; }
.page.st-vitrina .seccion--arriba .lista-datos li { font-size: var(--t-s); }
.page.st-vitrina .seccion--arriba .acciones { margin-top: var(--s3); }
@media (max-width: 47.99rem) {   /* celular: la foto a todo el ancho y el texto pegado abajo, sin aire de más */
  .page.st-vitrina .seccion--arriba .wp-block-media-text { row-gap: 0; }
  .page.st-vitrina .seccion--arriba .wp-block-media-text__content { padding: var(--s3) 0 0; }
  .page.st-vitrina .migas-fila:has(+ .seccion--arriba) { margin-bottom: 0; }
  .page.st-vitrina .seccion--arriba .wp-block-media-text__media img { aspect-ratio: 4 / 3; object-position: 50% 35%; }   /* más baja: el H1 entra en la primera pantalla */
  .page-id-165.st-vitrina .seccion--arriba .wp-block-media-text__media img { aspect-ratio: 1; }   /* alianzas: cuadrada, para que entren el logo del estuche y las dos alianzas */
}
@media (min-width: 48rem) {
  .page.st-vitrina .seccion--arriba .wp-block-media-text__content { padding-inline: clamp(2rem, 4vw, 5rem) 0; }
}

/* Páginas nuevas del lanzamiento (5/11): fotos de llaveros en regalos empresariales y el renglón de regalos en la portada */
.st-vitrina .galeria-regalos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); max-width: 36rem; margin: var(--s3) 0 var(--s4); padding: 0; }
.st-vitrina .galeria-regalos figure { margin: 0; width: auto !important; }
.st-vitrina .galeria-regalos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--beige); }
.s-servicios .nota-regalos { text-align: center; margin: var(--s4) auto 0; max-width: 46ch; font-size: var(--t-s); color: var(--grafito); text-wrap: balance; }
.s-servicios .nota-regalos .enlace { white-space: nowrap; margin-left: .25em; }
@media (prefers-reduced-motion: reduce) { .st-vitrina * { transition: none !important; animation: none !important; } }

/* Pesos (DECISIONES 133): estas bajadas fijan el peso con "font:", hay que repetir el 300 desde 768 px */
@media (min-width: 48rem) { .page.st-vitrina .seccion--arriba .bajada, .st-vitrina .cabeza-coleccion .bajada { font-weight: 300; } }

/* ===== Página de error 404 (5/11) ===== */
.error-404 .contenedor { max-width: 40rem; }
.error-404 h1 { font-size: var(--v-titulo); color: var(--azul); margin-bottom: var(--s2); }
.error-404 .bajada { font: 400 var(--t-m)/1.65 var(--sans); color: var(--grafito); max-width: 44ch; }
@media (min-width: 48rem) { .error-404 .bajada { font-weight: 300; } }
.error-404__enlaces { list-style: none; padding: 0; margin: var(--s3) 0; }
.error-404__enlaces li { border-bottom: 1px solid var(--filete); }
.error-404__enlaces li:first-child { border-top: 1px solid var(--filete); }
.error-404__enlaces a { display: block; padding: .85rem 0; min-height: 44px; color: var(--azul); text-decoration: none; }
.error-404__enlaces a:hover { text-decoration: underline; text-underline-offset: .2em; }
.error404 .content-container .error > .page-content, .error404 .entry-content-wrap { padding: 0; background: none; }
.error-404 .etq { text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: var(--t-xs); color: var(--grafito); margin-bottom: var(--s1); }
