/* =========================================================
   LÜR — Identidad visual y estilos base
   Brand book: paleta tierra/cacao/hueso, Open Sauce + Open Sans
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Open+Sauce+One:wght@300;400;500;600;700&display=swap');

:root {
  --color-tierra: #904C15;
  --color-cacao:  #412C23;
  --color-hueso:  #F5F2ED;
  --color-topo:   #A99886;
  --color-crema:        #FFFAF5;
  --color-beige:        #EAE1D6;
  --color-arena:        #D1BAA6;
  --color-maquillaje:   #C48A6E;
  --color-teja:         #CF562E;
  --color-topo-oscuro:  #7E6B61;
  --color-verde-suave:  #ABB194;
  --color-verde-oscuro: #848973;
  --color-gris-claro:   #DFDAD3;
  --color-gris-medio:   #545454;
  --font-titular: 'Open Sauce One', 'Helvetica Neue', Arial, sans-serif;
  --font-cuerpo:  'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --gap-xs: 0.5rem;
  --gap-s:  1rem;
  --gap-m:  2rem;
  --gap-l:  4rem;
  --gap-xl: 6rem;
  --max-width: 1200px;
  --max-width-narrow: 880px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition: 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-crema);
  color: var(--color-cacao);
  font-family: var(--font-cuerpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--color-tierra); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-cacao); }

h1, h2, h3, h4, .display {
  font-family: var(--font-titular);
  color: var(--color-cacao);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--gap-s);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; }

.eyebrow {
  font-family: var(--font-titular);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-tierra);
  font-weight: 500;
  margin-bottom: var(--gap-s);
}
p { margin: 0 0 1rem; }
p.lead { font-size: 1.15rem; color: var(--color-topo-oscuro); }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gap-m); }
.container-narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--gap-m); }
.section { padding: var(--gap-xl) 0; }
.section-tight { padding: var(--gap-l) 0; }
.bg-hueso { background: var(--color-hueso); }
.bg-beige { background: var(--color-beige); }
.bg-cacao { background: var(--color-cacao); color: var(--color-hueso); }
.bg-cacao h1, .bg-cacao h2, .bg-cacao h3 { color: var(--color-hueso); }
.bg-cacao .eyebrow { color: var(--color-arena); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-l); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-m); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-m); }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--gap-m); }
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  font-family: var(--font-titular);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--color-cacao);
  background: transparent;
  color: var(--color-cacao);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.btn:hover { background: var(--color-cacao); color: var(--color-hueso); }
.btn-primary { background: var(--color-cacao); color: var(--color-hueso); border-color: var(--color-cacao); }
.btn-primary:hover { background: var(--color-tierra); border-color: var(--color-tierra); color: var(--color-hueso); }
.btn-light { border-color: var(--color-hueso); color: var(--color-hueso); }
.btn-light:hover { background: var(--color-hueso); color: var(--color-cacao); }
.btn-link {
  border: none; background: none; padding: 0;
  font-family: var(--font-titular);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-tierra);
  border-bottom: 1px solid var(--color-tierra);
  padding-bottom: 4px;
  cursor: pointer;
}
.btn-link:hover { color: var(--color-cacao); border-color: var(--color-cacao); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 245, 0.95);
  border-bottom: 1px solid var(--color-beige);
  backdrop-filter: blur(8px);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; padding-bottom: 1rem;
}
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-titular); font-size: 1.4rem; letter-spacing: 0.08em;
  color: var(--color-cacao); text-transform: uppercase;
}
.brand img { height: 150px; width: auto; }

.main-nav { display: flex; gap: var(--gap-m); align-items: center; }
.main-nav a {
  font-family: var(--font-titular);
  font-size: 0.85rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-cacao);
  position: relative; padding: 4px 0;
}
.main-nav a.active::after, .main-nav a:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--color-tierra);
}
.lang-switch { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--color-topo-oscuro); }
.lang-switch a { color: var(--color-topo-oscuro); }
.lang-switch a.active { color: var(--color-cacao); font-weight: 600; }
.mobile-toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--color-cacao); cursor: pointer; }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .main-nav.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-crema); padding: var(--gap-m);
    border-bottom: 1px solid var(--color-beige); gap: var(--gap-s);
  }
  .mobile-toggle { display: block; }
}

/* ---------- Hero con slideshow ---------- */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: clamp(420px, 80vh, 680px);
  overflow: hidden;
  background: var(--color-cacao);
}
.hero-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slideFade 24s infinite;
}
.hero-slideshow .slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .slide:nth-child(2) { animation-delay: 6s; }
.hero-slideshow .slide:nth-child(3) { animation-delay: 12s; }
.hero-slideshow .slide:nth-child(4) { animation-delay: 18s; }

@keyframes slideFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}

.hero-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(65,44,35,0.1) 0%, rgba(65,44,35,0.5) 100%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  z-index: 2;
  padding: var(--gap-xl) 0;
}
.hero-overlay .container { width: 100%; }
.hero-overlay h1 {
  color: var(--color-hueso);
  font-size: clamp(2.6rem, 7vw, 5rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
  max-width: 18ch;
  margin-bottom: var(--gap-m);
}
.hero-overlay p {
  color: var(--color-hueso);
  font-size: 1.15rem;
  max-width: 36ch;
  margin-bottom: var(--gap-m);
}
.hero-overlay .scroll-hint {
  position: absolute;
  bottom: var(--gap-m);
  right: var(--gap-m);
  font-family: var(--font-titular);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-hueso);
  opacity: 0.8;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero-overlay .scroll-hint::before {
  content: '';
  display: block;
  width: 1px; height: 30px;
  background: var(--color-hueso);
  margin: 0 auto var(--gap-s);
  opacity: 0.6;
}

/* ---------- Hero clásico (no slideshow) ---------- */
.hero {
  padding: var(--gap-xl) 0;
  background: var(--color-hueso);
  border-bottom: 1px solid var(--color-beige);
}
.hero .grid-2 { gap: var(--gap-xl); }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
}
.hero p { font-size: 1.15rem; color: var(--color-topo-oscuro); margin-bottom: var(--gap-m); }
.hero img { border-radius: var(--radius-md); box-shadow: 0 30px 60px -30px rgba(65, 44, 35, 0.35); }

/* ---------- Tarjeta de servicio (Catálogo) ---------- */
.service-card {
  background: var(--color-crema);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -25px rgba(65, 44, 35, 0.3);
}
.service-card .image-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--color-beige); }
.service-card .image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-card:hover .image-wrap img { transform: scale(1.05); }
.service-card .body { padding: var(--gap-m); display: flex; flex-direction: column; flex: 1; }
.service-card .title {
  font-family: var(--font-titular);
  font-size: 1.4rem;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--color-cacao);
  margin-bottom: 0.4rem;
}
.service-card .desc {
  font-style: italic;
  color: var(--color-topo-oscuro);
  font-size: 0.95rem;
  margin-bottom: var(--gap-s);
}
.service-card .body p { color: var(--color-cacao); }

/* ---------- Bloque servicio detallado en página catálogo ---------- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  align-items: center;
  padding: var(--gap-xl) 0;
  border-bottom: 1px solid var(--color-beige);
}
.service-block:nth-child(even) {
  direction: rtl;
}
.service-block:nth-child(even) > * { direction: ltr; }
.service-block img { border-radius: var(--radius-md); }
.service-block h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: lowercase;
  margin-bottom: var(--gap-s);
}
.service-block .eyebrow { color: var(--color-tierra); }

@media (max-width: 860px) {
  .service-block { grid-template-columns: 1fr; }
  .service-block:nth-child(even) { direction: ltr; }
}

/* ---------- Quote / cita ---------- */
.quote-block h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase; line-height: 1.1;
}

/* ---------- Newsletter ---------- */
.newsletter { background: var(--color-cacao); color: var(--color-hueso); padding: var(--gap-l) 0; }
.newsletter h3 { color: var(--color-hueso); font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--gap-s); }
.newsletter .grid-2 { gap: var(--gap-l); align-items: start; }
.newsletter .nota { font-size: 0.85rem; color: var(--color-arena); margin-top: var(--gap-s); }
.newsletter form { display: flex; flex-direction: column; gap: var(--gap-s); max-width: 420px; }
.newsletter input {
  background: transparent; border: 0;
  border-bottom: 1px solid var(--color-arena);
  color: var(--color-hueso); padding: 0.6rem 0;
  font-family: var(--font-cuerpo); font-size: 1rem; outline: none;
}
.newsletter input::placeholder { color: var(--color-arena); }
.newsletter input:focus { border-color: var(--color-hueso); }
.newsletter .slogan {
  font-family: var(--font-titular);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase; line-height: 1.1; color: var(--color-hueso);
}

.site-footer {
  background: var(--color-cacao); color: var(--color-arena);
  padding: var(--gap-m) 0;
  border-top: 1px solid rgba(245, 242, 237, 0.1);
}
.site-footer .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--gap-m); flex-wrap: wrap;
}
.site-footer a { color: var(--color-arena); font-size: 0.85rem; letter-spacing: 0.08em; }
.site-footer a:hover { color: var(--color-hueso); }
.site-footer .legal-links { display: flex; gap: var(--gap-m); flex-wrap: wrap; }
.site-footer .social { display: flex; gap: var(--gap-s); }

.contact-form { display: flex; flex-direction: column; gap: var(--gap-s); max-width: 480px; }
.contact-form label {
  font-family: var(--font-titular);
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-topo-oscuro); margin-bottom: 0.2rem;
}
.contact-form input, .contact-form textarea {
  background: var(--color-crema);
  border: 1px solid var(--color-beige);
  padding: 0.8rem 1rem;
  font-family: var(--font-cuerpo); font-size: 1rem;
  color: var(--color-cacao); border-radius: var(--radius-sm);
  outline: none; transition: border-color var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-tierra); }
.contact-form textarea { min-height: 140px; resize: vertical; }

.legal-page { max-width: 760px; margin: 0 auto; padding: var(--gap-l) var(--gap-m); }
.legal-page h1 { margin-bottom: var(--gap-m); }
.legal-page h2 { margin-top: var(--gap-l); }
.legal-page p, .legal-page li { color: var(--color-cacao); }
.legal-page ul { padding-left: 1.2rem; }

.cookie-banner {
  position: fixed; bottom: var(--gap-s); left: var(--gap-s); right: var(--gap-s);
  max-width: 520px; margin: 0 auto;
  background: var(--color-cacao); color: var(--color-hueso);
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: var(--gap-s);
  font-size: 0.9rem; z-index: 100;
}
.cookie-banner.hidden { display: none; }
.cookie-banner p { margin: 0; }
.cookie-banner .actions { display: flex; gap: var(--gap-s); flex-wrap: wrap; }
.cookie-banner a { color: var(--color-arena); text-decoration: underline; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-l { margin-top: var(--gap-l); }
.mb-l { margin-bottom: var(--gap-l); }
.divider { border: 0; border-top: 1px solid var(--color-beige); margin: var(--gap-l) 0; }
.placeholder-img {
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--color-arena), var(--color-topo));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-hueso); font-family: var(--font-titular);
  font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Preview de sección en home ---------- */
.preview-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-titular);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-tierra);
  margin-top: var(--gap-s);
}
.preview-link::after {
  content: '→';
  transition: transform var(--transition);
}
.preview-link:hover::after { transform: translateX(4px); }

/* ---------- Form mejorado: labels encima, cajas alineadas ---------- */
.contact-form > div { display: flex; flex-direction: column; }
.contact-form label { display: block; margin-bottom: 0.4rem; }
.contact-form input,
.contact-form textarea { width: 100%; box-sizing: border-box; }

/* En móvil reducir el logo para que no domine */
@media (max-width: 860px) {
  .brand img { height: 100px; }
}

/* ---------- Acciones de servicio en página Experiencias ---------- */
.service-actions {
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
  margin-top: var(--gap-m);
}

/* ---------- Cuadrícula de talleres específicos ---------- */
.workshops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-m);
}
.workshop-detail-card {
  background: var(--color-crema);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.workshop-detail-card .image-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-beige);
}
.workshop-detail-card .image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}
.workshop-detail-card .body {
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--gap-s);
}
.workshop-detail-card .title {
  font-family: var(--font-titular);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.workshop-detail-card .meta-list {
  list-style: none;
  padding: 0; margin: 0;
  font-size: 0.9rem;
  color: var(--color-topo-oscuro);
}
.workshop-detail-card .meta-list li {
  padding: 4px 0;
  display: flex;
  gap: 0.5rem;
}
.workshop-detail-card .meta-list strong {
  font-family: var(--font-titular);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-tierra);
  min-width: 70px;
}
.workshop-detail-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--gap-s);
  border-top: 1px solid var(--color-beige);
}
.workshop-detail-card .price {
  font-family: var(--font-titular);
  font-size: 1.4rem;
  color: var(--color-cacao);
}
.workshop-detail-card .btn { padding: 0.6rem 1.2rem; }

/* ---------- Calendario ---------- */
.calendar-page { padding: var(--gap-l) 0; }
.calendar-month {
  margin-bottom: var(--gap-xl);
}
.calendar-month h2 {
  text-align: center;
  text-transform: capitalize;
  margin-bottom: var(--gap-m);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-beige);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.calendar-grid .weekday {
  background: var(--color-cacao);
  color: var(--color-hueso);
  padding: 0.7rem;
  text-align: center;
  font-family: var(--font-titular);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.calendar-grid .day {
  background: var(--color-crema);
  min-height: 92px;
  padding: 0.6rem;
  position: relative;
  font-size: 0.85rem;
}
.calendar-grid .day.empty {
  background: var(--color-hueso);
  opacity: 0.5;
}
.calendar-grid .day .num {
  font-family: var(--font-titular);
  font-size: 0.95rem;
  color: var(--color-topo-oscuro);
}
.calendar-grid .day.has-event { background: var(--color-hueso); }
.calendar-grid .day.has-event .num { color: var(--color-tierra); font-weight: 600; }
.calendar-grid .day .event {
  display: block;
  margin-top: 4px;
  padding: 4px 6px;
  background: var(--color-tierra);
  color: var(--color-hueso);
  border-radius: 3px;
  font-size: 0.72rem;
  line-height: 1.25;
  font-family: var(--font-titular);
  letter-spacing: 0.04em;
}
.calendar-grid .day .event small {
  display: block;
  opacity: 0.85;
  font-weight: normal;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .calendar-grid .day { min-height: 70px; padding: 0.4rem; }
  .calendar-grid .day .event { font-size: 0.65rem; padding: 2px 4px; }
}

/* ---------- Tienda ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-m);
}
.product-card {
  background: var(--color-crema);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition);
}
.product-card:hover { transform: translateY(-3px); }
.product-card .image-wrap {
  aspect-ratio: 1/1;
  background: var(--color-beige);
}
.product-card .image-wrap img,
.product-card .image-wrap .placeholder-img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; border-radius: 0;
}
.product-card .body {
  padding: var(--gap-m);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.product-card .title {
  font-family: var(--font-titular);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin: 0;
}
.product-card .price {
  font-family: var(--font-titular);
  font-size: 1.2rem;
  color: var(--color-tierra);
}
.product-card .btn { margin-top: 0.5rem; }

/* Checkbox política de privacidad: pegado al texto */
.contact-form label.checkbox-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.3rem !important;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-cuerpo);
  font-size: 0.85rem;
  color: var(--color-topo-oscuro);
}
.contact-form label.checkbox-inline input[type="checkbox"] {
  width: auto;
  margin: 0.25rem 0 0 0;
  flex-shrink: 0;
}

/* ---------- Brand tagline en hero (sobre la H1) ---------- */
.brand-tagline {
  font-family: var(--font-titular);
  color: var(--color-arena);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: var(--gap-m);
  font-weight: 400;
  opacity: 0.95;
}

/* ---------- Sección Brand Statement (Lifestyle Urbano destacado) ---------- */
.brand-statement {
  background: var(--color-cacao);
  color: var(--color-hueso);
  padding: var(--gap-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.brand-statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(144, 76, 21, 0.25), transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(144, 76, 21, 0.18), transparent 50%);
  pointer-events: none;
}
.brand-statement > .container { position: relative; z-index: 1; }

.brand-statement-eyebrow {
  font-family: var(--font-titular);
  font-size: 1rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--color-arena);
  margin: 0 0 var(--gap-s);
  font-weight: 500;
}
.brand-statement-slogan {
  font-family: var(--font-titular);
  font-size: clamp(2.6rem, 8vw, 5rem);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--color-hueso);
  margin: 0 0 var(--gap-m);
  font-weight: 500;
  text-transform: lowercase;
}
.brand-statement-line {
  font-family: var(--font-titular);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--color-arena);
  margin: 0 auto;
  max-width: 28ch;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ---------- Animación LUR → Lifestyle URbano ----------
   Línea de tiempo:
   0.0s        "LUR" pegado en grande, centrado
   1.2s        Las letras se separan: "ifestyle" y "bano" se despliegan
   2.8s+       Estado final: "Lifestyle URbano"
*/
.brand-statement-slogan.lur-anim {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  text-transform: lowercase;
  color: var(--color-hueso);
}
/* L, U, R: mayúsculas + negrita, mismo color crema */
.lur-anim .cap {
  text-transform: uppercase;
  color: var(--color-hueso);
  font-weight: 700;
  font-size: 1em;
  display: inline-block;
  letter-spacing: 0;
}
/* Espacio entre la palabra (Living/Lifestyle) y la UR — empieza pegado, se abre */
.lur-anim .sp {
  display: inline-block;
  width: 0;
  animation: spaceOpen 2.5s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
@keyframes spaceOpen {
  from { width: 0; }
  to   { width: 0.3em; }
}

/* Contenedor de palabra que cambia (Living/Lifestyle).
   max-width se anima en etapas:
   - 1.2s   → 0      (LUR pegadas)
   - 2.7s   → 2.4em  (sólo lo justo para "iving")
   - 5.0s   → 2.4em  (mantiene "Living" mientras se lee)
   - 5.5s   → 4em    (se ensancha justo cuando Living hace flip)
   - 6.2s   → 4em    (final, "Lifestyle") */
.lur-anim .word {
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  max-width: 0;
  margin-left: -0.04em;
  /* Caja vertical más amplia para que no se corten descendentes (y) */
  padding: 0.1em 0.05em 0.25em 0;
  margin-bottom: -0.25em;
  animation: wordOpen 2.5s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
@keyframes wordOpen {
  from { max-width: 0; }
  to   { max-width: 4.8em; }
}

.lur-anim .word-2 {
  display: inline-block;
  opacity: 0;
  font-weight: 500;
  color: var(--color-hueso);
  letter-spacing: -0.01em;
  white-space: nowrap;
  animation: lifestyleIn 2.5s ease 1.2s forwards;
}
/* "bano" — empieza con anchura 0 pegado a la R */
.lur-anim .bano {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-hueso);
  letter-spacing: -0.01em;
  margin-left: -0.04em;
  /* Caja vertical para que no se corten descendentes */
  padding: 0.1em 0.1em 0.25em 0;
  margin-bottom: -0.25em;
  animation: banoOpen 2.5s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
@keyframes banoOpen {
  from { max-width: 0; opacity: 0; }
  to   { max-width: 3em; opacity: 1; }
}

@keyframes lifestyleIn {
  0%   { opacity: 0; }
  30%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Respeto a usuarios con preferencia "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .lur-anim .word { max-width: none; animation: none; }
  .lur-anim .bano { max-width: none; opacity: 1; animation: none; }
  .lur-anim .sp { width: 0.3em; animation: none; }
  .lur-anim .word-2 { opacity: 1; animation: none; }
  .lur-anim .sp { animation: none; width: 0.45em; }
}