/* ============================================================
   CON CADA LATIDO — Componentes
   ============================================================ */

/* ---------- CONTENEDORES ---------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor--estrecho { max-width: var(--ancho-estrecho); }
.contenedor--ancho    { max-width: 1600px; }

.seccion { padding-block: var(--seccion-y); }
.seccion--crema { background: var(--bg-alt); }
.seccion--madera {
  background:
    linear-gradient(160deg, var(--madera-700), var(--madera-800) 62%, var(--madera-900));
  color: var(--crema-50);
}
.seccion--madera h2, .seccion--madera h3 { color: var(--crema-0); }
.seccion--madera .etiqueta { color: var(--madera-200); }
.seccion--madera .script { color: var(--rosa-300); }
.seccion--verde { background: var(--verde-50); }

/* ---------- ENCABEZADO DE SECCIÓN ------------------------- */
.cabecera-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem);
}
.cabecera-seccion--centrada { margin-inline: auto; text-align: center; align-items: center; }
.cabecera-seccion__script { margin-top: -.35em; }

/* ---------- BOTONES --------------------------------------- */
.boton {
  --b-bg: var(--madera-600);
  --b-fg: var(--crema-0);
  --b-borde: var(--madera-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: 1.02em 2.1em;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  line-height: 1;
  color: var(--b-fg);
  background: var(--b-bg);
  border: 1px solid var(--b-borde);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
/* El relleno se desliza desde abajo: gesto artesanal, no un flash de color */
.boton::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--madera-800);
  transform: translateY(101%);
  transition: transform var(--dur-media) var(--ease-salida);
  z-index: -1;
}
.boton:hover::before { transform: translateY(0); }
.boton:hover { box-shadow: var(--sombra-m); }
.boton:active { transform: translateY(1px); }

.boton--contorno {
  --b-bg: transparent;
  --b-fg: var(--madera-700);
  --b-borde: color-mix(in srgb, var(--madera-500) 42%, transparent);
}
.boton--contorno:hover { --b-fg: var(--crema-0); --b-borde: var(--madera-800); }

.boton--claro {
  --b-bg: var(--crema-0);
  --b-fg: var(--madera-800);
  --b-borde: var(--crema-0);
}
.boton--claro::before { background: var(--crema-100); }
.boton--claro:hover { --b-fg: var(--madera-900); }

.boton--fantasma {
  --b-bg: transparent;
  --b-fg: var(--crema-0);
  --b-borde: color-mix(in srgb, var(--crema-0) 45%, transparent);
}
.boton--fantasma::before { background: var(--crema-0); }
.boton--fantasma:hover { --b-fg: var(--madera-800); --b-borde: var(--crema-0); }

.boton--verde { --b-bg: var(--verde-500); --b-borde: var(--verde-500); }
.boton--verde::before { background: var(--verde-600); }

.boton--pequeno { padding: .78em 1.5em; font-size: var(--t-micro); }
.boton--ancho { width: 100%; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* ---------- ENLACE CON FLECHA ----------------------------- */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: var(--t-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--acento);
  padding-bottom: .3em;
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  transition: border-color var(--dur-rapida), color var(--dur-rapida);
}
.enlace-flecha svg { transition: transform var(--dur-media) var(--ease-salida); }
.enlace-flecha:hover { color: var(--acento-hover); border-color: var(--acento-hover); }
.enlace-flecha:hover svg { transform: translateX(5px); }

/* ============================================================
   EL LATIDO — microanimación de marca
   Una línea de electrocardiograma que se dibuja sola. Sutil.
   ============================================================ */
.latido {
  display: inline-block;
  width: 3.6em;
  height: 1em;
  color: var(--latido);
  vertical-align: middle;
}
.latido svg { width: 100%; height: 100%; overflow: visible; }
.latido path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Trazo que se dibuja al aparecer */
.latido--dibuja path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: latido-dibuja 2.4s var(--ease-salida) forwards;
}
@keyframes latido-dibuja { to { stroke-dashoffset: 0; } }

/* Pulso lento y contenido: no es un corazón rojo latiendo sin parar */
.latido--pulso path {
  animation: latido-pulso 4.2s var(--ease-suave) infinite;
}
@keyframes latido-pulso {
  0%, 62%, 100% { opacity: .5; }
  70%           { opacity: 1; }
  76%           { opacity: .62; }
  82%           { opacity: 1; }
}

/* Separador de secciones: línea fina + latido en el centro */
.separador-latido {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--madera-300);
  margin-block: var(--sp-6);
}
.separador-latido::before,
.separador-latido::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 45%, currentColor 55%, transparent);
  opacity: .55;
}
.separador-latido .latido { width: 4.6em; height: 1.4em; }
.separador-latido--corto { max-width: 340px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .latido--dibuja path { animation: none; stroke-dashoffset: 0; }
  .latido--pulso path  { animation: none; opacity: .85; }
}

/* ============================================================
   CABECERA / NAVEGACIÓN
   ============================================================ */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background var(--dur-media), box-shadow var(--dur-media),
              border-color var(--dur-media);
  border-bottom: 1px solid transparent;
}
/* Sobre el hero oscuro: transparente y en crema */
.cabecera[data-modo='sobre-imagen'] { color: var(--crema-0); }
.cabecera[data-modo='sobre-imagen']::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(46,29,20,.46), rgba(46,29,20,0));
  pointer-events: none;
}
/* Al hacer scroll: fondo crema sólido */
.cabecera[data-modo='solido'] {
  background: color-mix(in srgb, var(--crema-50) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 20px -8px rgba(87,32,10,.18);
  color: var(--text);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 84px;
  transition: min-height var(--dur-media);
}
.cabecera[data-modo='solido'] .cabecera__interior { min-height: 70px; }

/* --- marca --- */
.marca { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.marca__corazon {
  width: auto;
  height: 52px;
  transition: height var(--dur-media) var(--ease-suave), filter var(--dur-media);
  filter: drop-shadow(0 2px 6px rgba(56,21,10,.22));
}
.cabecera[data-modo='solido'] .marca__corazon { height: 44px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca__lema {
  font-family: var(--font-script);
  font-size: .95rem;
  color: currentColor;
  opacity: .72;
  margin-top: .18em;
  white-space: nowrap;
}
@media (max-width: 420px) { .marca__texto { display: none; } }

/* --- navegación --- */
.nav { display: flex; align-items: center; gap: clamp(1rem, .4rem + 1.5vw, 2.1rem); }
.nav__enlace {
  position: relative;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  padding-block: .55rem;
  white-space: nowrap;
  transition: opacity var(--dur-rapida);
}
.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-salida);
}
.nav__enlace:hover::after,
.nav__enlace[aria-current='page']::after { transform: scaleX(1); }
.nav__enlace[aria-current='page'] { font-weight: 400; }

.cabecera__acciones { display: flex; align-items: center; gap: var(--sp-3); }

@media (max-width: 1080px) {
  .nav--principal, .cabecera__acciones .boton { display: none; }
}

/* --- botón hamburguesa --- */
.hamburguesa {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: currentColor;
}
@media (max-width: 1080px) { .hamburguesa { display: inline-flex; } }
.hamburguesa__caja { display: block; width: 24px; height: 14px; position: relative; }
.hamburguesa__caja span {
  position: absolute; left: 0; height: 1.5px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-media) var(--ease-salida), opacity var(--dur-rapida);
}
.hamburguesa__caja span:nth-child(1) { top: 0; }
.hamburguesa__caja span:nth-child(2) { top: 6.25px; }
.hamburguesa__caja span:nth-child(3) { top: 12.5px; }
.hamburguesa[aria-expanded='true'] .hamburguesa__caja span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] .hamburguesa__caja span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded='true'] .hamburguesa__caja span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* --- menú móvil --- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--crema-50);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-media), visibility var(--dur-media);
  overflow-y: auto;
}
.menu-movil[data-abierto='true'] { opacity: 1; visibility: visible; }
.menu-movil__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 84px;
  padding-inline: var(--gutter);
}
.menu-movil__cuerpo {
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  display: flex; flex-direction: column; gap: .2rem;
}
.menu-movil__enlace {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.6rem);
  font-weight: 300;
  padding-block: .42rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  opacity: 0;
  transform: translateY(14px);
}
.menu-movil[data-abierto='true'] .menu-movil__enlace {
  animation: menu-entra var(--dur-lenta) var(--ease-salida) forwards;
}
.menu-movil__enlace span {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  color: var(--text-tenue);
  text-transform: uppercase;
}
@keyframes menu-entra { to { opacity: 1; transform: none; } }
.menu-movil__pie {
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  background: var(--crema-100);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

/* ============================================================
   TARJETAS
   ============================================================ */

/* --- Marco de imagen con reveal en zoom --- */
.marco {
  position: relative;
  overflow: hidden;
  background: var(--crema-200);
  border-radius: var(--r-m);
}
.marco img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-salida), filter var(--dur-lenta);
}
.marco--arco { border-radius: var(--r-arco); }
.marco--alto   { aspect-ratio: 3 / 4; }
.marco--cuadro { aspect-ratio: 1 / 1; }
.marco--ancho  { aspect-ratio: 4 / 3; }
.marco--pano   { aspect-ratio: 16 / 10; }

/* --- Tarjeta de producto --- */
.tarjeta-producto {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.tarjeta-producto .marco { margin-bottom: 1.1rem; }
.tarjeta-producto:hover .marco img { transform: scale(1.045); }

.tarjeta-producto__categoria {
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--verde-600);
  margin-bottom: .45rem;
}
.tarjeta-producto__nombre {
  font-family: var(--font-serif);
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: .38rem;
}
.tarjeta-producto__nombre a::after { content: ''; position: absolute; inset: 0; }
.tarjeta-producto__desc {
  font-size: var(--t-small);
  color: var(--text-suave);
  line-height: 1.6;
  margin-bottom: .9rem;
  flex-grow: 1;
}
.tarjeta-producto__pie {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.tarjeta-producto__precio {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  color: var(--madera-700);
}
.tarjeta-producto__precio small {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tenue);
  display: block;
  line-height: 1;
  margin-bottom: .22em;
}

/* Cinta "hecho a mano" sobre la foto */
.cinta {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 2;
  background: color-mix(in srgb, var(--crema-0) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--madera-700);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .42em .85em;
  border-radius: 999px;
  box-shadow: var(--sombra-s);
}
.cinta--verde { background: var(--verde-500); color: var(--crema-0); }

/* --- Tarjeta de universo (los dos grandes caminos) --- */
.tarjeta-universo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-l);
  min-height: clamp(400px, 28vw + 240px, 620px);
  color: var(--crema-0);
  isolation: isolate;
  box-shadow: var(--sombra-l);
}
.tarjeta-universo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.4s var(--ease-salida);
}
.tarjeta-universo::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(56,21,10,.90) 0%,
    rgba(56,21,10,.62) 34%,
    rgba(56,21,10,.16) 68%,
    rgba(56,21,10,.05) 100%);
  transition: opacity var(--dur-lenta);
}
.tarjeta-universo:hover img { transform: scale(1.055); }
.tarjeta-universo__contenido {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.6rem, 1rem + 2vw, 3rem);
  display: flex; flex-direction: column;
  gap: .7rem;
}
.tarjeta-universo__titulo {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--crema-0);
}
.tarjeta-universo__lista {
  font-size: var(--t-small);
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--crema-0) 85%, transparent);
}
.tarjeta-universo__cta {
  margin-top: .6rem;
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  align-self: flex-start;
  padding-bottom: .35em;
  border-bottom: 1px solid color-mix(in srgb, var(--crema-0) 50%, transparent);
  transition: gap var(--dur-media) var(--ease-salida), border-color var(--dur-rapida);
}
.tarjeta-universo:hover .tarjeta-universo__cta { gap: 1.1em; border-color: var(--crema-0); }

/* Variante sin fotografía: la ubicación es secreta y la tarjeta lo dice */
.tarjeta-universo--secreta {
  background:
    radial-gradient(ellipse 70% 60% at 28% 24%, var(--agua-700), transparent 72%),
    radial-gradient(ellipse 66% 62% at 82% 84%, var(--malva-700), transparent 74%),
    linear-gradient(155deg, #122822 0%, #17222E 54%, #241A38 100%);
}
.tarjeta-universo--secreta::after {
  background:
    radial-gradient(rgba(255,246,232,.06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(to top, rgba(10,14,18,.78) 0%, rgba(10,14,18,.30) 46%, transparent 78%);
}
.tarjeta-universo__sello {
  position: absolute;
  top: clamp(1.6rem, 1rem + 2vw, 3rem);
  right: clamp(1.6rem, 1rem + 2vw, 3rem);
  color: var(--agua-200);
  opacity: .55;
  transition: opacity var(--dur-media), transform var(--dur-lenta) var(--ease-salida);
}
.tarjeta-universo__sello svg { width: clamp(64px, 7vw, 104px); height: auto; }
.tarjeta-universo--secreta:hover .tarjeta-universo__sello {
  opacity: .9; transform: rotate(-8deg) scale(1.05);
}

/* --- Tarjeta de experiencia (picnics) --- */
.tarjeta-experiencia {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--border);
  height: 100%;
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              border-color var(--dur-media);
}
.tarjeta-experiencia:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-l);
  border-color: var(--madera-200);
}
.tarjeta-experiencia .marco { border-radius: 0; aspect-ratio: 5 / 4; }
.tarjeta-experiencia:hover .marco img { transform: scale(1.05); }
.tarjeta-experiencia__cuerpo {
  padding: clamp(1.2rem, 1rem + .7vw, 1.8rem);
  display: flex; flex-direction: column; gap: .6rem; flex-grow: 1;
}
.tarjeta-experiencia__nombre {
  font-family: var(--font-serif);
  font-size: 1.55rem; font-weight: 400; line-height: 1.15;
}
.tarjeta-experiencia__nombre a::after { content: ''; position: absolute; inset: 0; }
.tarjeta-experiencia__meta {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-top: auto; padding-top: .9rem;
}
.pastilla {
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde-800);
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  padding: .34em .78em;
  border-radius: 999px;
  white-space: nowrap;
}
.pastilla--madera { color: var(--madera-700); background: var(--madera-50); border-color: var(--madera-100); }
.pastilla--rosa   { color: var(--burdeos-500); background: var(--rosa-100); border-color: var(--rosa-300); }

/* --- Tarjeta de pilar (qué hacemos) --- */
.tarjeta-pilar {
  display: flex; flex-direction: column; gap: .8rem;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
.tarjeta-pilar::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--madera-400), var(--verde-300), var(--rosa-300), var(--morado-300));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-lenta) var(--ease-salida);
}
.tarjeta-pilar:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }
.tarjeta-pilar:hover::before { transform: scaleX(1); }
.tarjeta-pilar__num {
  font-family: var(--font-serif);
  font-size: 2.6rem; font-weight: 300;
  color: var(--madera-200);
  line-height: 1;
}
.tarjeta-pilar__titulo { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; }
.tarjeta-pilar__texto { font-size: var(--t-small); color: var(--text-suave); line-height: 1.65; }

/* ============================================================
   REJILLAS
   ============================================================ */
.rejilla { display: grid; gap: clamp(1.2rem, .8rem + 1.4vw, 2.4rem); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--auto { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }

@media (max-width: 1000px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .rejilla--2-movil { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   APARICIÓN PROGRESIVA
   ============================================================ */
[data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease-salida), transform .95s var(--ease-salida);
  transition-delay: var(--retardo, 0ms);
}
[data-revelar='visible'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.pie {
  /* Nogal, no barro: un punto más de calidez que antes */
  background:
    linear-gradient(165deg, var(--madera-700), var(--madera-900) 78%);
  color: var(--crema-100);
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  position: relative;
  overflow: hidden;
}
/* Vetas de madera muy tenues */
.pie::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    92deg, transparent 0 78px,
    rgba(255,240,220,.028) 78px 79px,
    transparent 79px 156px);
  pointer-events: none;
}
.pie__frase {
  text-align: center;
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid rgba(255,240,220,.12);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.pie__frase .script { color: var(--rosa-300); }
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__rejilla { grid-template-columns: 1fr; } }

.pie__titulo-col {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--madera-200);
  margin-bottom: 1.1rem;
}
.pie__lista { display: flex; flex-direction: column; gap: .55rem; }
.pie__lista a {
  font-size: var(--t-small);
  opacity: .82;
  transition: opacity var(--dur-rapida), padding-left var(--dur-media) var(--ease-salida);
}
.pie__lista a:hover { opacity: 1; padding-left: 5px; }

.pie__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

/* El corazón es de madera y el pie también: sobre el fondo oscuro
   desaparecía. Va sobre una plaquita crema, como uno de sus carteles. */
.pie__placa {
  display: inline-flex;
  padding: .9rem 1.2rem;
  background: var(--crema-50);
  border-radius: var(--r-l);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .45);
}
.pie__placa img {
  height: 76px;
  width: auto;          /* sin esto el flex lo estira y aplasta el corazón */
  max-width: none;
  object-fit: contain;
  display: block;
}
.pie__redes { display: flex; gap: .7rem; margin-top: .3rem; }
.pie__red {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,240,220,.24);
  border-radius: 999px;
  transition: background var(--dur-rapida), border-color var(--dur-rapida), transform var(--dur-rapida);
}
.pie__red:hover { background: rgba(255,240,220,.14); border-color: rgba(255,240,220,.5); transform: translateY(-2px); }
.pie__red svg { width: 18px; height: 18px; }

.pie__legal {
  border-top: 1px solid rgba(255,240,220,.16);
  padding-block: 1.6rem 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.8rem;
  align-items: center; justify-content: space-between;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  opacity: .8;
}
.pie__legal-enlaces { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* ============================================================
   AVISO DE FASE (solo durante el desarrollo)
   ============================================================ */
.aviso-desarrollo {
  background: var(--verde-800);
  color: var(--verde-50);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: .6rem 1rem;
  position: relative;
  z-index: calc(var(--z-nav) + 1);
}


/* --- Paletas de estilo -------------------------------------------
   Vivían en experiencias.css, pero ahora el bloque «Estilos» se puede
   poner en cualquier página desde el panel, así que tienen que estar
   en la hoja que se carga siempre. */
/* ---------------------------------------------- estilos ---------- */
.estilos {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.estilo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .6rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
}

.estilo__paleta {
  display: flex;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(46, 29, 20, .08);
}

.estilo__paleta span {
  width: 1.4rem;
  height: 1.4rem;
}

.estilo__nombre {
  font-size: var(--t-small);
  color: var(--text-suave);
}