/* ============================================================
   PANICHINI.COM — MAQUETA NAVEGABLE v1
   Sistema: "Panichini Experiencial Contemporáneo"
   Identidad madre (tokens constantes) + atmósferas por sección
   ============================================================ */

/* ---------- 1. TOKENS DE MARCA MADRE (nunca cambian) ---------- */
:root {
  /* Base */
  --pan-marfil:    #F7F2EA;
  --pan-blanco:    #FDFBF7;
  --pan-carbon:    #2B2320;
  --pan-noche:     #1E1A17;
  --pan-texto:     #4A3F38;

  /* El hilo dorado — transversal a todas las atmósferas */
  --pan-oro:       #B99657;
  --pan-oro-claro: #D4BC8B;

  /* Acentos de línea */
  --pan-rosa:      #D9A7A0;
  --pan-rosa-viejo:#C08578;
  --pan-chocolate: #5C4033;
  --pan-madera:    #8A6B4F;
  --pan-madera-clara: #C9B49A;
  --pan-menta:     #A8C3B5;
  --pan-verde:     #6F7F6A;

  /* Tipografía */
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-cuerpo:  'Lato', 'Segoe UI', sans-serif;

  /* Atmósfera por defecto: ecosistema (claro premium) */
  --fondo:   var(--pan-marfil);
  --superficie: var(--pan-blanco);
  --tinta:   var(--pan-carbon);
  --tinta-suave: var(--pan-texto);
  --acento:  var(--pan-oro);

  /* Motion */
  --dur: 450ms;
  --curva: cubic-bezier(.25,.6,.3,1);
}

/* ---------- 2. ATMÓSFERAS (remapeo de tokens por sección) ---------- */
[data-atmosfera="empresas"] {
  --fondo: var(--pan-noche);
  --superficie: #28221E;
  --tinta: var(--pan-marfil);
  --tinta-suave: #CBBFB2;
  --acento: var(--pan-oro);
}
[data-atmosfera="lounge"] {
  --fondo: #F9EFEC;
  --superficie: var(--pan-blanco);
  --tinta: var(--pan-carbon);
  --tinta-suave: #6B5049;
  --acento: var(--pan-rosa-viejo);
}
[data-atmosfera="boutique"] {
  --fondo: var(--pan-blanco);
  --superficie: #FFFFFF;
  --tinta: var(--pan-carbon);
  --tinta-suave: #6E5A50;
  --acento: var(--pan-chocolate);
}
[data-atmosfera="casona"] {
  --fondo: #F3EDE3;
  --superficie: var(--pan-blanco);
  --tinta: #35291F;
  --tinta-suave: #6E5E4C;
  --acento: var(--pan-madera);
  --dur: 650ms; /* la Casona respira más lento */
}
[data-atmosfera="convenios"] {
  --fondo: #F2F5F1;
  --superficie: var(--pan-blanco);
  --tinta: var(--pan-carbon);
  --tinta-suave: #5C6B5F;
  --acento: var(--pan-verde);
}

/* ---------- 3. BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-cuerpo);
  font-weight: 400;
  color: var(--pan-carbon);
  background: var(--pan-marfil);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

section {
  background: var(--fondo);
  color: var(--tinta);
  padding: 96px 24px;
  position: relative;
  transition: background 600ms ease;
}
.contenedor { max-width: 1120px; margin: 0 auto; }
.angosto { max-width: 780px; margin: 0 auto; }
.centrado { text-align: center; }

/* ---------- 4. TIPOGRAFÍA ---------- */
h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
p  { color: var(--tinta-suave); max-width: 62ch; }
.centrado p { margin-left: auto; margin-right: auto; }
em.marca { font-style: italic; color: var(--acento); }

/* Kicker — marcador de sección heredado de los catálogos */
.kicker {
  display: inline-block;
  font-family: var(--f-cuerpo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
}

/* Línea dorada que se "dibuja" */
.linea-oro {
  width: 64px; height: 1px;
  background: var(--acento);
  margin: 26px auto;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 900ms var(--curva) 200ms;
}
.on .linea-oro, .linea-oro.on { transform: scaleX(1); }

/* Ornamento: divisor caligráfico discreto */
.ornamento {
  color: var(--acento);
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: 0.6em;
  opacity: .8;
  user-select: none;
}

/* ---------- 5. HEADER ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  transition: background 400ms ease, box-shadow 400ms ease, padding 400ms ease;
}
.header.solido {
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(185,150,87,.25);
  padding: 12px 32px;
}
.header .logo {
  font-family: var(--f-cuerpo);
  font-weight: 700;
  letter-spacing: 0.42em;
  font-size: 1rem;
  text-decoration: none;
  color: var(--pan-carbon);
}
.header.sobre-oscuro:not(.solido) .logo,
.header.sobre-oscuro:not(.solido) .nav a { color: var(--pan-marfil); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--pan-carbon);
  position: relative; padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--pan-oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--curva);
}
.nav a:hover::after { transform: scaleX(1); }
.nav .activo::after { transform: scaleX(1); }

/* Menú móvil (la "pestañita" de categorías) */
.menu-movil-btn {
  display: none;
  background: none; border: 1px solid rgba(185,150,87,.5);
  color: var(--pan-carbon);
  font-size: 1.3rem; line-height: 1;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer; z-index: 101;
}
.header.sobre-oscuro:not(.solido) .menu-movil-btn { color: var(--pan-marfil); }
.nav-movil {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(247,242,234,.98);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--curva);
}
.nav-movil.abierto { opacity: 1; pointer-events: auto; }
.nav-movil a {
  font-family: var(--f-display);
  font-size: 1.7rem; font-weight: 600;
  color: var(--pan-carbon); text-decoration: none;
  padding: 10px 20px;
}
.nav-movil a.activo { color: var(--pan-oro); }
.nav-movil .mini-kicker {
  font-family: var(--f-cuerpo); font-size: .62rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--pan-oro); margin: 18px 0 2px;
}
.nav-movil .btn { margin-top: 22px; font-size: .85rem; }
@media (max-width: 960px) {
  .menu-movil-btn { display: flex; }
}

/* ---------- 6. BOTONES ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-cuerpo);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 15px 34px;
  text-decoration: none;
  border: 1px solid var(--pan-oro);
  color: inherit;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 350ms var(--curva);
  background: transparent;
  cursor: pointer;
}
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--pan-oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform 350ms var(--curva);
  z-index: -1;
}
.btn:hover { color: var(--pan-blanco); }
.btn:hover::before { transform: scaleX(1); }
.btn--lleno { background: var(--pan-oro); color: var(--pan-blanco); }
.btn--lleno::before { background: var(--pan-carbon); }
.grupo-btn { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- 7. HERO ---------- */
.hero {
  min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 140px 24px 90px;
  position: relative;
  overflow: hidden;
}
.hero-fondo {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(217,167,160,.16), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(185,150,87,.14), transparent 50%),
    var(--fondo);
}
[data-atmosfera="empresas"] .hero-fondo {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(185,150,87,.14), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(92,64,51,.30), transparent 50%),
    var(--pan-noche);
}
[data-atmosfera="casona"] .hero-fondo {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(201,180,154,.35), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(111,127,106,.14), transparent 50%),
    var(--fondo);
}
/* Foto real de hero + veladura + movimiento lento */
.hero-fondo .foto-hero {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 24s ease-in-out infinite alternate;
}
.hero-fondo .velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,242,234,.9) 0%, rgba(247,242,234,.58) 50%, rgba(247,242,234,.92) 100%);
}
[data-atmosfera="empresas"] .hero-fondo .velo {
  background: linear-gradient(180deg, rgba(30,26,23,.82) 0%, rgba(30,26,23,.58) 50%, rgba(30,26,23,.88) 100%);
}
[data-atmosfera="casona"] .hero-fondo .velo {
  background: linear-gradient(180deg, rgba(243,237,227,.92) 0%, rgba(243,237,227,.6) 50%, rgba(243,237,227,.92) 100%);
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Banda de foto full-bleed entre secciones */
.banda-foto {
  min-height: 420px;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 960px) { .banda-foto { background-attachment: scroll; min-height: 300px; } }

.hero-contenido { position: relative; z-index: 1; max-width: 860px; }
.hero .bajada {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 300;
  margin: 22px auto 36px;
  max-width: 56ch;
}

/* ---------- 8. RESALTADOS BLANCOS — la tarjeta premium clara ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid rgba(185,150,87,.28);
  padding: 40px 34px;
  box-shadow: 0 18px 45px -28px rgba(43,35,32,.22);
  transition: transform 400ms var(--curva), box-shadow 400ms var(--curva);
}
.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -30px rgba(43,35,32,.32);
}
[data-atmosfera="empresas"] .tarjeta {
  /* resaltado claro DENTRO del modo noche: el blanco premium como contraste */
  background: var(--pan-blanco);
  color: var(--pan-carbon);
  border-color: rgba(185,150,87,.45);
}
[data-atmosfera="empresas"] .tarjeta h3 { color: var(--pan-carbon); }
[data-atmosfera="empresas"] .tarjeta p,
[data-atmosfera="empresas"] .tarjeta li { color: var(--pan-texto); }

/* ---------- 9. GRILLA DE MUNDOS (home) ---------- */
.mundos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.mundo {
  position: relative;
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  text-decoration: none;
  color: var(--pan-blanco);
  overflow: hidden;
  border: 1px solid rgba(185,150,87,.2);
  transition: transform 450ms var(--curva);
}
.mundo:hover { transform: translateY(-6px); }
.mundo .foto {
  position: absolute; inset: 0; z-index: 0;
  transition: transform 1200ms var(--curva);
}
.mundo:hover .foto { transform: scale(1.04); }
.mundo::after { /* velo para legibilidad */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(30,26,23,.08) 0%, rgba(30,26,23,.38) 45%, rgba(30,26,23,.9) 100%);
}
.mundo .kicker { text-shadow: 0 1px 8px rgba(30,26,23,.55); }
.mundo > * { position: relative; z-index: 2; }
.mundo .kicker { margin-bottom: 6px; font-size: .62rem; }
.mundo h3 { color: var(--pan-blanco); margin-bottom: 6px; }
.mundo p { color: rgba(253,251,247,.85); font-size: .9rem; max-width: none; }
.mundo .cta-mini {
  margin-top: 14px; font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pan-oro-claro);
}

/* fotografía real (inline background-image) o placeholder por atmósfera */
.foto { background-color: #B9A88F; background-position: center; background-size: cover; background-repeat: no-repeat; }
.foto--empresas { background: linear-gradient(150deg, #3A2F27, #1E1A17 60%), #1E1A17; }
.foto--lounge   { background: linear-gradient(150deg, #E4B7AE, #C08578 70%); }
.foto--boutique { background: linear-gradient(150deg, #EADFD3, #C9A99A 70%); }
.foto--casona   { background: linear-gradient(150deg, #C9B49A, #8A6B4F 70%); }
.foto--convenios{ background: linear-gradient(150deg, #C4D6CA, #6F7F6A 70%); }
.foto--pasteleria{ background: linear-gradient(150deg, #E8D6C4, #5C4033 90%); }
.foto .etiqueta-foto {
  position: absolute; top: 14px; left: 14px;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(253,251,247,.75);
  border: 1px dashed rgba(253,251,247,.5);
  padding: 4px 8px;
}

/* ---------- 10. PILARES ---------- */
.pilares {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 56px;
}
.pilar { text-align: center; padding: 30px 18px; }
.pilar .numeral {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.1rem; color: var(--acento); display: block; margin-bottom: 12px;
}
.pilar h3 { font-size: 1.25rem; margin-bottom: 8px; }
.pilar p { font-size: .88rem; max-width: none; }

/* ---------- 11. PROCESO 01 → 04 ---------- */
.proceso {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 26px; margin-top: 60px;
  counter-reset: paso;
}
.paso { position: relative; padding-top: 26px; }
.paso .num {
  font-family: var(--f-display);
  font-size: 3.4rem; font-weight: 500; font-style: italic;
  color: var(--acento);
  line-height: 1; display: block; margin-bottom: 14px;
}
.paso h3 { font-size: 1.15rem; margin-bottom: 8px; }
.paso p { font-size: .88rem; max-width: none; }
.paso::before { /* línea conectora */
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--acento), transparent);
  opacity: .5;
}

/* ---------- 12. FICHA DE SERVICIO: menús y acordeones ---------- */
.menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.menus--dos { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; }
.menu-card h3 {
  font-size: 1.5rem;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(185,150,87,.35);
}
.menu-card .tipo {
  display: block; font-size: .64rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--pan-oro); margin-bottom: 4px;
}
.menu-card ul { list-style: none; }
.menu-card li {
  font-size: .92rem; color: var(--pan-texto);
  padding: 7px 0 7px 22px; position: relative;
}
.menu-card li::before {
  content: "·"; position: absolute; left: 4px;
  color: var(--pan-oro); font-weight: 700;
}

details.acordeon {
  background: var(--superficie);
  border: 1px solid rgba(185,150,87,.3);
  margin-bottom: 14px;
}
[data-atmosfera="empresas"] details.acordeon { background: var(--pan-blanco); }
details.acordeon summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 26px;
  font-family: var(--f-display);
  font-size: 1.25rem; font-weight: 600;
  color: var(--pan-carbon);
}
details.acordeon summary::-webkit-details-marker { display: none; }
details.acordeon summary::after {
  content: "+";
  font-family: var(--f-display);
  color: var(--pan-oro); font-size: 1.6rem; font-weight: 500;
  transition: transform 300ms var(--curva);
}
details.acordeon[open] summary::after { transform: rotate(45deg); }
details.acordeon .cuerpo {
  padding: 0 26px 24px;
  columns: 2; column-gap: 40px;
}
details.acordeon .cuerpo li {
  break-inside: avoid;
  font-size: .89rem; color: var(--pan-texto);
  padding: 5px 0 5px 18px; position: relative; list-style: none;
}
details.acordeon .cuerpo li::before {
  content: "·"; position: absolute; left: 0; color: var(--pan-oro);
}
.nota-validacion {
  font-size: .78rem; font-style: italic;
  color: var(--tinta-suave); opacity: .85;
  margin-top: 18px;
}

/* Bloque "incluye" */
.incluye { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 46px; }
.incluye .tarjeta h3 { margin-bottom: 16px; font-size: 1.3rem; }
.incluye ul { list-style: none; }
.incluye li {
  font-size: .92rem; padding: 6px 0 6px 26px; position: relative; color: var(--pan-texto);
}
.incluye li::before {
  content: "—"; position: absolute; left: 0; color: var(--pan-oro);
}

/* ---------- 13. CASONA: rasgos y ritmo patrimonial ---------- */
.rasgos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 56px; }
.rasgo {
  background: var(--superficie);
  border: 1px solid rgba(138,107,79,.3);
  padding: 34px 30px;
  position: relative;
}
.rasgo::before, .rasgo::after { /* esquineros tipo moldura */
  content: ""; position: absolute; width: 22px; height: 22px;
  border-color: var(--acento); border-style: solid; opacity: .7;
}
.rasgo::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.rasgo::after  { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }
.rasgo h3 { font-size: 1.3rem; margin-bottom: 8px; }
.rasgo p { font-size: .9rem; max-width: none; }
.franja-foto {
  min-height: 380px; position: relative;
  border: 1px solid rgba(185,150,87,.25);
}

/* ---------- 14. EXPERIENCIAS (lounge) ---------- */
.experiencias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.exp {
  background: var(--superficie);
  padding: 30px 24px;
  border-top: 2px solid var(--acento);
  box-shadow: 0 14px 34px -24px rgba(43,35,32,.25);
}
.exp h3 { font-size: 1.25rem; margin-bottom: 8px; }
.exp p { font-size: .86rem; max-width: none; }

/* ---------- 15. CTA FINAL Y FOOTER ---------- */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 700px; margin: 0 auto 18px; }
.footer {
  background: var(--pan-carbon);
  color: rgba(253,251,247,.8);
  padding: 70px 24px 40px;
  text-align: center;
}
.footer .oso-pie {
  width: 92px; margin: 0 auto 16px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  transition: transform 400ms var(--curva);
}
.footer .oso-pie:hover { transform: translateY(-5px) rotate(-2deg); }
.footer .logo-pie {
  font-weight: 700; letter-spacing: .42em; font-size: 1rem;
  color: var(--pan-blanco); margin-bottom: 10px;
}
.footer .frase {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.25rem; color: var(--pan-oro-claro);
  margin-bottom: 34px;
}
.footer .contacto {
  display: flex; gap: 34px; justify-content: center; flex-wrap: wrap;
  font-size: .88rem; margin-bottom: 34px;
}
.footer .contacto a { color: rgba(253,251,247,.85); text-decoration: none; }
.footer .contacto a:hover { color: var(--pan-oro-claro); }
.footer .legal { font-size: .74rem; opacity: .55; }

/* Botón flotante WhatsApp */
.whatsapp-flotante {
  position: fixed; bottom: 26px; right: 26px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--pan-oro); color: var(--pan-blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(43,35,32,.45);
  transition: transform 300ms var(--curva), background 300ms;
}
.whatsapp-flotante:hover { transform: translateY(-4px) scale(1.05); background: var(--pan-carbon); }

/* ---------- 15b. FORMULARIO DE COTIZACIÓN (multipaso) ---------- */
.form-cotizar {
  max-width: 760px; margin: 56px auto 0;
  background: var(--superficie);
  border: 1px solid rgba(185,150,87,.3);
  box-shadow: 0 18px 45px -28px rgba(43,35,32,.22);
  padding: 44px 40px;
}
.form-progreso {
  display: flex; gap: 8px; margin-bottom: 36px;
}
.form-progreso .tramo {
  flex: 1; height: 3px; background: rgba(185,150,87,.22);
  position: relative; overflow: hidden;
}
.form-progreso .tramo::before {
  content: ""; position: absolute; inset: 0;
  background: var(--pan-oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--curva);
}
.form-progreso .tramo.hecho::before { transform: scaleX(1); }
.paso-form { display: none; }
.paso-form.activo { display: block; }
.paso-form.activo.anim-next { animation: panPasoDer 360ms var(--curva); }
.paso-form.activo.anim-prev { animation: panPasoIzq 360ms var(--curva); }
@keyframes panPasoDer { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes panPasoIzq { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.paso-error {
  color: #c0392b; font-size: .85rem; font-weight: 700;
  margin: 12px 0 0; padding: 10px 14px;
  background: rgba(192,57,43,.06); border-left: 3px solid #c0392b;
}
@media (prefers-reduced-motion: reduce) {
  .paso-form.activo.anim-next, .paso-form.activo.anim-prev { animation: none; }
}
.paso-form .titulo-paso {
  font-family: var(--f-display); font-size: 1.6rem; font-weight: 600;
  margin-bottom: 6px; color: var(--pan-carbon);
}
.paso-form .sub-paso { font-size: .85rem; color: var(--tinta-suave); margin-bottom: 26px; }

.campo { margin-bottom: 20px; }
.campo label {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--pan-chocolate); margin-bottom: 8px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 14px;
  font-family: var(--f-cuerpo); font-size: .95rem; color: var(--pan-carbon);
  background: var(--pan-blanco);
  border: 1px solid rgba(185,150,87,.4);
  outline: none;
  transition: border-color 250ms, box-shadow 250ms;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--pan-oro);
  box-shadow: 0 0 0 3px rgba(185,150,87,.18);
}
.campo textarea { min-height: 96px; resize: vertical; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .dos-columnas { grid-template-columns: 1fr; } }

/* Selector de servicio como cards */
.opciones-servicio {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.opciones-servicio label {
  display: block; padding: 15px 16px;
  border: 1px solid rgba(185,150,87,.35);
  background: var(--pan-blanco);
  font-size: .9rem; color: var(--pan-carbon);
  cursor: pointer;
  transition: border-color 250ms, background 250ms, transform 250ms var(--curva);
}
.opciones-servicio label:hover { transform: translateY(-2px); border-color: var(--pan-oro); }
.opciones-servicio input { display: none; }
.opciones-servicio input:checked + span::before { content: "✓  "; color: var(--pan-oro); font-weight: 700; }
.opciones-servicio input:checked ~ * { }
.opciones-servicio label:has(input:checked) {
  border-color: var(--pan-oro);
  background: rgba(185,150,87,.1);
}
.form-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; }
.form-nav .btn { padding: 13px 26px; }
.btn--fantasma { border-color: rgba(43,35,32,.25); }

.resumen-cotizacion {
  background: var(--pan-marfil);
  border-left: 2px solid var(--pan-oro);
  padding: 22px 24px; margin-bottom: 24px;
  font-size: .92rem; color: var(--pan-texto);
}
.resumen-cotizacion strong { color: var(--pan-carbon); }

/* Productos de pastelería (boutique) */
.productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 50px; }
@media (max-width: 700px) { .productos { grid-template-columns: 1fr; } }
.producto {
  background: var(--superficie);
  border: 1px solid rgba(92,64,51,.2);
  border-top: 2px solid var(--acento);
  padding: 26px 24px;
  box-shadow: 0 14px 34px -26px rgba(43,35,32,.2);
}
.producto .encabezado { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.producto h3 { font-size: 1.2rem; }
.producto .precio {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.05rem; color: var(--pan-oro); white-space: nowrap;
}
.producto p { font-size: .87rem; max-width: none; }

/* Beneficios de convenio */
.beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 50px; }
@media (max-width: 700px) { .beneficios { grid-template-columns: 1fr; } }
.beneficio {
  background: var(--superficie);
  border: 1px solid rgba(111,127,106,.3);
  border-top: 2px solid var(--acento);
  padding: 26px 24px;
}
.beneficio h3 { font-size: 1.15rem; margin-bottom: 6px; }
.beneficio p { font-size: .88rem; max-width: none; }

/* ---------- 15c. RECORRIDO / CARRUSEL CASONA ---------- */
.recorrido { max-width: 1000px; margin: 52px auto 0; }
.carrusel-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 18px;
}
.carrusel-chip {
  font-family: var(--f-cuerpo); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 16px; cursor: pointer;
  background: transparent;
  border: 1px solid rgba(138,107,79,.45);
  color: var(--tinta-suave);
  transition: background 250ms, color 250ms, border-color 250ms, transform 250ms var(--curva);
}
.carrusel-chip:hover { transform: translateY(-2px); border-color: var(--acento); color: var(--tinta); }
.carrusel-chip.activa { background: var(--acento); border-color: var(--acento); color: var(--pan-blanco); }
.carrusel {
  position: relative;
  background: var(--pan-noche);
  border: 1px solid rgba(185,150,87,.3);
  box-shadow: 0 24px 60px -34px rgba(43,35,32,.5);
  overflow: hidden;
}
.carrusel-escenario {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
@media (max-width: 600px) { .carrusel-escenario { aspect-ratio: 4 / 5; } }
.carrusel-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--curva);
  pointer-events: none;
}
.carrusel-slide.activa { opacity: 1; pointer-events: auto; }
.carrusel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 9s ease-out both;
  animation-play-state: paused; /* solo anima la slide activa (evita 24 repaints simultáneos) */
}
.carrusel-slide.activa img { animation-play-state: running; }
.carrusel-etiqueta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 30px 26px;
  background: linear-gradient(180deg, transparent, rgba(30,26,23,.88));
  color: var(--pan-marfil);
}
.carrusel-etiqueta .kick {
  font-size: .64rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--pan-oro-claro); display: block; margin-bottom: 6px;
}
.carrusel-etiqueta h3 { color: var(--pan-blanco); font-size: 1.7rem; line-height: 1.1; }
.carrusel-etiqueta p { color: rgba(253,251,247,.85); font-size: .92rem; margin-top: 2px; max-width: none; }

/* flechas */
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,26,23,.4);
  border: 1px solid rgba(185,150,87,.5);
  color: var(--pan-marfil);
  font-family: var(--f-display); font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: background 250ms, transform 250ms var(--curva);
  backdrop-filter: blur(4px);
}
.carrusel-flecha:hover { background: var(--pan-oro); transform: translateY(-50%) scale(1.06); }
.carrusel-flecha.prev { left: 16px; }
.carrusel-flecha.next { right: 16px; }
@media (max-width: 600px) { .carrusel-flecha { width: 40px; height: 40px; font-size: 1.3rem; } .carrusel-flecha.prev { left: 8px; } .carrusel-flecha.next { right: 8px; } }

/* contador */
.carrusel-contador {
  position: absolute; top: 16px; right: 18px; z-index: 4;
  font-size: .78rem; letter-spacing: .14em; color: var(--pan-marfil);
  background: rgba(30,26,23,.45); padding: 5px 12px;
  border: 1px solid rgba(185,150,87,.4);
  font-variant-numeric: tabular-nums;
}

/* barra de miniaturas */
.carrusel-tiras {
  display: flex; gap: 8px;
  padding: 12px;
  background: var(--pan-noche);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pan-oro) transparent;
}
.carrusel-tiras::-webkit-scrollbar { height: 6px; }
.carrusel-tiras::-webkit-scrollbar-thumb { background: var(--pan-oro); }
.carrusel-tira {
  flex: 0 0 auto;
  width: 72px; height: 54px;
  object-fit: cover;
  cursor: pointer;
  opacity: .45;
  border: 1px solid transparent;
  transition: opacity 250ms, border-color 250ms, transform 250ms var(--curva);
}
.carrusel-tira:hover { opacity: .8; transform: translateY(-2px); }
.carrusel-tira.activa { opacity: 1; border-color: var(--pan-oro); }

/* barra de progreso autoplay */
.carrusel-progreso {
  position: absolute; left: 0; bottom: 0; height: 3px; z-index: 5;
  background: var(--pan-oro);
  width: 0;
}
.carrusel.reproduciendo .carrusel-progreso { animation: barra 5s linear forwards; }
@keyframes barra { from { width: 0; } to { width: 100%; } }

.recorrido-controles { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.btn-mini {
  font-family: var(--f-cuerpo); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 20px; cursor: pointer;
  background: transparent; border: 1px solid var(--acento); color: var(--tinta);
  transition: background 250ms, color 250ms;
}
.btn-mini:hover { background: var(--acento); color: var(--pan-blanco); }

@media (prefers-reduced-motion: reduce) {
  .carrusel-slide { transition: none; }
  .carrusel-slide img { animation: none; }
  .carrusel.reproduciendo .carrusel-progreso { animation: none; }
}

/* ---------- 16. REVELADO POR SCROLL ---------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
  transition-delay: var(--rv-delay, 0ms);
}
.rv.on { opacity: 1; transform: none; }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 960px) {
  .mundos, .pilares, .proceso, .experiencias { grid-template-columns: repeat(2, 1fr); }
  .menus { grid-template-columns: 1fr; }
  .menus--dos { grid-template-columns: 1fr; }
  .incluye, .rasgos { grid-template-columns: 1fr; }
  details.acordeon .cuerpo { columns: 1; }
  .nav { display: none; } /* maqueta: menú móvil se resuelve en el tema WP */
  .nav-movil-aviso { display: block; }
}
@media (max-width: 600px) {
  section { padding: 64px 18px; }
  .mundos, .pilares, .proceso, .experiencias { grid-template-columns: 1fr; }
  .hero { min-height: 80vh; padding-top: 110px; }
  :root { --dur: 340ms; } /* móvil: animaciones más cortas */
}

/* Palabra rotativa del hero (home) */
.rotador {
  display: inline-block;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.6em;
  line-height: 1.2;
  color: var(--pan-oro);
  transition: opacity 400ms ease, transform 400ms ease;
}
.rotador.saliendo { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) { .rotador { transition: none; } }

/* ---------- 17b. TRANSICIÓN ENTRE PÁGINAS ---------- */
/* El fondo del documento acompaña la atmósfera de la página: evita el destello claro al entrar a páginas oscuras (Empresas). */
html { background: #F7F2EA; }
html:has(section.hero[data-atmosfera="empresas"]) { background: #1E1A17; }
body { animation: panPageIn 480ms ease both; }
body.pan-saliendo { opacity: 0; transition: opacity 240ms ease; }
@keyframes panPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.pan-saliendo { opacity: 1; transition: none; }
}

/* ---------- 18. ACCESIBILIDAD / MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .linea-oro { transform: scaleX(1); transition: none; }
  .mundo .foto, .mundo, .tarjeta, .btn::before { transition: none; }
  .hero-fondo .foto-hero { animation: none; }
  .banda-foto { background-attachment: scroll; }
}
:focus-visible { outline: 2px solid var(--pan-oro); outline-offset: 3px; }