/* variables.css · Landing Machine · base layer
   Tokens reemplazados por el builder al generar. No editar manualmente.
   ──────────────────────────────────────────────────────────────────── */

:root {

  /* ── Paleta ── */
  --color-fondo:        #f6f4f3;
  --color-fondo-rgb:    246,244,243;      /* sin rgb(), solo "245,234,208" */
  --color-texto:        #3b2720;
  --color-texto-rgb:    59,39,32;
  --color-texto-2:      #262221;        /* texto secundario/cuerpo (independiente de acento-2) */
  --color-texto-3:      #865e52;        /* texto de eyebrow (independiente de acento) */
  --color-subtitulo:    #865e52;      /* color propio de .subtitulo, independiente de texto-3 */
  --color-acento:       #c04d2a;
  --color-acento-2:     #9f882d;
  --color-acento-3:     #c9406e;
  --color-superficie:   #ece6e4;
  --color-borde:        #d7c6c1;
  --color-borde-rgb:    215,198,193;
  --color-verde:        #7A9E6A;          /* para botón WA y acentos positivos */
  --color-contraste:    #ffffff;       /* texto (blanco/negro) que mejor lee sobre --color-acento */
  --color-contraste-2:  #000000;     /* ídem, sobre --color-acento-2 */
  --color-contraste-3:  #ffffff;     /* ídem, sobre --color-acento-3 */

  /* ── Paleta Tienda (mod-tienda) ──
     Independiente de los acentos generales pero con default tomado de
     ahí (acento-2/3/1) — editable aparte solo si el proyecto lo pisa en
     Identidad → Paleta Tienda. */
  --color-tienda-activo:     #9f882d;     /* categoría activa (cat-grid/sidebar) */
  --color-tienda-destacado:  #c9406e;  /* badge cantidad, selector en-carrito, FAB "Ver carrito" */
  --color-tienda-cerrar:     #c04d2a;     /* fondo del botón cerrar del overlay */

  /* ── Tipografía ── */
  --fuente-display:     'Playfair Display', serif;
  --fuente-cuerpo:      'Outfit', sans-serif;
  --fuente-subtitulo:   'Outfit', sans-serif;   /* alias a fuente-display o fuente-cuerpo, elegible en Apariencia */

  /* Ajuste global de tamaño (Apariencia → selector +/- junto a cada fuente).
     Se suma con calc() a cada título/cuerpo del sitio — no reemplaza el
     clamp() fluido de cada Hero, lo desplaza entero. Guardado por familia
     tipográfica, no es un valor fijo. */
  --ajuste-titulo:      0rem;
  --ajuste-cuerpo:      0rem;
  --ajuste-eyebrow:         0rem;
  --ajuste-espacio-eyebrow: 0rem;
  --ajuste-subtitulo:       0rem;

  /* Mayúsculas/Itálica por rol — editable en Identidad → Tipografía */
  --eyebrow-transform:      uppercase;    /* none | uppercase */
  --eyebrow-style:          normal;        /* normal | italic */
  --titulo-transform:       none;
  --titulo-style:           italic;
  --subtitulo-transform:    uppercase;
  --subtitulo-style:        normal;
  --cuerpo-transform:       none;
  --cuerpo-style:           normal;

  /* ── Escala tipográfica (fija, no token) ── */
  --texto-xs:   0.6875rem;   /* 11px */
  --texto-sm:   0.8125rem;   /* 13px */
  --texto-md:   1.0625rem;   /* 17px */
  --texto-lg:   1.25rem;     /* 20px */
  --texto-xl:   1.75rem;     /* 28px */
  --texto-2xl:  2.5rem;      /* 40px */

  /* ── Espaciado (fijo, no token) ── */
  --espacio-xs:   8px;
  --espacio-sm:   16px;
  --espacio-md:   24px;
  --espacio-lg:   48px;
  --espacio-xl:   80px;
  --espacio-2xl:  120px;

  /* ── Secciones ── */
  --sec-v:  52px;   /* padding vertical de secciones */
  --sec-h:  24px;   /* padding horizontal mobile */

  /* ── Layout: contenedor de contenido ──
     Ancho máximo y padding lateral estándar para nav, secciones y footer.
     Fuente única: cambiar acá afecta todo el sitio, módulos actuales y futuros. */
  --ancho-contenido: 1100px;
  --contenedor-pad:  var(--sec-h);

  /* ── Componentes ── */
  --radio:       2px;    /* e.g. "2px", "8px", "0px" */
  --transicion:  0.25s ease;
  --sombra-box:  0 8px 40px rgba(var(--color-texto-rgb), 0.10);
  --nav-h:       80px;     /* e.g. "80px" */

  /* ── Texturas SVG (inyectadas por base/texturas.js en runtime) ── */
  /* --t6-h, --t6-v, --t8-h, --t8-v, --t2 se definen por JS */

}

/* --contenedor-pad por breakpoint — único lugar donde se define el padding
   lateral estándar de tablet y desktop para cualquier módulo. */
@media (min-width: 768px)  { :root { --contenedor-pad: var(--espacio-lg);  } }
@media (min-width: 1024px) { :root { --contenedor-pad: var(--espacio-2xl); } }


/* reset.css · Landing Machine · base layer */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:focus:not(:focus-visible) { outline: none; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  background:    var(--color-fondo);
  color:         var(--color-texto);
  font-family:   var(--fuente-cuerpo);
  font-weight:   300;
  font-size:     calc(var(--texto-md) + var(--ajuste-cuerpo, 0rem));
  line-height:   1.7;
  overflow-x:    hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Carga suave */
html       { opacity: 0; }
html.listo { opacity: 1; transition: opacity 0.25s ease; }

img    { display: block; max-width: 100%; height: auto; object-fit: cover; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
input  { font-family: inherit; font-size: inherit; }

/* Scrollbar oculta — navegación por ruedita/teclado/touch */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

/* Contenedor estándar — usar en todo módulo (nav, secciones, footer) para que
   su ancho quede alineado con el resto del sitio. Aplicar .lm-contenedor-pad
   al elemento externo (fondo/full-bleed) y .lm-contenedor al interno
   (contenido). Cambiar ancho o padding se hace en una sola línea en
   base/variables.css — nunca hardcodear estos valores en un módulo. */
.lm-contenedor-pad { padding-inline: var(--contenedor-pad); }
.lm-contenedor      { max-width: var(--ancho-contenido); margin-inline: auto; }


/* tipografia.css · Landing Machine · base layer */

h1, h2, h3 {
  font-family:    var(--fuente-display);
  font-weight:    500;
  font-style:     var(--titulo-style, italic);
  text-transform: var(--titulo-transform, none);
  line-height:    1.05;
  color:          inherit;
}

/* Etiqueta de sección: "El espacio", "Las clases", etc. */
.seccion-label {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-eyebrow, 0rem));
  font-weight:    500;
  letter-spacing: 0.28em;
  text-transform: var(--eyebrow-transform, uppercase);
  font-style:     var(--eyebrow-style, normal);
  color:          var(--color-texto-3);
  opacity:        0.60;
  display:        flex;
  align-items:    center;
  gap:            var(--espacio-sm);
  margin-bottom:  calc(var(--espacio-md) + var(--ajuste-espacio-eyebrow, 0rem));
}

.seccion-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-borde);
}

.seccion__titulo {
  font-size: calc(var(--texto-2xl) - 2px + var(--ajuste-titulo, 0rem));
}

.seccion__intro {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:    1.80;
  color:          var(--color-texto-2);
  margin-top:     var(--espacio-sm);
  text-transform: var(--cuerpo-transform, none);
  font-style:     var(--cuerpo-style, normal);
}

.eyebrow {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-eyebrow, 0rem));
  font-weight:    500;
  letter-spacing: 0.28em;
  text-transform: var(--eyebrow-transform, uppercase);
  font-style:     var(--eyebrow-style, normal);
  display:        block;
}

/* Subtítulo: tipo propio (Apariencia → Subtítulo), reusable por cualquier
   módulo. Fuente/tamaño/mayúsculas/color independientes de título, cuerpo
   y eyebrow — agregar esta clase alcanza para heredar los 4 controles. */
.subtitulo {
  font-family:    var(--fuente-subtitulo, var(--fuente-display));
  font-style:     var(--subtitulo-style, italic);
  font-weight:    400;
  font-size:      calc(var(--texto-lg) + var(--ajuste-subtitulo, 0rem));
  line-height:    1.3;
  text-transform: var(--subtitulo-transform, none);
  color:          var(--color-subtitulo);
}

/* Secciones */
.seccion { padding: 32px var(--sec-h) var(--sec-v); }

@media (min-width: 768px) {
  .seccion { min-height: 100vh; min-height: 100svh; }
}

.grid-2 {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--espacio-lg);
}


/* botones.css · Landing Machine · base layer
   Todos los estilos de botones van acá. Los módulos NO definen botones propios. */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--espacio-xs);
  font-family:     var(--fuente-cuerpo);
  font-size:       calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:     500;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  padding:         13px 26px;
  border-radius:   var(--radio);
  transition:      opacity var(--transicion), background var(--transicion), border-color var(--transicion);
  white-space:     nowrap;
  line-height:     1;
  cursor:          pointer;
  border:          1px solid transparent;
}

/* Sólido — color acento */
.btn--primario {
  background: var(--color-acento);
  color:      var(--color-contraste);
}
.btn--primario:hover { opacity: 0.85; }

/* Ghost — sobre fotos oscuras */
.btn--ghost {
  font-family:  var(--fuente-display);
  font-style:   italic;
  font-weight:  600;
  font-size:    calc(1.05rem + var(--ajuste-cuerpo, 0rem));
  letter-spacing: 0.01em;
  text-transform: none;
  padding:      11px 28px;
  background:   transparent;
  color:        #fff;
  border-color: rgba(255,255,255,0.45);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.80);
  background:   rgba(255,255,255,0.08);
  opacity:      1;
}

/* Outline — sobre fondos claros */
.btn--outline {
  background:  transparent;
  color:       var(--color-acento);
  border-color: var(--color-acento);
}
.btn--outline:hover { background: var(--color-acento); color: var(--color-contraste); opacity: 1; }

/* Enviar formulario */
.btn--enviar {
  width:      100%;
  background: var(--color-acento);
  color:      var(--color-contraste);
  padding:    15px 24px;
  font-size:  calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  letter-spacing: 0.10em;
}
.btn--enviar:hover   { opacity: 0.85; }
.btn--enviar:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}


/* Modal genérico — usado por privacidad (form y footer) */

.privacidad-trigger {
  font-size:             calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:                 var(--color-acento);
  text-decoration:       underline;
  text-underline-offset: 2px;
  cursor:                pointer;
}

.modal {
  position:        fixed;
  inset:           0;
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--espacio-sm);
  visibility:      hidden;
  opacity:         0;
  transition:      opacity 0.22s ease, visibility 0s linear 0.22s;
}
.modal--visible {
  visibility: visible;
  opacity:    1;
  transition: opacity 0.22s ease;
}

.modal__overlay {
  position:                    absolute;
  inset:                       0;
  background:                  rgba(0,0,0,0.55);
  backdrop-filter:             blur(4px);
  -webkit-backdrop-filter:     blur(4px);
}

.modal__card {
  position:       relative;
  z-index:        1;
  background:     var(--color-fondo);
  width:          100%;
  max-width:      640px;
  max-height:     84vh;
  display:        flex;
  flex-direction: column;
  border-radius:  calc(var(--radio) + 4px);
  overflow:       hidden;
  box-shadow:     0 24px 64px rgba(0,0,0,0.22);
  transform:      translateY(12px);
  transition:     transform 0.22s ease;
}
.modal--visible .modal__card { transform: translateY(0); }

.modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--espacio-md);
  padding:         var(--espacio-md) var(--espacio-md) var(--espacio-sm);
  border-bottom:   1px solid rgba(var(--color-borde-rgb), 0.10);
  flex-shrink:     0;
  background:      var(--color-fondo);
}

.modal__titulo {
  font-family: var(--fuente-display);
  font-size:   calc(var(--texto-xl) + var(--ajuste-titulo, 0rem));
  font-weight: 500;
  font-style:  italic;
  color:       var(--color-acento);
}

.modal__cerrar {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       32px;
  height:      32px;
  flex-shrink: 0;
  color:       var(--color-texto);
  opacity:     0.50;
  transition:  opacity var(--transicion);
}
.modal__cerrar:hover { opacity: 1; }

.modal__cuerpo {
  overflow-y:                    auto;
  padding:                       var(--espacio-md);
  scrollbar-width:               none;
  -webkit-overflow-scrolling:    touch;
}
.modal__cuerpo::-webkit-scrollbar { display: none; }

.modal__intro {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:    1.75;
  color:          var(--color-texto);
  margin-bottom:  var(--espacio-md);
  padding-bottom: var(--espacio-sm);
  border-bottom:  1px solid rgba(var(--color-borde-rgb), 0.08);
}

.modal__seccion            { margin-bottom: var(--espacio-sm); }
.modal__seccion:last-child { margin-bottom: 0; }

.modal__seccion-titulo {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-acento);
  margin-bottom:  6px;
}

.modal__texto {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.75;
  color:       var(--color-texto);
}

.modal__lista {
  font-size:    calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:  1.75;
  color:        var(--color-texto);
  margin-top:   4px;
  padding-left: var(--espacio-sm);
  list-style:   disc;
}

.modal__campo-vacio { font-style: italic; opacity: 0.45; }

.modal__pie {
  font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:       var(--color-texto);
  opacity:     0.55;
  margin-top:  var(--espacio-md);
  padding-top: var(--espacio-sm);
  border-top:  1px solid rgba(var(--color-borde-rgb), 0.08);
  line-height: 1.6;
}
.modal__pie a { color: var(--color-acento); }


/* zoom-foto.css · Landing Machine · base layer
 * Visor de foto a pantalla completa con zoom/pan propio (pellizco, rueda,
 * arrastre, doble tap), tope de zoom calculado según la resolución real
 * de cada foto — nunca deja acercarse más allá del punto donde deja de
 * haber detalle real. Un solo fondo continuo (--color-fondo) en toda la
 * superficie: la foto nunca deja ver un color distinto alrededor, sea
 * cual sea su proporción. Motor en base/zoom-foto.js (window.ZoomFoto).
 *
 * Reusa los tokens globales de variables.css — no define paleta propia —
 * para que cualquier módulo que lo llame respete la Identidad del
 * proyecto que lo usa.
 *
 * Creado: 11/8/2026, a partir del prototipo probado en tienda-02/Eugenio
 * Atelier (obra + zoom).
 */

.zoom-foto {
  position: fixed;
  inset: 0;
  z-index: 510; /* por encima de .modal (base/modal.css, 500) */
  background: var(--color-fondo);
  display: none;
  touch-action: none; /* el pellizco del navegador nunca compite con el propio */
}
.zoom-foto[data-open] { display: flex; flex-direction: column; }

.zoom-foto__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}
.zoom-foto__viewport:active { cursor: grabbing; }
.zoom-foto__viewport img {
  position: absolute;
  top: 50%; left: 50%;
  will-change: transform;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}

.zoom-foto__cerrar {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 42px; height: 42px;
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(var(--color-texto-rgb), .18);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  z-index: 5;
  transition: transform var(--transicion, .25s ease);
}
.zoom-foto__cerrar:hover { transform: scale(1.05); }
.zoom-foto__cerrar:active { transform: scale(1); }

/* Franja continua abajo, de lado a lado: info de la foto a la izquierda
   (una línea por dato), lectura del zoom a la derecha. */
.zoom-foto__infobar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: color-mix(in srgb, var(--color-fondo) 85%, transparent);
  padding: 14px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  z-index: 5;
}
.zoom-foto__info { color: var(--color-texto-2); font-size: var(--texto-xs); }
.zoom-foto__info p { margin: 0; }
.zoom-foto__lectura {
  color: var(--color-texto-2);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .zoom-foto__cerrar { transition: none; }
}


/* nav-01 · Nav fija superior · hamburguesa izquierda mobile */

body { padding-top: var(--nav-h); }

nav#nav {
  position:         fixed;
  top: 0; left: 0; right: 0;
  z-index:          100;
  height:           var(--nav-h);
  background-color: rgba(var(--nav-fondo-rgb, var(--color-fondo-rgb)), var(--nav-fondo-opacidad, 0.94));
  background-image: var(--t6-h), var(--t6-v);
  backdrop-filter:        blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.07);
}

.nav__inner {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Mobile: padding propio, más angosto que el estándar .lm-contenedor-pad
   (sin tocar — layout mobile ya validado) */
@media (max-width: 767px) {
  nav#nav { padding-inline: 14px; }
}

.nav__logo {
  display:     flex;
  align-items: center;
  height:      100%;
  flex:        1;
  padding-left: var(--espacio-xs);
}

.logo-img {
  height: 44px;
  width:  auto;
  display: block;
}

/* Links: ocultos en mobile, visibles desde tablet */
.nav__links { display: none; }

.nav__social {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.nav__social .footer__icon-link { width: 30px; height: 30px; }

/* Hamburguesa: va primero (izquierda) en mobile */
.nav__toggle {
  width:           40px;
  height:          40px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  flex-shrink:     0;
  order:           -1;
}

.nav__toggle-icon { display: block; color: var(--color-texto); }

.nav__toggle .bar {
  transition:      transform var(--transicion), opacity var(--transicion);
  transform-box:   fill-box;
  transform-origin: center;
}

.nav--abierto .nav__toggle .bar--1 { transform: translateY(6px)  rotate(45deg); }
.nav--abierto .nav__toggle .bar--2 { opacity: 0; }
.nav--abierto .nav__toggle .bar--3 { transform: translateY(-6px) rotate(-45deg); }

/* Menú mobile: panel desde esquina superior izquierda */
.nav__menu-mobile {
  position:         fixed;
  top:              var(--nav-h);
  left:             14px;
  width:            190px;
  background-color: rgba(var(--nav-fondo-rgb, var(--color-fondo-rgb)), var(--nav-fondo-opacidad, 0.98));
  backdrop-filter:        blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right:  1px solid rgba(var(--color-borde-rgb), 0.07);
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.07);
  border-radius: 0 0 var(--radio) var(--radio);
  padding:        var(--espacio-sm) var(--espacio-md) var(--espacio-md);
  flex-direction: column;
  z-index:        99;
  display:        flex;
  visibility:     hidden;
  opacity:        0;
  transform:      translateY(-8px);
  transition:     opacity var(--transicion), transform var(--transicion), visibility 0s linear 0.25s;
  pointer-events: none;
}

.nav__menu-mobile a {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.2;
  font-weight: 400;
  text-align:  center;
  padding:     10px 0;
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.08);
  transition:  opacity var(--transicion), color var(--transicion);
}

.nav__menu-mobile a.activo {
  color:       var(--color-acento);
  font-weight: 600;
}

.nav__menu-mobile a:last-child { border-bottom: none; }
.nav__menu-mobile a:hover      { opacity: 0.65; }

/* Link destacado (ej. Tienda) — misma mancha de acuarela que en desktop.
   display:inline-block para que el blob abrace el texto, no todo el ancho
   del panel (que es angosto, 220px, y quedaría un rectángulo pegado). */
.nav__menu-mobile a.nav__link--destacado {
  display:     inline-block;
  position:    relative;
  font-weight: 700;
  border-bottom: none;
}
.nav__menu-mobile a.nav__link--destacado::before {
  content:       '';
  position:      absolute;
  inset:         -2px -10px;
  z-index:       -1;
  background:    radial-gradient(ellipse at 38% 42%,
                    color-mix(in srgb, var(--color-acento) 55%, transparent) 0%,
                    color-mix(in srgb, var(--color-acento) 28%, transparent) 45%,
                    transparent 72%);
  border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
  filter:        blur(1px);
  transform:     rotate(-3deg);
}

.nav--abierto   .nav__menu-mobile,
.nav--cerrando  .nav__menu-mobile {
  visibility:     visible;
  pointer-events: auto;
  transition:     opacity var(--transicion), transform var(--transicion);
}

.nav--abierto .nav__menu-mobile {
  opacity:   1;
  transform: translateY(0);
}

.nav--cerrando .nav__menu-mobile {
  opacity:   0;
  transform: translateY(-8px);
}

/* Íconos sociales (compartidos con footer) */
.footer__icon-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  transition:      opacity var(--transicion);
  color:           var(--color-texto);
}

.footer__icon-link:hover { opacity: 0.65; }

.footer__icon-share { margin-left: -4px; }

/* Modo "con color" (toggle desde el builder) — cada red usa su color de marca
   en vez de heredar currentColor. Compartir queda siempre neutro. */
.footer__icon-link--color.footer__icon-wa       { color: #25D366; }
.footer__icon-link--color.footer__icon-ig       { color: #E1306C; }
.footer__icon-link--color.footer__icon-fb       { color: #1877F2; }
.footer__icon-link--color.footer__icon-tiktok   { color: #000000; }
.footer__icon-link--color.footer__icon-yt       { color: #FF0000; }
.footer__icon-link--color.footer__icon-linkedin { color: #0A66C2; }

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .nav__toggle      { display: none; }
  .nav__menu-mobile { display: none !important; }

  .nav__logo { flex: none; }

  .nav__links {
    display:     flex;
    align-items: center;
    gap:         var(--espacio-md);
    flex:        1;
    justify-content: center;
  }

  .nav__links a {
    font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:     4px 0;
    transition:  opacity var(--transicion);
    position:    relative;
  }

  .nav__links a::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    left:       0;
    width:      0;
    height:     1px;
    background: var(--color-acento);
    transition: width var(--transicion);
  }

  .nav__links a:hover::after,
  .nav__links a.activo::after { width: 100%; }
  .nav__links a:hover         { opacity: 0.75; }
  .nav__links a.activo        { color: var(--color-acento); opacity: 1; }

  /* Link destacado (ej. Tienda) — mancha de acuarela en vez del subrayado */
  .nav__links a.nav__link--destacado {
    font-weight: 700;
    padding:     5px 14px;
  }
  .nav__links a.nav__link--destacado::before {
    content:       '';
    position:      absolute;
    inset:         -5px -8px;
    z-index:       -1;
    background:    radial-gradient(ellipse at 38% 42%,
                      color-mix(in srgb, var(--color-acento) 55%, transparent) 0%,
                      color-mix(in srgb, var(--color-acento) 28%, transparent) 45%,
                      transparent 72%);
    border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
    filter:        blur(1px);
    transform:     rotate(-3deg);
  }
  .nav__links a.nav__link--destacado::after { display: none; }
  .nav__links a.nav__link--destacado.activo { color: var(--color-texto); }
}

/* ── Desktop (1024px) ── */
@media (min-width: 1024px) {
  .logo-img { height: 50px; }
}


/* hero-06 · Solo carrusel de fotos · sin texto, fondo de color configurable
   Fotos propias por dispositivo, las dos con object-fit:contain (sin
   recortar) — celu ancla arriba (el sobrante de alto queda abajo, nunca
   tapando el nav), compu/tablet queda centrado. */

.hero-06 {
  position: relative;
  width:    100%;
  height:   calc(100svh - var(--nav-h));
  overflow: hidden;
}

.hero-06.con-textura::after {
  content:          '';
  position:         absolute;
  inset:            0;
  z-index:          1;
  background-image: var(--t6-h), var(--t6-v);
  pointer-events:   none;
}

.hero-06__carrusel {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.hero-06__foto {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      contain;
  object-position: center top;
  opacity:         0;
  transition:      opacity 1.2s ease;
}

.hero-06__foto.activa { opacity: 1; }

/* Mobile-first: se muestran las fotos de celu, las de compu/tablet quedan ocultas */
.hero-06__foto--desktop { display: none; }

@media (min-width: 768px) {
  .hero-06__foto--mobile  { display: none; }
  .hero-06__foto--desktop { display: block; object-fit: contain; object-position: center; }
}


/*
 * mod-tienda/tienda-02/styles.css
 * Variante "galería de arte" — obra + formatos (postal/imán/A4/original)
 * Mobile-first. Breakpoints: 768px / 1024px
 * Basado en tienda-01: secciones 1/2/3/6+ son el mismo componente
 * (drawer, checkout, fab, cat-grid, overlay, sidebar). Solo cambian
 * las secciones 4 y 5 (catálogo + tarjeta) y se suma el lightbox.
 */

/* ============================================================
   1. VARIABLES
   Definidas en :root (no solo en .tienda) porque la sección Galería
   vive fuera del overlay de la Tienda, como hermana en la página —
   si quedaran solo en .tienda, Galería no las heredaría (las variables
   CSS solo bajan a descendientes) y todo var(--t-*) que use ahí se
   descarta en silencio.
   ============================================================ */
:root, .tienda {
  --t-fondo:       var(--color-fondo,       #fafaf7);
  --t-superficie:  var(--color-superficie,  #f0ede6);
  --t-borde:       var(--color-borde,       #e0dbd2);
  --t-texto:       var(--color-texto,       #1a1a1a);
  --t-texto-suave: var(--color-texto-suave, #666);
  --t-acento:      var(--color-acento,      #2d6a4f);
  --t-acento-txt:  var(--color-acento-txt,  #fff);
  --t-error:       #c0392b;
  --t-agotado:     #999;
  --t-cat-activo:  #e8590c;
  --t-cat-carrito: #f5a623;

  --t-radio:    var(--radio-borde, 8px);
  --t-radio-sm: calc(var(--t-radio) * 0.6);
  --t-fuente:   var(--fuente-cuerpo, 'Outfit', system-ui, sans-serif);

  --t-shadow: 0 2px 12px rgba(0,0,0,.08);
  --t-shadow-lg: 0 8px 32px rgba(0,0,0,.14);

  --t-transition: 260ms cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   2. BASE DEL MÓDULO
   ============================================================ */
.tienda {
  position: relative;
  min-height: 100svh;
  background: var(--t-fondo);
  font-family: var(--t-fuente);
  color: var(--t-texto);
  padding-bottom: 88px;
}

.tienda h2,
.tienda h3 {
  font-family: var(--t-fuente);
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

/* ============================================================
   3. GRILLA DE CATEGORÍAS (idéntico a tienda-01)
   ============================================================ */
.tienda__cat-zona {
  position: sticky;
  top: var(--t-topbar, 60px);
  z-index: 9;
  background: var(--t-fondo);
}

.tienda__cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 7px 8px 5px;
}

.tienda__cat-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--t-radio);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: box-shadow var(--t-transition);
}

.tienda__cat-item-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.tienda__cat-item--en-carrito {
  box-shadow: 0 0 0 2px var(--t-cat-carrito);
}

.tienda__cat-item--activo {
  box-shadow: 0 0 0 3px var(--t-cat-activo);
}

.tienda__cat-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--t-cat-carrito);
  color: #1a1a1a;
  font-size: .68rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.tienda__cat-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 4px 3px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  font-size: .58rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.tienda__cat-nombre-bar {
  padding: 6px 10px;
  min-height: 28px;
  background: var(--t-superficie);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tienda__cat-nombre-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--t-texto);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tienda__cat-busca-limpiar {
  flex-shrink: 0;
  margin-left: 5px;
  padding: 0 2px;
  border: none;
  background: transparent;
  color: var(--t-texto-suave);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}

/* Input de búsqueda: arranca en ancho 0 sobre el espacio del label,
   se expande al clickear la lupa (clase --buscando en el wrapper) */
.tienda__cat-busca-input {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--t-fuente);
  font-size: .82rem;
  color: var(--t-texto);
  outline: none;
  transition: flex-basis var(--t-transition), padding var(--t-transition);
}
.tienda__cat-busca-input::placeholder { color: var(--t-texto-suave); }

.tienda__cat-nombre-bar--buscando .tienda__cat-nombre-label { display: none; }
.tienda__cat-nombre-bar--buscando .tienda__cat-busca-input {
  flex: 1 1 auto;
  width: auto;
  padding: 4px 2px;
}

.tienda__cat-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tienda__cat-busca-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-texto-suave);
  cursor: pointer;
  flex-shrink: 0;
}
.tienda__cat-nombre-bar--buscando .tienda__cat-busca-toggle { color: var(--t-acento); }

/* ── Filtro Lugar/Año: select compacto propio (trigger + lista, sin
   <select> nativo detrás — no hay envío de formulario acá) ── */
.tf-sel {
  position: relative;
}

.tf-sel__trigger {
  max-width: 88px;
  padding: 4px 8px;
  border: 1px solid var(--t-borde);
  border-radius: 999px;
  background: var(--t-fondo);
  color: var(--t-texto-suave);
  font-family: var(--t-fuente);
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--t-transition), color var(--t-transition);
}

.tf-sel--activo .tf-sel__trigger,
.tf-sel--abierto .tf-sel__trigger {
  border-color: var(--t-acento);
  color: var(--t-acento);
}

.tf-sel__drop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 130px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--t-fondo);
  border: 1.5px solid var(--t-borde);
  border-radius: var(--t-radio-sm);
  box-shadow: var(--t-shadow-lg);
  z-index: 200;
  padding: 4px 0;
}

.tf-sel__opt {
  padding: 8px 12px;
  font-size: .82rem;
  color: var(--t-texto);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-transition);
}
.tf-sel__opt:hover { background: var(--t-superficie); }
.tf-sel__opt--sel  { font-weight: 700; color: var(--t-acento); }

.tienda__cat-banner {
  display: none;
}

/* ============================================================
   3b. VARIANTE ALTERNATIVA — ícono en vez de foto (mobile)
   Se activa con la clase .tienda__cat-grid--iconos (config del
   proyecto, cat_estilo='icono'). El modo foto de arriba queda intacto.
   ============================================================ */
.tienda__cat-zona-inner {
  position: relative;
}

.tienda__cat-grid--iconos {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.tienda__cat-grid--iconos::-webkit-scrollbar { display: none; }

.tienda__cat-grid--iconos .tienda__cat-item {
  flex: 0 0 auto;
  width: 68px;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 2px 6px;
  background: var(--t-superficie);
  box-shadow: none;
}

/* Pista de que hay más categorías a la derecha — visible unos segundos
   al entrar, se apaga sola o al primer scroll del usuario */
.tienda__cat-scroll-hint {
  position: absolute;
  top: 20px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(to right, transparent, var(--t-fondo) 55%);
  color: var(--t-acento);
  pointer-events: none;
  animation: tienda-cat-hint-pulso 1.1s ease-in-out 3;
}
.tienda__cat-scroll-hint[hidden] { display: none; }
.tienda__cat-scroll-hint--apagado {
  animation: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

@keyframes tienda-cat-hint-pulso {
  0%, 100% { opacity: .35; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(3px); }
}

.tienda__cat-grid--iconos .tienda__cat-item-icono {
  width: 26px;
  height: 26px;
  color: var(--t-texto-suave);
}
.tienda__cat-grid--iconos .tienda__cat-item-icono svg {
  width: 100%;
  height: 100%;
}

.tienda__cat-grid--iconos .tienda__cat-label {
  position: static;
  background: none;
  text-shadow: none;
  color: var(--t-texto);
  font-size: .6rem;
  font-weight: 600;
  white-space: normal;
  line-height: 1.15;
  padding: 0 2px;
  text-align: center;
}

.tienda__cat-grid--iconos .tienda__cat-item--activo {
  box-shadow: none;
  background: var(--t-cat-activo);
}
.tienda__cat-grid--iconos .tienda__cat-item--activo .tienda__cat-item-icono,
.tienda__cat-grid--iconos .tienda__cat-item--activo .tienda__cat-label {
  color: #fff;
}

.tienda__cat-grid--iconos .tienda__cat-item--en-carrito:not(.tienda__cat-item--activo) {
  background: color-mix(in srgb, var(--t-cat-carrito) 30%, var(--t-superficie));
}

.tienda__cat-grid--iconos .tienda__cat-badge {
  top: 2px;
  right: 2px;
}

/* ============================================================
   4. CATÁLOGO — 1 obra por fila en mobile (efecto galería)
   ============================================================ */
.tienda__catalogo {
  padding: 14px 10px 0;
}

.tienda__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* ============================================================
   5. TARJETA DE OBRA — foto protagonista + ficha compacta debajo
   ============================================================ */
.tienda__card {
  background: var(--t-fondo);
  border-radius: var(--t-radio);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* Foto: botón (abre el lightbox), aspect-ratio alto para que domine la
   card sin depender de unidades de viewport dentro de un grid que scrollea */
.tienda__card-foto {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--t-superficie);
  cursor: zoom-in;
}

/* Sin aspect-ratio forzado: la foto se muestra a su proporción real
   (apaisada o vertical), a ancho completo — nunca se recorta */
.tienda__card-foto img {
  width: 100%;
  height: auto;
  display: block;
}

/* Solo el placeholder (sin foto todavía) necesita una proporción propia,
   ya que sin <img> la caja no tiene alto intrínseco */
.tienda__card-foto-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--t-acento) 30%, var(--t-borde));
}
.tienda__card-foto-placeholder svg {
  width: 32px;
  height: 32px;
}

/* Franja inferior comprimida: nombre + ficha técnica + motivo/lugar +
   formatos + acción, todo visible de una sin abrir nada aparte */
.tienda__card-info {
  padding: 14px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tienda__obra-nombre {
  font-family: var(--fuente-display, var(--t-fuente));
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--t-texto);
  margin: 0;
}

.tienda__obra-ficha {
  font-size: .74rem;
  line-height: 1.3;
  color: var(--t-texto-suave);
  margin: 0;
}

.tienda__obra-motivo {
  font-size: .78rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--t-texto-suave);
  margin: 0;
}

/* Formatos: grid de 1 sola fila, las 4 columnas se reparten el ancho
   disponible completo — nunca se escapa de pantalla, a diferencia de
   una fila con scroll */
.tienda__formatos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 3px;
}

/* Cada unidad = badge (info) + acción (Agregar/stepper) apilados */
.tienda__formato-unidad {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tienda__formato-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 8px;
  border-radius: var(--t-radio-sm);
  border: 1.5px solid var(--t-borde);
  background: var(--t-fondo);
  font-family: var(--t-fuente);
  transition: border-color var(--t-transition), background var(--t-transition);
}

.tienda__formato-chip-nombre {
  font-size: .68rem;
  font-weight: 600;
  color: var(--t-texto);
  line-height: 1.15;
  text-align: center;
}

.tienda__formato-chip-medida {
  font-size: .6rem;
  color: var(--t-texto-suave);
  line-height: 1.1;
  text-align: center;
}

.tienda__formato-chip-precio {
  font-size: .68rem;
  color: var(--t-texto-suave);
  line-height: 1.15;
  text-align: center;
}

/* Formato ya agregado al carrito — mismo ámbar que el resto de la
   tienda (cat-grid en-carrito, qty de card en tienda-01) */
.tienda__formato-chip--en-carrito {
  border-color: var(--t-cat-carrito);
  background: color-mix(in srgb, var(--t-cat-carrito) 22%, var(--t-fondo));
}
.tienda__formato-chip--en-carrito .tienda__formato-chip-precio {
  color: var(--t-texto);
  font-weight: 600;
}

.tienda__formato-chip--agotado { opacity: .5; }

/* Total agregado de ese formato — esquina superior derecha del badge */
.tienda__formato-chip-total {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--t-cat-carrito);
  color: #1a1a1a;
  font-size: .64rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Acción debajo del badge: botón Agregar/Avisame o stepper una vez sumado */
.tienda__formato-btn-agregar,
.tienda__formato-btn-avisame {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--t-radio-sm);
  font-family: var(--t-fuente);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-transition);
}

.tienda__formato-btn-agregar {
  background: var(--t-acento);
  color: var(--t-acento-txt);
  font-size: .66rem;
}
.tienda__formato-btn-agregar:active { opacity: .82; }
.tienda__formato-btn-agregar:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.tienda__formato-btn-avisame {
  background: var(--t-superficie);
  color: var(--t-texto-suave);
  font-size: .6rem;
}
.tienda__formato-btn-avisame:active { opacity: .7; }
.tienda__formato-btn-avisame--feito {
  color: var(--t-acento);
  cursor: default;
  opacity: .85;
}

/* Original: pieza única, botón de sacarla del carrito en vez de stepper */
.tienda__formato-btn-quitar {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--t-error);
  border-radius: var(--t-radio-sm);
  background: none;
  color: var(--t-error);
  font-family: var(--t-fuente);
  font-size: .66rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-transition);
}
.tienda__formato-btn-quitar:active { opacity: .7; }

.tienda__formato-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  gap: 2px;
  background: var(--t-fondo);
  border-radius: var(--t-radio-sm);
  overflow: hidden;
}

.tienda__formato-qty-btn {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-cat-carrito);
  border: none;
  color: #1a1a1a;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.tienda__formato-qty-btn:active { background: rgba(0,0,0,.12); }

/* Control +/- cantidad — usado en el drawer del carrito */
.tienda__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  background: var(--t-superficie);
  border-radius: var(--t-radio);
  overflow: hidden;
}

.tienda__qty-btn {
  width: 38px;
  height: 100%;
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--t-acento);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-transition);
}
.tienda__qty-btn:active { background: var(--t-borde); }

.tienda__qty-num {
  font-size: .92rem;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}

/* ============================================================
   6. LIGHTBOX — movido a base/zoom-foto.css + base/zoom-foto.js
   (window.ZoomFoto), disponible para cualquier módulo de la LM.
   Ver Tienda.abrirLightbox() en carrito2.js.
   ============================================================ */

/* ============================================================
   7. FAB — BOTÓN CARRITO FLOTANTE (idéntico a tienda-01)
   ============================================================ */
.tienda__fab {
  position: fixed;
  bottom: 16px;
  left: 12px;
  right: 12px;
  z-index: 80;
}

/* En tablet/desktop .tienda__fab gana display:flex fijo (se acopla al
   header sticky) — sin esto, el atributo [hidden] que pone actualizarUI()
   al vaciar el carrito no oculta nada (el display de autor le gana al de
   user-agent, mismo bug ya documentado en lessons_desarrollo #36). Regla
   por ID para no depender del orden de las media queries de abajo. */
#tienda-fab[hidden] {
  display: none;
}

.tienda__fab-btn {
  width: 100%;
  height: 52px;
  background: var(--t-cat-carrito);
  color: var(--t-texto);
  border: none;
  border-radius: 999px;
  font-family: var(--t-fuente);
  font-size: .96rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  transition: opacity var(--t-transition);
}
.tienda__fab-btn:active { opacity: .88; }

.tienda__fab-total {
  font-size: .9rem;
  opacity: .9;
}

/* ============================================================
   8. DRAWER (carrito + checkout — idéntico a tienda-01)
   ============================================================ */
.tienda__drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-end;
}

.tienda__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.44);
}

.tienda__drawer-panel {
  position: relative;
  width: 100%;
  max-height: 90svh;
  background: var(--t-fondo);
  border-radius: var(--t-radio) var(--t-radio) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tienda__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--t-borde);
  flex-shrink: 0;
}

.tienda__panel-titulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.tienda__cerrar {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--t-texto-suave);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--t-radio-sm);
  transition: background var(--t-transition);
}
.tienda__cerrar:active { background: var(--t-superficie); }

.tienda__volver {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--t-radio-sm);
  color: var(--t-texto);
  display: flex;
  align-items: center;
  transition: background var(--t-transition);
}
.tienda__volver:active { background: var(--t-superficie); }

.tienda__drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tienda__item {
  display: flex;
  align-items: stretch;
  gap: 10px;
  border-bottom: 1px solid var(--t-borde);
  padding-bottom: 10px;
}
.tienda__item:last-child { border-bottom: none; padding-bottom: 0; }

.tienda__item-foto {
  width: 64px;
  height: 64px;
  border-radius: var(--t-radio-sm);
  background: var(--t-superficie);
  overflow: hidden;
  flex-shrink: 0;
}
.tienda__item-foto img { width: 100%; height: 100%; object-fit: cover; }

.tienda__item-foto-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.tienda__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tienda__item-top {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tienda__item-nombre {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tienda__item-formato {
  font-size: .74rem;
  line-height: 1.2;
  color: var(--t-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tienda__item-precio {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--t-acento);
  white-space: nowrap;
}

.tienda__item-derecha {
  flex-shrink: 0;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.tienda__item-subtotal-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.tienda__item-subtotal-label {
  font-size: .75rem;
  line-height: 1.2;
  color: var(--t-texto-suave);
}

.tienda__item-subtotal {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--t-acento);
  white-space: nowrap;
}

.tienda__drawer-footer {
  border-top: 1px solid var(--t-borde);
  padding: 14px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tienda__total-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.tienda__total-label {
  font-size: .92rem;
  font-weight: 500;
  color: var(--t-texto-suave);
}

.tienda__total-monto {
  font-size: 1.1rem;
  font-weight: 800;
}

.tienda__vaciar {
  background: none;
  border: none;
  font-size: .78rem;
  color: var(--t-error);
  cursor: pointer;
  text-decoration: underline;
  align-self: flex-start;
  padding: 0;
  font-family: var(--t-fuente);
}

/* ============================================================
   9. CHECKOUT FORM (idéntico a tienda-01)
   ============================================================ */
.tienda__form {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.tienda__form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tienda__form-group[hidden] { display: none; }

.tienda__form-group label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--t-texto-suave);
}

.tienda__form-group input,
.tienda__form-group select,
.tienda__form-group textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--t-borde);
  border-radius: var(--t-radio-sm);
  background: var(--t-superficie);
  font-family: var(--t-fuente);
  font-size: .92rem;
  color: var(--t-texto);
  outline: none;
  transition: border-color var(--t-transition);
  box-sizing: border-box;
}

.tienda__form-group input:focus,
.tienda__form-group select:focus,
.tienda__form-group textarea:focus {
  border-color: var(--t-acento);
  background: var(--t-fondo);
}

.tienda__form-group input.error,
.tienda__form-group select.error,
.tienda__form-group textarea.error {
  border-color: var(--t-error);
}

.tienda__form-group textarea { resize: vertical; min-height: 60px; }

.tienda__resumen {
  background: var(--t-superficie);
  border-radius: var(--t-radio-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tienda__resumen-titulo {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--t-texto-suave);
  margin-bottom: 4px;
}

.tienda__resumen-item {
  display: flex;
  justify-content: space-between;
  font-size: .86rem;
  gap: 8px;
}

.tienda__resumen-nombre {
  color: var(--t-texto);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tienda__resumen-precio {
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.tienda__resumen-total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: .96rem;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--t-borde);
}

.tienda__resumen-minimo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.tienda__resumen-minimo-label {
  font-size: .74rem;
  font-weight: 400;
  color: var(--t-texto-suave);
}

.tienda__resumen-minimo-falta {
  font-size: .84rem;
  font-weight: 700;
  color: var(--t-error);
}

.tienda__btn-principal {
  width: 100%;
  height: 50px;
  background: var(--t-acento);
  color: var(--t-acento-txt);
  border: none;
  border-radius: var(--t-radio-sm);
  font-family: var(--t-fuente);
  font-size: .96rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--t-transition);
  flex-shrink: 0;
}
.tienda__btn-principal:active { opacity: .84; }
.tienda__btn-principal:disabled { opacity: .5; cursor: not-allowed; }

.tienda__aviso-pago {
  font-size: .78rem;
  color: var(--t-texto-suave);
  text-align: center;
  margin: 0;
  flex-shrink: 0;
}

.tienda__form[hidden],
.tienda__gracias[hidden],
.tienda__panel-header[hidden] { display: none; }

/* ============================================================
   10. GRACIAS (idéntico a tienda-01)
   ============================================================ */
.tienda__gracias {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
}

.tienda__gracias-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--t-acento);
  color: var(--t-acento-txt);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tienda__gracias h3 { font-size: 1.2rem; font-weight: 800; margin: 0; }

.tienda__gracias p {
  color: var(--t-texto-suave);
  font-size: .9rem;
  margin: 0;
  max-width: 260px;
}

.tienda__gracias--saliendo { animation: tienda-fade-out 500ms forwards; }

/* ============================================================
   11. MODAL AVISAME (idéntico a tienda-01)
   ============================================================ */
.tienda__modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: flex-end;
}

.tienda__modal-panel {
  position: relative;
  width: 100%;
  background: var(--t-fondo);
  border-radius: var(--t-radio) var(--t-radio) 0 0;
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tienda__modal-panel .tienda__cerrar { position: absolute; top: 14px; right: 14px; }

.tienda__modal-emoji { font-size: 2rem; margin: 0 0 4px; }

.tienda__modal-titulo { font-size: 1rem; font-weight: 700; margin: 0; }

.tienda__modal-sub { font-size: .88rem; color: var(--t-texto-suave); margin: 0 0 8px; }

.tienda__aviso-ok {
  text-align: center;
  color: var(--t-acento);
  font-weight: 600;
  font-size: .9rem;
  padding: 12px 0;
}

/* #tienda-modal-pedido vive fuera de .tienda (hermano de #tienda-overlay —
   el banner que lo abre vive en la landing, afuera del overlay que arranca
   hidden) — sin esto, las variables --t-* no cascadean hasta acá (mismo bug
   ya documentado en .tienda-overlay__cerrar, 3/8/2026): panel sin fondo, sin
   bordes redondeados, texto heredado del body. Redeclarar --t-* en este
   scope alcanza para arreglar todo lo que ya usa var(--t-*) adentro (panel,
   botón cerrar, resumen de ítems) sin tocar .tienda__modal compartida, que
   sigue sirviendo bien al modal de Avisame (ese sí vive dentro de .tienda).
   De paso: z-index por encima del overlay de la tienda (300) — si no,
   queda tapado al abrirse desde el carrito — y centrado en todos los
   breakpoints en vez de bottom-sheet, es un resumen corto, no un formulario. */
#tienda-modal-pedido {
  --t-fondo:       var(--color-fondo,       #fafaf7);
  --t-superficie:  var(--color-superficie,  #f0ede6);
  --t-borde:       var(--color-borde,       #e0dbd2);
  --t-texto:       var(--color-texto,       #1a1a1a);
  --t-texto-suave: var(--color-texto-suave, #666);
  --t-error:       #c0392b;
  --t-radio:       var(--radio-borde, 8px);
  --t-radio-sm:    calc(var(--t-radio) * .6);
  --t-transition:  260ms cubic-bezier(.4,0,.2,1);

  z-index: 310;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#tienda-modal-pedido .tienda__modal-panel {
  width: min(360px, 100%);
  border-radius: var(--t-radio);
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 24px 20px 28px;
}

/* ============================================================
   12. LOADING / ERROR / SIN RESULTADOS (idéntico a tienda-01)
   ============================================================ */
.tienda__loading {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 60px 0;
}

.tienda__loading span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--t-borde);
  animation: tienda-pulse 1s ease-in-out infinite;
}
.tienda__loading span:nth-child(2) { animation-delay: .15s; }
.tienda__loading span:nth-child(3) { animation-delay: .3s; }

.tienda__error {
  text-align: center;
  padding: 48px 20px;
  color: var(--t-texto-suave);
  font-size: .9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tienda__error-btn {
  background: none;
  border: 1.5px solid var(--t-acento);
  color: var(--t-acento);
  border-radius: 999px;
  padding: 8px 20px;
  font-family: var(--t-fuente);
  font-size: .88rem;
  cursor: pointer;
}

.tienda__sin-resultados {
  text-align: center;
  padding: 48px 20px;
  color: var(--t-texto-suave);
  font-size: .9rem;
}

.tienda__carrito-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--t-texto-suave);
  font-size: .9rem;
  text-align: center;
}

.tienda__carrito-vacio-icon { font-size: 2.4rem; opacity: .4; }

/* ============================================================
   13. ANIMACIONES (idéntico a tienda-01)
   ============================================================ */
@keyframes tienda-pulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%       { opacity: 1;  transform: scale(1); }
}

@keyframes tienda-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes tienda-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tienda-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.tienda__drawer[data-open],
.tienda__modal[data-open] { display: flex; }

.tienda__drawer[data-open] .tienda__overlay,
.tienda__modal[data-open] .tienda__overlay {
  animation: tienda-fade-in var(--t-transition) both;
}

.tienda__drawer[data-open] .tienda__drawer-panel,
.tienda__modal[data-open] .tienda__modal-panel {
  animation: tienda-slide-up var(--t-transition) both;
}

/* ============================================================
   14. BANNER PEDIDO ACTIVO (idéntico a tienda-01)
   ============================================================ */
.tienda-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  background: var(--color-superficie, #f0ede6);
  border: 1px solid var(--color-borde, #e0dbd2);
  border-radius: 999px;
  font-size: .84rem;
  color: var(--color-texto, #1a1a1a);
  animation: tienda-fade-in 400ms both;
}
.tienda-banner__icono { font-size: 1rem; }
.tienda-banner__texto { flex: 1 1 auto; min-width: 0; }
.tienda-banner[hidden] { display: none; }
.tienda-banner--carrito { margin: 14px 16px 12px; }

.tienda-banner__detalhe {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--color-borde, #e0dbd2);
  border-radius: 999px;
  background: transparent;
  color: var(--color-texto, #1a1a1a);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-transition, .2s);
}
.tienda-banner__detalhe:active { background: rgba(0,0,0,.06); }

/* ============================================================
   15. MODAL ENCUESTA POST-ENTREGA (idéntico a tienda-01)
   ============================================================ */
.tienda-enc {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-fondo, #fafaf7);
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: tienda-fade-in 320ms both;
}
.tienda-enc[hidden] { display: none; }

.tienda-enc__inner {
  width: 100%;
  max-width: 480px;
  padding: 48px 28px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.tienda-enc__logo-wrap { margin-bottom: 32px; }

.tienda-enc__logo {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.tienda-enc__titulo {
  font-family: var(--fuente-display, inherit);
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 12px;
  color: var(--color-texto, #1a1a1a);
}

.tienda-enc__intro {
  font-size: .92rem;
  color: var(--color-texto-suave, #666);
  text-align: center;
  margin: 0;
  line-height: 1.55;
}

.tienda-enc__sep {
  width: 48px;
  border: none;
  border-top: 2px solid var(--color-acento, #2d6a4f);
  margin: 28px 0;
}

.tienda-enc__subtitulo {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-texto-suave, #666);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  margin: 0 0 20px;
}

.tienda-enc__preguntas {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.tienda-enc__pregunta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tienda-enc__preg-texto {
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-texto, #1a1a1a);
  text-align: center;
  margin: 0;
}

.tienda-enc__estrellas { display: flex; gap: 6px; }

.tienda-enc__estrella {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-borde, #e0dbd2);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  transition: color 160ms, transform 160ms;
}

.tienda-enc__estrella--activa,
.tienda-enc__estrella--hover { color: #f5a623; }

.tienda-enc__estrella:active { transform: scale(.9); }

.tienda-enc__campo { width: 100%; margin-bottom: 28px; }

.tienda-enc__textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-superficie, #f0ede6);
  border: 1.5px solid var(--color-borde, #e0dbd2);
  border-radius: 12px;
  font-family: var(--fuente-cuerpo, inherit);
  font-size: .9rem;
  color: var(--color-texto, #1a1a1a);
  resize: none;
  min-height: 80px;
  box-sizing: border-box;
}

.tienda-enc__textarea:focus {
  outline: none;
  border-color: var(--color-acento, #2d6a4f);
}

.tienda-enc__btn-enviar { width: 100%; margin-bottom: 12px; }

.tienda-enc__btn-omitir {
  background: none;
  border: none;
  font-family: var(--fuente-cuerpo, inherit);
  font-size: .84rem;
  color: var(--color-texto-suave, #666);
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tienda-enc--saliendo { animation: tienda-fade-out 600ms forwards; }

.tienda-enc__gracias {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60vh;
}

.tienda-enc__gracias-icono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-acento, #2d6a4f);
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tienda-enc__gracias-txt {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-texto, #1a1a1a);
  margin: 0;
  text-align: center;
}

/* ============================================================
   16. AVISO DE CONFLICTO DE STOCK (idéntico a tienda-01)
   ============================================================ */
.tienda__stock-conflicto {
  background: #fff8ed;
  border: 1.5px solid #f0a830;
  border-radius: var(--t-radio-sm);
  padding: 12px 14px;
  font-size: .85rem;
  color: var(--t-texto);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: tienda-fade-in 240ms both;
}

.tienda__stock-conflicto-titulo { font-weight: 700; margin: 0; }

.tienda__stock-conflicto ul {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tienda__stock-conflicto p:last-child {
  margin: 0;
  color: var(--t-texto-suave);
  font-size: .8rem;
}

/* ============================================================
   17. TABLET — @media (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
  .tienda__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .tienda__obra-nombre { font-size: 1.15rem; }

  .tienda__drawer {
    align-items: stretch;
    justify-content: flex-end;
  }

  .tienda__drawer-panel {
    width: 380px;
    max-height: 100svh;
    border-radius: var(--t-radio) 0 0 var(--t-radio);
  }

  .tienda__modal {
    align-items: center;
    justify-content: center;
  }

  .tienda__modal-panel {
    width: 420px;
    border-radius: var(--t-radio);
  }
}

/* ============================================================
   18. DESKTOP — @media (min-width: 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .tienda__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }

  .tienda__obra-nombre { font-size: 1.25rem; }
  .tienda__obra-ficha,
  .tienda__obra-motivo { font-size: .8rem; }

  .tienda__drawer[data-open] .tienda__drawer-panel {
    animation: tienda-fade-in var(--t-transition) both;
  }
}

/* ============================================================
   19. SECCIÓN TIENDA (card en la landing page — idéntico a tienda-01)
   ============================================================ */
.tienda-sec {
  padding: var(--sec-v) var(--sec-h);
  background-color: var(--color-superficie);
  text-align: center;
}

.tienda-sec.con-textura { background-image: var(--t6-h), var(--t6-v); }

.tienda-sec__inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tienda-sec .seccion-label {
  justify-content: center;
  color: var(--tsec-eyebrow, var(--color-texto-3));
}
.tienda-sec .seccion-label::after { display: none; }

.tienda-sec__titulo {
  font-family:    var(--fuente-display);
  font-style:     var(--titulo-style, italic);
  text-transform: var(--titulo-transform, none);
  font-weight:    500;
  font-size:      calc(var(--texto-2xl) + var(--ajuste-titulo, 0rem));
  line-height:    1.05;
  color:          var(--tsec-titulo, var(--color-texto));
  margin: 0 0 var(--espacio-sm);
}

.tienda-sec .subtitulo {
  color: var(--tsec-subtitulo, var(--color-subtitulo));
}

.tienda-sec__subtitulo {
  margin: 0 0 calc(var(--espacio-sm) + var(--tsec-espacio-subtitulo, 0rem));
}

.tienda-sec__desc {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  text-transform: var(--cuerpo-transform, none);
  font-style:     var(--cuerpo-style, normal);
  line-height:    1.80;
  color:          var(--tsec-desc, var(--color-texto-2));
  max-width: 44ch;
  margin: 0 0 var(--espacio-lg);
}

.tienda-sec__cta {
  --cta-acento: var(--tsec-cta-bg, var(--color-acento));
  position:       relative;
  font-family:    var(--fuente-display);
  font-style:     italic;
  font-size:      1.05rem;
  font-weight:    500;
  letter-spacing: 0.03em;
  text-transform: none;
  padding:        14px 40px;
  border-radius:  var(--radio);
  border:         none;

  background: var(--cta-acento);
  color: var(--tsec-cta-txt, var(--color-contraste));
  box-shadow: none;

  transition: background-color 0.25s ease;
}

.tienda-sec__cta:hover {
  background: color-mix(in srgb, var(--cta-acento) 85%, black);
}

.tienda-sec__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  background: var(--color-texto);
  color: var(--color-fondo);
  font-size: .64rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

@media (min-width: 768px) {
  .tienda-sec { padding: var(--espacio-xl) var(--espacio-lg); }
  .tienda-sec__titulo { font-size: calc(var(--texto-2xl) + 0.5rem + var(--ajuste-titulo, 0rem)); }
}

@media (min-width: 1024px) {
  .tienda-sec { padding: var(--espacio-xl) var(--espacio-2xl); }
}

.tienda-sec--con-bg {
  position:         relative;
  overflow:         hidden;
  background-color: var(--color-fondo, #fafaf7);
}
.tienda-sec--con-bg.con-textura { background-image: none; }

.tienda-sec__bg-wrap {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.tienda-sec__bg-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: contain;
  opacity:    0;
  transition: opacity 1.2s ease;
}

.tienda-sec__bg-img--activo { opacity: 1; }

/* Mobile-first: se muestran las fotos verticales de celu, las de compu/tablet quedan ocultas */
.tienda-sec__bg-img--desktop { display: none; }

.tienda-sec__overlay { position: absolute; inset: 0; }

.tienda-sec--con-bg .tienda-sec__inner {
  position: relative;
  z-index:  1;
}


.tienda-sec--hero {
  min-height:      calc(100svh - var(--nav-h, 64px));
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

/* Fondo hero: se invierte a fotos de compu/tablet (va después de la regla
   base .tienda-sec__bg-img--desktop{display:none} para ganarle en cascada) */
@media (min-width: 768px) {
  .tienda-sec__bg-img--mobile  { display: none; }
  .tienda-sec__bg-img--desktop { display: block; object-fit: cover; }
}

/* Recortar fondo en celu (toggle "bg_mobile_cover"): en vez de mostrar la
   foto completa (contain), la recorta para llenar toda la pantalla sin
   franjas de color alrededor. Pensado para fotos genéricas sin encuadre
   crítico — si el encuadre importa, se deja apagado (default). */
.tienda-sec--bg-mobile-cover .tienda-sec__bg-img--mobile { object-fit: cover; }

/* ============================================================
   20. OVERLAY FULL-SCREEN (idéntico a tienda-01)
   ============================================================ */
.tienda-overlay {
  --t-topbar: 60px;
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: var(--color-fondo, #fafaf7);
  background-image: var(--t6-h), var(--t6-v);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.tienda-overlay::-webkit-scrollbar { display: none; }

.tienda-overlay[data-open] {
  display: block;
  animation: overlay-fade-in 240ms ease-out;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tienda-overlay__topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--t-topbar);
  background: var(--color-fondo);
  background-image: var(--t6-h), var(--t6-v);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: 0 2px 14px rgba(0,0,0,.10);
}

.tienda-overlay__topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
}

.tienda-overlay__marca {
  display: flex;
  align-items: center;
  min-width: 0;
  grid-column: 1;
  justify-self: start;
}

.tienda-overlay__logo {
  height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

.tienda-overlay__cerrar {
  display: flex;
  align-items: center;
  grid-column: 3;
  justify-self: end;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: var(--radio-borde, 8px);
  background: rgba(0,0,0,.08);
  border: none;
  cursor: pointer;
  color: var(--color-texto-suave);
  font-family: var(--fuente-cuerpo, system-ui);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1;
  transition: opacity var(--transicion);
  flex-shrink: 0;
}
.tienda-overlay__cerrar:active { opacity: .65; }

@media (min-width: 768px) {
  .tienda-overlay__topbar-inner { padding: 0 16px; }
  .tienda-overlay__logo { height: 42px; max-width: 200px; }
}

@media (min-width: 1024px) {
  .tienda-overlay__topbar-inner { padding: 0 24px; }
}

/* ============================================================
   21. SIDEBAR DE CATEGORÍAS — tablet/desktop (idéntico a tienda-01)
   ============================================================ */
@media (min-width: 768px) {
  /* Retoque estético desktop (12/8/2026) — conecta el overlay a la
     identidad real del sitio en vez de valores fijos genéricos. Solo acá
     adentro, mobile no se toca:
     - --t-cat-activo/--t-cat-carrito apuntaban a naranja/ámbar fijos,
       nunca a la Paleta Tienda real (tienda-01 sí la tenía cableada).
     - --t-radio apuntaba a --radio-borde, variable que no existe en
       ningún lado — quedaba siempre en 8px sin importar la identidad
       real del proyecto (acá, 2px). */
  :root, .tienda {
    --t-cat-activo:  var(--color-tienda-activo,    #e8590c);
    --t-cat-carrito: var(--color-tienda-destacado, #f5a623);
    --t-radio:       var(--radio, 8px);
  }

  .tienda {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar banner"
      "sidebar productos";
    align-items: stretch;
    align-content: start;
    padding-bottom: 0;
  }

  .tienda__cat-zona {
    grid-area: sidebar;
    position: static;
    border-right: 1px solid var(--t-borde);
    background-image: var(--t6-h), var(--t6-v);
  }

  .tienda__cat-zona-inner {
    position: sticky;
    top: var(--t-topbar, 60px);
    max-height: calc(100vh - var(--t-topbar, 60px));
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--t-borde) transparent;
  }

  .tienda__cat-zona-inner::-webkit-scrollbar { width: 6px; }
  .tienda__cat-zona-inner::-webkit-scrollbar-track { background: transparent; }
  .tienda__cat-zona-inner::-webkit-scrollbar-thumb {
    background: var(--t-borde);
    border-radius: 999px;
  }
  .tienda__cat-zona-inner::-webkit-scrollbar-thumb:hover { background: var(--t-acento); }

  .tienda__cat-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .tienda__cat-item {
    aspect-ratio: auto;
    display: flex;
    align-items: stretch;
    min-height: 56px;
    gap: 0;
    padding: 0;
    background: var(--t-fondo);
    border-radius: 0;
    border-bottom: 1px solid var(--t-borde);
  }

  .tienda__cat-item-foto {
    position: static;
    width: 52px;
    flex-shrink: 0;
    border-radius: 0;
  }

  /* Variante ícono: reemplaza el thumbnail de foto en el sidebar. Pisa
     explícitamente width/flex/overflow-x del chip horizontal de mobile
     (misma especificidad que esta regla, ganaba por orden de cascada y
     dejaba el item en 68px de ancho fijo dentro del sidebar de 300px). */
  .tienda__cat-grid--iconos {
    overflow-x: visible;
  }
  .tienda__cat-grid--iconos .tienda__cat-item {
    flex: none;
    width: auto;
    flex-direction: row;
    align-items: center;
    padding: 0;
    background: none;
  }
  .tienda__cat-grid--iconos .tienda__cat-item-icono {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-left: 14px;
  }
  .tienda__cat-grid--iconos .tienda__cat-label {
    font-size: .85rem;
    text-align: left;
    padding: 8px 10px;
    line-height: 1.25;
  }

  .tienda__cat-label {
    position: static;
    align-self: center;
    background: none;
    text-shadow: none;
    color: var(--t-texto);
    font-size: .85rem;
    font-weight: 600;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
    padding: 8px 10px;
    overflow: visible;
    text-overflow: clip;
    flex: 1;
  }

  .tienda__cat-badge {
    position: static;
    align-self: center;
    flex-shrink: 0;
    margin: 0 10px 0 0;
    background: #fff;
    color: #1a1a1a;
    box-shadow: none;
  }

  .tienda__cat-item--en-carrito {
    box-shadow: none;
    background: var(--t-cat-carrito);
  }

  .tienda__cat-item--activo {
    box-shadow: none;
    background: var(--t-cat-activo);
  }
  .tienda__cat-item--activo .tienda__cat-label { color: #fff; }

  .tienda__cat-nombre-bar { display: none; }

  .tienda__cat-banner {
    grid-area: banner;
    position: sticky;
    top: var(--t-topbar, 60px);
    z-index: 15;
    display: flex;
    align-items: center;
    padding: 14px 24px;
    font-family: var(--fuente-display, var(--t-fuente));
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--t-texto);
    background: var(--t-superficie);
    border-bottom: 1px solid var(--t-borde);
  }

  .tienda__fab {
    grid-area: banner;
    position: sticky;
    top: var(--t-topbar, 60px);
    z-index: 15;
    justify-self: end;
    align-self: stretch;
    display: flex;
    align-items: center;
    width: auto;
    max-width: none;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin-right: 24px;
  }

  .tienda__fab-btn {
    width: auto;
    height: 40px;
    padding: 0 18px;
  }

  .tienda__catalogo {
    grid-area: productos;
    background-image: var(--t6-h), var(--t6-v);
  }

  .tienda-overlay .tienda__catalogo { padding: 14px 16px 24px; }
}

@media (min-width: 1024px) {
  .tienda { grid-template-columns: 300px 1fr; }

  .tienda-overlay__logo { height: 46px; }

  .tienda__cat-item-foto { width: 60px; }

  .tienda__cat-banner {
    font-size: 1.4rem;
    padding: 16px 32px;
  }

  .tienda__fab { margin-right: 32px; }

  .tienda-overlay .tienda__catalogo { padding: 16px 24px 32px; }
}

/* ============================================================
   22. SECCIÓN GALERÍA (carrusel de originais, dentro de la página —
   no es un overlay. Mismo carrito/pedidos que la Tienda.)
   ============================================================ */
.galeria-sec {
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--espacio-lg) var(--sec-h);
  background-color: var(--color-fondo);
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.galeria-sec.con-textura { background-image: var(--t6-h), var(--t6-v); }

.galeria-sec__inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.galeria-sec .seccion-label {
  justify-content: center;
  margin-bottom: calc(6px + var(--ajuste-espacio-eyebrow, 0rem));
}
.galeria-sec .seccion-label::after { display: none; }

.galeria-sec__titulo {
  font-family:    var(--fuente-display);
  font-style:     var(--titulo-style, italic);
  text-transform: var(--titulo-transform, none);
  font-weight:    500;
  font-size:      calc(var(--texto-2xl) + var(--ajuste-titulo, 0rem));
  line-height:    1.05;
  color:          var(--color-texto);
  margin: 0 0 6px;
}

.galeria-sec__desc {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  text-transform: var(--cuerpo-transform, none);
  font-style:     var(--cuerpo-style, normal);
  line-height:    1.6;
  color:          var(--color-texto-2);
  max-width: 44ch;
  margin: 0 0 var(--espacio-sm);
}

.galeria {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.galeria__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 0 0 var(--t-radio) var(--t-radio);
  overflow: hidden;
  background: var(--t-superficie);
  touch-action: pan-y;
  padding: 20px;
  box-sizing: border-box;
}

/* Todas las obras curadas se renderizan una vez (precarga real de todas
   las fotos) y quedan apiladas — solo la activa tiene opacity:1. Misma
   técnica de crossfade que el fondo del hero (.tienda-sec__bg-img). */
.galeria__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.galeria__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
  touch-action: manipulation;
}
.galeria__slide--activo {
  opacity: 1;
  pointer-events: auto;
}

.galeria__foto {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12);
}

/* Nav (flechas+contador) vive en flujo normal, adentro de
   .galeria__placa-linha junto al bloque de compra — ya no superpuesto
   arriba (chocaba con títulos largos, ver renderGaleriaSlide). */
.galeria__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-texto) 8%, var(--t-fondo));
  border: 1px solid color-mix(in srgb, var(--t-texto) 18%, var(--t-fondo));
  flex-shrink: 0;
}

.galeria__flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--t-texto);
  cursor: pointer;
  transition: opacity var(--t-transition);
}
.galeria__flecha:active { opacity: .6; }

.galeria__contador {
  min-width: 2.6em;
  text-align: center;
  color: var(--t-texto-suave);
  font-size: .72rem;
  font-weight: 600;
}

/* Placa arriba del visor, separada por una línea sutil — una sola tarjeta */
.galeria__placa {
  margin-top: 0;
  padding: 14px 18px;
  border-radius: var(--t-radio) var(--t-radio) 0 0;
  border: 1px solid var(--t-borde);
  background: var(--t-fondo);
  box-shadow: var(--t-shadow);
  text-align: left;
}

.galeria__placa-nombre {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--t-texto);
  margin: 0 0 4px;
}

/* Una línea por dato (técnica·año, Original: medida) — mismo criterio
   que la ventana de zoom (base/zoom-foto.css). */
.galeria__placa-ficha {
  font-size: .8rem;
  color: var(--t-texto-suave);
  margin: 0 0 2px;
}

/* Mobile/tablet chico (<768px, sin tocar el layout apilado): técnica y
   año se leen juntos en una sola línea igual que siempre — el párrafo
   de año (separado en el markup para el split de desktop) se oculta acá
   y se reconstruye con el dato que ya viaja en data-ano. */
.galeria__placa-ficha--tec::after { content: " · " attr(data-ano); }
.galeria__placa-ficha--ano { display: none; }

.galeria__placa-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Precio + botón de compra, apilados y alineados a la izquierda —
   compacto para que el nav (a la derecha) siempre entre en la misma línea. */
.galeria__placa-compra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.galeria__placa-precio {
  font-size: .92rem;
  font-weight: 700;
  color: var(--t-acento);
}

.galeria__placa-vendido {
  font-size: .8rem;
  font-weight: 600;
  color: var(--t-agotado);
}

/* display:inline-flex a propósito — este botón puede ser <button> (modo
   carrito) o <a> (modo WhatsApp, ver galeria_compra_modo), un <a> no
   respeta height/padding vertical igual que un botón sin esto. */
.galeria__placa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: var(--t-radio-sm);
  font-family: var(--t-fuente);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-transition);
  flex-shrink: 0;
}

.galeria__placa-btn--comprar {
  background: color-mix(in srgb, var(--t-acento) 10%, transparent);
  border: 1.5px solid var(--t-acento);
  color: var(--t-acento);
}
.galeria__placa-btn--comprar:active { background: color-mix(in srgb, var(--t-acento) 20%, transparent); }

.galeria__placa-btn--remover {
  background: none;
  border: 1.5px solid var(--t-error);
  color: var(--t-error);
}
.galeria__placa-btn--remover:active { opacity: .7; }

/* Estado vacío: todavía no hay obras curadas para el carrusel */
.galeria__vazio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--t-acento) 30%, var(--t-borde));
}
.galeria__vazio-icon svg { width: 40px; height: 40px; }

.galeria__placa-vazio {
  margin: 0;
  text-align: center;
  font-size: .92rem;
  color: var(--t-texto-suave);
}

/* ============================================================
   Galería — split fluido desde tablet (21/8/2026, replanteo de fondo).
   Reemplaza el layout apilado (mobile) a partir de 768px: columna de
   texto angosta y foto grande, ancladas al centro con un gap fijo de
   30px — la columna de texto se angosta sola en pantallas chicas
   (clamp, no ancho fijo) así el mismo layout escala sin quiebres de
   tablet a desktop grande, en vez de saltar entre dos diseños. Mobile
   (<768px) no se toca.
   Referencia de diseño: base/zoom-foto.css (foto grande sin recorte,
   franja de info fina, sin card ni bordes). Boceto aprobado por Pablo
   en brote/_tmp/eugenio-galeria-desktop-boceto.html. ============ */
@media (min-width: 768px) {
  .galeria-sec {
    height: calc(100svh - var(--nav-h, 64px));
    padding: var(--espacio-lg) clamp(28px, 5vw, 80px);
  }

  .galeria-sec__inner {
    max-width: 1800px;
    align-items: stretch;
  }

  .galeria {
    display: grid;
    grid-template-columns: clamp(220px, 28vw, 400px) 1fr;
    grid-template-rows: minmax(0, 1fr);
    column-gap: 30px;
  }

  /* Columna de texto: todo el bloque (eyebrow + placa) centrado
     verticalmente, alineado a la derecha contra el gap. */
  .galeria__info {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    height: 100%;
    min-height: 0;
  }

  /* align-self + width:fit-content en vez de confiar solo en el shrink
     del flex item — .seccion-label es display:flex por su cuenta, y sin
     esto quedaba con el ancho completo de la columna (no pegado a la
     derecha, aunque justify-content ya empujara el texto adentro). */
  .galeria-sec .seccion-label {
    align-self: flex-end;
    width: fit-content;
    justify-content: flex-end;
    margin-bottom: 26px;
  }

  /* Título/descripción son para el layout apilado (mobile) — acá la
     sección se lee obra por obra, sin bloque de texto largo. */
  .galeria-sec__titulo,
  .galeria-sec__desc {
    display: none;
  }

  /* text-align:right explícito — la regla base de .galeria__placa trae
     text-align:left (pensada para el layout apilado) y se heredaba hacia
     abajo pisando el text-align:right de .galeria__info. */
  .galeria__placa {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .galeria__placa-nombre { font-size: 1.85rem; margin: 0 0 4px; }
  .galeria__placa-ficha  { margin: 0; }

  /* Split desktop: técnica sola, medida, año — cada una en su propia
     línea (el año va siempre al final, debajo de la medida). */
  .galeria__placa-ficha--tec::after { content: none; }
  .galeria__placa-ficha--ano { display: block; }

  .galeria__placa-linha {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    margin-top: 28px;
  }

  .galeria__placa-compra {
    align-items: flex-end;
    gap: 0;
  }

  /* Label "Valor" sobre el precio — CSS puro, no toca carrito2.js
     (mismo dato, ningún elemento nuevo que gatee por breakpoint).
     display:block + width:fit-content en vez de confiar en el shrink
     del span: un span con un ::before en bloque adentro no achica su
     caja de forma confiable dentro de un flex column. */
  .galeria__placa-precio {
    display: block;
    width: fit-content;
    margin-left: auto;
    font-size: 1.05rem;
    font-weight: 500;
  }
  .galeria__placa-precio::before {
    content: "Valor";
    display: block;
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-texto-suave);
    margin-bottom: 5px;
  }

  /* Botón fino (subrayado, sin relleno) en vez del chip con borde —
     mismo criterio "elegancia" del boceto. Línea pegada al texto. */
  .galeria__placa-btn {
    height: auto;
    padding: 2px 1px 1px;
    margin-top: 26px;
    border-radius: 0;
    font-size: .74rem;
    font-weight: 500;
  }
  .galeria__placa-btn--comprar {
    background: none;
    border: none;
    border-bottom: 1px solid var(--t-acento);
  }
  .galeria__placa-btn--comprar:active { background: none; opacity: .6; }
  .galeria__placa-btn--remover {
    border: none;
    border-bottom: 1px solid var(--t-error);
  }

  .galeria__nav {
    align-self: flex-end;
    width: fit-content;
    margin-top: 34px;
    gap: 14px;
    padding: 0;
    background: none;
    border: none;
  }

  /* Columna de foto: ancla contra el gap (izquierda de su columna),
     libre para expandirse hacia el borde derecho. object-fit:contain
     asegura que nunca exceda el alto disponible, sea cual sea su
     proporción real — bug real encontrado en el boceto: sin esto, una
     foto más alta que las demás estiraba toda la fila y arrastraba el
     resto de la página hacia abajo. */
  .galeria__viewport {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    background: transparent;
    border-radius: var(--t-radio);
    min-width: 0;
    min-height: 0;
  }

  .galeria__slide {
    align-items: center;
    justify-content: flex-start;
  }

  .galeria__foto {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  /* 18x18, igual al SVG del ícono — el botón de 28px dejaba un aro
     invisible alrededor de la flecha, y ESE aro (no el ícono) era lo
     que se alineaba contra el borde derecho, así que el selector se
     veía corrido respecto del resto del texto. */
  .galeria__flecha { width: 18px; height: 18px; }
}


/* sec-01 · Texto + imagen 2 columnas */

.sec-01 { padding-block: var(--sec-v); padding-inline: var(--contenedor-pad); }

.sec-01.con-textura { background-image: var(--t6-h), var(--t6-v); }

/* Fondos */
.sec-01--claro      { background-color: var(--color-fondo); }
.sec-01--superficie { background-color: var(--color-superficie); }
.sec-01--oscuro     { background-color: var(--color-texto); color: var(--color-fondo); }
.sec-01--oscuro .seccion__titulo,
.sec-01--oscuro .seccion-label { color: var(--color-fondo); }
.sec-01--oscuro .seccion__intro { color: rgba(var(--color-fondo-rgb), 0.75); }

.sec-01__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-lg);
  max-width:      var(--ancho-contenido);
  margin:         0 auto;
}

/* Mobile: texto arriba, imagen abajo */
.sec-01__col-texto { order: 1; }
.sec-01__col-media { order: 2; }

.sec-01__foto {
  width:         100%;
  aspect-ratio:  4 / 3;
  border-radius: calc(var(--radio) + 2px);
}

/* Carrusel opcional — mismo tamaño que la foto única, pero con capas
   apiladas que se cruzan en fade. Orientación al revés que en tienda:
   mobile horizontal (ocupa menos alto), desktop vertical (va al lado del texto). */
.sec-01__carrusel {
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 3;
  border-radius: calc(var(--radio) + 2px);
  overflow:      hidden;
}

.sec-01__carrusel .sec-01__foto {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  aspect-ratio:  auto;
  object-fit:    cover;
  opacity:       0;
  border-radius: 0;
  transition:    opacity 1.2s ease;
}

.sec-01__carrusel .sec-01__foto--activo  { opacity: 1; }
.sec-01__carrusel .sec-01__foto--desktop { display: none; }

/* Si el proyecto cargó fotos solo para desktop, en mobile la columna entera
   desaparece (mobile-first: oculta por default acá abajo) — así no queda
   una caja vacía con aspect-ratio reservando alto de más. Se reactiva en
   el breakpoint 1024px (mismo corte del swap mobile→desktop de abajo). */
.sec-01__col-media--sin-mobile { display: none; }

.sec-01__extras {
  margin-top: var(--espacio-md);
  display:    flex;
  flex-direction: column;
  gap:        var(--espacio-xs);
}

.sec-01__extra {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-sm);
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:       var(--color-texto-2);
}

.sec-01__extra-icono { flex-shrink: 0; }

.sec-01__cta { margin-top: var(--espacio-lg); }

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .sec-01 { padding-block: var(--espacio-xl); }
  .sec-01__foto,
  .sec-01__carrusel { aspect-ratio: 16 / 10; }
}

/* ── Desktop (1024px): lado a lado ── */
@media (min-width: 1024px) {
  .sec-01__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           start;
    gap:                   var(--espacio-2xl);
  }

  /* Texto siempre col 1, imagen col 2 */
  .sec-01__col-texto { order: 1; }
  .sec-01__col-media { order: 2; }

  /* Invertido: imagen izquierda */
  .sec-01--invertido .sec-01__col-texto { order: 2; }
  .sec-01--invertido .sec-01__col-media { order: 1; }

  .sec-01__foto,
  .sec-01__carrusel {
    aspect-ratio:  3 / 4;
    max-height:    560px;
    width:         100%;
  }

  .sec-01__carrusel .sec-01__foto--mobile  { display: none; }
  .sec-01__carrusel .sec-01__foto--desktop { display: block; }

  .sec-01__col-media--sin-mobile  { display: block; }
  .sec-01__col-media--sin-desktop { display: none; }
}

/* ── Wide (1440px) ── */
@media (min-width: 1440px) {
  .sec-01__inner { grid-template-columns: 5fr 4fr; }
  .sec-01--invertido .sec-01__inner { grid-template-columns: 4fr 5fr; }
}


/* footer-01 · Una fila: logo + social + dirección */

.footer-01 {
  background-color: var(--color-superficie);
  background-image: var(--t6-h), var(--t6-v);
  border-top:       1px solid rgba(var(--color-borde-rgb), 0.10);
  padding-block:    var(--espacio-lg);
}

.footer-01__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--espacio-md);
  text-align:     center;
}

.footer-01__logo-img {
  height: 36px;
  width:  auto;
}

.footer-01__dir {
  font-size: calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto);
}

.footer-01__meta {
  font-size: calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto-2);
  opacity:   0.70;
}

.footer-01__meta-link {
  font-size:   inherit;
  color:       inherit;
  cursor:      pointer;
}

.footer-01__meta--priv {
  margin-top: var(--espacio-xs);
}

.footer-01__credito {
  font-size:  calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:      var(--color-texto-2);
  opacity:    1;
  margin-top: var(--espacio-sm);
}

.footer-01__credito a {
  font-family:    var(--fuente-display);
  font-weight:    600;
  color:          #0a6e4a;
}

.footer-01__social {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-sm);
}

.footer__icon-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  color:           var(--color-acento-2);
  opacity:         0.70;
  transition:      opacity var(--transicion);
}
.footer__icon-link:hover { opacity: 1; }


/* Banner Brote — cartel propio, separado de la identidad del cliente
   (fondo/paleta ajenos al proyecto, para que se lea como aviso externo) */
.brote-banner {
  background-color: #0a6e4a;
  padding-block: 14px;
}

.brote-banner__inner { text-align: left; }

.brote-banner__texto {
  font-size: var(--texto-xs);
  color: rgba(245, 237, 224, 0.80);
}

.brote-banner__l1,
.brote-banner__l2 {
  display:     block;
  line-height: 1.3;
}

.brote-banner__l1 {
  font-size:   var(--texto-sm);
  font-weight: 600;
  color:       #F5EDE0;
}

.brote-banner__l2 { margin-top: 0; }

.brote-banner__link {
  font-weight: 600;
  color: #25D366;
}
.brote-banner__link:hover { opacity: 0.85; }

@media (min-width: 768px) {
  .brote-banner__inner { text-align: center; }

  .brote-banner__l1,
  .brote-banner__l2 { display: inline; }
}