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

:root {

  /* ── Paleta ── */
  --color-fondo:        #f5f6f4;
  --color-fondo-rgb:    245,246,244;      /* sin rgb(), solo "245,234,208" */
  --color-texto:        #272b1c;
  --color-texto-rgb:    39,43,28;
  --color-texto-2:      #252621;        /* texto secundario/cuerpo (independiente de acento-2) */
  --color-texto-3:      #646e4c;        /* texto de eyebrow (independiente de acento) */
  --color-subtitulo:    #646e4c;      /* color propio de .subtitulo, independiente de texto-3 */
  --color-acento:       #8cae3d;
  --color-acento-2:     #488f3d;
  --color-acento-3:     #b69b54;
  --color-superficie:   #e9ebe5;
  --color-borde:        #cfd4c4;
  --color-borde-rgb:    207,212,196;
  --color-verde:        #7A9E6A;          /* para botón WA y acentos positivos */
  --color-contraste:    #000000;       /* texto (blanco/negro) que mejor lee sobre --color-acento */
  --color-contraste-2:  #000000;     /* ídem, sobre --color-acento-2 */
  --color-contraste-3:  #000000;     /* í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:     #488f3d;     /* categoría activa (cat-grid/sidebar) */
  --color-tienda-destacado:  #b69b54;  /* badge cantidad, selector en-carrito, FAB "Ver carrito" */
  --color-tienda-cerrar:     #8cae3d;     /* fondo del botón cerrar del overlay */

  /* ── Tipografía ── */
  --fuente-display:     'DM Serif Display', serif;
  --fuente-cuerpo:      'Outfit', sans-serif;
  --fuente-subtitulo:   'DM Serif Display', 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:      0.6rem;
  --ajuste-cuerpo:      0.2rem;
  --ajuste-eyebrow:         0rem;
  --ajuste-espacio-eyebrow: 0.1rem;
  --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:       uppercase;
  --titulo-style:           normal;
  --subtitulo-transform:    none;
  --subtitulo-style:        italic;
  --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-07 · Video full-screen en loop · texto opcional · efecto configurable
   Autocontenido (sin depender de .hero de hero-01), mismo criterio que hero-04/05/06.
   Los botones (.btn--ghost etc.) vienen de base/botones.css — no se redefinen acá. */

.hero-07 {
  position: relative;
  width:    100%;
  height:   calc(100svh - var(--nav-h));
  display:  flex;
  align-items: center;
  overflow: hidden;
  background: #111;
}

.hero-07__video {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  z-index:         0;
}

/* Contraste parejo para lo que se le superponga (CTA, texto) sin oscurecer todo el video */
.hero-07__overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%);
  pointer-events: none;
}

/* Grano — mismo mecanismo que el resto de la LM (toggle "Textura de fondo") */
.hero-07.con-textura::after {
  content:          '';
  position:         absolute;
  inset:            0;
  z-index:          2;
  background-image: var(--t6-h), var(--t6-v);
  pointer-events:   none;
}

/* ── Efecto vintage ── */
.hero-07--vintage .hero-07__video {
  filter: sepia(0.35) contrast(1.15) saturate(0.65) brightness(0.92);
}

.hero-07--vintage::before {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(15,10,5,0.65) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-07--vintage::before {
    animation: hero07-flicker 6s infinite;
  }
  @keyframes hero07-flicker {
    0%, 100% { opacity: 1; }
    8%       { opacity: 0.85; }
    12%      { opacity: 1; }
    35%      { opacity: 0.92; }
    50%      { opacity: 1; }
    72%      { opacity: 0.88; }
    78%      { opacity: 1; }
  }
}

/* Contenido de texto (idéntico criterio tipográfico a hero-01) */
.hero-07__contenido {
  position:   relative;
  z-index:    4;
  width:      100%;
  padding:    48px var(--contenedor-pad) 64px;
  text-align: center;
  color:      #fff;
}

.hero-07__h1 {
  font-family: var(--fuente-cuerpo);
  font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight: 400;
  font-style:  normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity:     0.65;
  margin-bottom: var(--espacio-sm);
  color:       #fff;
}

.hero-07__h2 {
  font-family: var(--fuente-display);
  font-size:   calc(clamp(2.4rem, 8vw, 5rem) + var(--ajuste-titulo, 0rem));
  font-weight: 500;
  font-style:  italic;
  line-height: 1.02;
  color:       #fff;
  margin-bottom: var(--espacio-md);
}

.hero-07__intro {
  font-size:     calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:   1.80;
  color:         rgba(255,255,255,0.82);
  margin-bottom: var(--espacio-sm);
  max-width:     52ch;
  margin-left:   auto;
  margin-right:  auto;
}

.hero-07__acciones {
  display:         flex;
  justify-content: center;
  margin-top:      var(--espacio-md);
}

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .hero-07__h2 { font-size: calc(clamp(3rem, 6vw, 5rem) + var(--ajuste-titulo, 0rem)); }
}

/* ── Wide (1440px) ── */
@media (min-width: 1440px) {
  .hero-07__h2 { font-size: calc(5.5rem + var(--ajuste-titulo, 0rem)); }
}


/* 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; }
}