/*
Theme Name: Rostick Child
Template: hello-elementor
Description: Child theme for Rostick — mobilhome importer (B2B)
Version: 2.0
*/

/* ===================================================================
   FUENTES
   Fraunces (display serif, importación europea / artesanía)
   Inter (UI / body)
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

/* ===================================================================
   SISTEMA DE DISEÑO — variables globales
=================================================================== */
:root {
  /* Colores — paleta alineada al logo Rostick (naranja cálido + navy) */
  --brand-deep: #0A1A2F;
  --brand-night: #13284A;
  --brand-sand: #EFE5D3;
  --brand-bone: #F8F2E6;
  --brand-amber: #F07A1F;         /* naranja coral del logo (cinta superior) — modo PRO */
  --brand-amber-dark: #C9502E;    /* terracota profunda (transición a sombra) */
  --brand-gold: #E8B828;          /* dorado (ola inferior del logo) */
  --brand-olive: #7A7B1F;         /* olivo oscuro (sombra inferior) */
  /* Paleta dual particular (logo azul + verde) — ola superior azul / ola inferior verde */
  --brand-blue: #2C7BC1;          /* azul medio del logo dual (modo PARTICULAR principal) */
  --brand-blue-soft: #6EAADC;     /* azul claro para acentos sobre navy */
  --brand-blue-deep: #163A6A;     /* azul profundo del logo dual (sombras) */
  --brand-green: #2E9748;         /* verde medio del logo dual (modo PARTICULAR acento) */
  --brand-green-bright: #7BC142;  /* verde lima del logo dual (highlight celebración) */
  --brand-green-dark: #0E5E3A;    /* verde oscuro del logo dual (sombras / hover) */
  --ok: #2E8B57;
  --err: #C0392B;
  --text: #111827;
  --muted: #4B5563;
  --border: #E5E7EB;
  --bg: #FAFAF7;
  --white: #FFFFFF;

  /* Tipografía */
  --fs-h1: clamp(2.25rem, 5vw + 1rem, 4.25rem);
  --fs-h2: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.5vw + .8rem, 1.5rem);
  --fs-lead: clamp(1.05rem, .5vw + .9rem, 1.2rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --lh-tight: 1.1;
  --lh-body: 1.6;

  /* Spacing (4pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Transiciones */
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ===================================================================
   RESET / BASE
=================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  color: var(--brand-deep);
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--s-4); }

a { color: var(--track-1-deep); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--track-1); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--track-1);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.section {
  padding: clamp(64px, 10vh, 120px) 0;
}

.section--alt { background: var(--brand-bone); }
.section--dark { background: var(--brand-deep); color: rgba(255,255,255,.85); }
.section--dark h2, .section--dark h3 { color: var(--white); }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--track-1-deep);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow { color: var(--track-1-soft); }

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 62ch;
}

/* ===================================================================
   BOTONES
=================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--r-md);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--track-grad);
  color: var(--track-on-grad);
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.btn-primary:hover {
  background: var(--track-grad-hover);
  color: var(--track-on-grad);
  transform: translateY(-1px);
  box-shadow: var(--track-glow-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.7);
}
.btn-ghost:hover {
  background: var(--white);
  color: var(--brand-deep);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--brand-deep);
  border: 1.5px solid var(--brand-deep);
}
.btn-outline:hover {
  background: var(--brand-deep);
  color: var(--white);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--white);
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.4);
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.btn-link:hover { border-color: var(--track-1-soft); color: var(--white); gap: var(--s-3); }

/* ===================================================================
   HEADER
=================================================================== */
.site-header { display: none !important; }

.rostick-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  transition: padding .2s var(--ease), box-shadow .2s var(--ease);
}

.rostick-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

/* En .is-scrolled SOLO cambian sombra + opacidad de fondo. NUNCA padding/altura
   — al cambiar de tamaño aparecía un loop de oscilación cerca del threshold. */
.rostick-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(10,26,47,.12);
  background: rgba(255,255,255,.94);
  border-bottom-color: rgba(10,26,47,.10);
}

.rostick-logo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--brand-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.rostick-logo__mark-wrap {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  transition: transform .3s var(--ease);
}
.rostick-logo__mark {
  position: absolute;
  inset: 0;
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.25));
  transition: opacity .35s ease;
}
/* Default (cualquier página fuera del home, o home en modo pro): logo naranja. */
.rostick-logo__mark--pro         { opacity: 1; }
.rostick-logo__mark--particular  { opacity: 0; }

/* Conmutación: body recibe la clase desde el JS del hero V07. */
body.body-mode-particular .rostick-logo__mark--pro         { opacity: 0; }
body.body-mode-particular .rostick-logo__mark--particular  { opacity: 1; }
body.body-mode-pro        .rostick-logo__mark--pro         { opacity: 1; }
body.body-mode-pro        .rostick-logo__mark--particular  { opacity: 0; }

.rostick-logo:hover .rostick-logo__mark-wrap { transform: rotate(-8deg) scale(1.05); }
/* Antes is-scrolled encogía el logo 60→48px y eso disparaba el bug de
   oscilación del sticky header. Ahora el logo mantiene tamaño constante. */
.rostick-logo__wordmark { line-height: 1; }
@media (max-width: 480px) {
  .rostick-logo__wordmark { display: none; }
  .rostick-logo__mark-wrap,
  .rostick-logo__mark { width: 52px; height: 52px; }
}

.rostick-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rostick-nav a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--brand-deep);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color .2s var(--ease);
}
.rostick-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--track-1);
  transition: width .25s var(--ease);
}
.rostick-nav a:hover::after { width: 100%; }

.rostick-nav .cta-distribuidor a {
  background: var(--brand-deep);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.rostick-nav .cta-distribuidor a::after { display: none; }
.rostick-nav .cta-distribuidor a:hover { background: var(--brand-night); color: var(--white); }

.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; color: var(--brand-deep); }
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .rostick-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    padding: var(--s-5);
    border-bottom: 1px solid var(--border);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }
  .rostick-nav li { width: 100%; }
  .rostick-nav a { display: block; padding: 14px 0; width: 100%; text-align: center; }
  .rostick-header.nav-open .rostick-nav { transform: scaleY(1); opacity: 1; }
  .rostick-nav .cta-distribuidor a { text-align: center; }
}

/* ===================================================================
   HERO — portada visible con gradiente direccional
=================================================================== */
.hero {
  position: relative;
  min-height: clamp(560px, 85vh, 800px);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    url('/wp-content/uploads/rostick/hero.jpg') center right / cover no-repeat,
    linear-gradient(135deg, #0A1A2F 0%, #13284A 55%, #2a4a70 100%);
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(10,26,47,.88) 0%,
    rgba(10,26,47,.72) 35%,
    rgba(10,26,47,.18) 70%,
    rgba(10,26,47,0) 100%);
}

.hero__content {
  max-width: 680px;
  padding: clamp(48px, 10vh, 112px) 0;
  color: var(--white);
}
.hero__content h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 5.2vw + .4rem, 4.5rem);
  margin-bottom: var(--s-5);
}
.hero__sub {
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.88);
  max-width: 56ch;
  margin-bottom: var(--s-7);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}
.hero__microcopy {
  margin-top: var(--s-6);
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  max-width: 50ch;
}

@media (max-width: 767px) {
  .hero { background-position: center top; align-items: flex-end; }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(10,26,47,.15) 0%,
      rgba(10,26,47,.55) 40%,
      rgba(10,26,47,.92) 100%);
  }
  .hero__content { padding-top: 45vh; }
}

/* ===================================================================
   VÍDEO (facade pattern)
=================================================================== */
.video-section { text-align: center; }
.video-section h2 { margin-bottom: var(--s-3); }
.video-section .lead { margin: 0 auto var(--s-7); text-align: center; }

.yt-facade {
  position: relative;
  aspect-ratio: 16/9;
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--brand-deep);
  box-shadow: 0 20px 60px -20px rgba(10,26,47,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.yt-facade:hover { transform: translateY(-4px); box-shadow: 0 30px 80px -25px rgba(10,26,47,.55); }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.yt-facade:hover img { transform: scale(1.03); }
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: none; border: 0; cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
  transition: transform .25s var(--ease);
}
.yt-facade:hover .yt-play { transform: translate(-50%, -50%) scale(1.1); }
.yt-facade:focus-visible { outline: 3px solid var(--track-1); outline-offset: 4px; }

/* ===================================================================
   SOBRE NOSOTROS
=================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.about-grid__visual {
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(10,26,47,.15), rgba(240,122,31,.1)),
    url('/wp-content/uploads/rostick/nosotros.jpg') center / cover;
  background-color: var(--brand-sand);
  box-shadow: 0 30px 60px -30px rgba(10,26,47,.35);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.stat__num {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 600;
  color: var(--brand-deep);
  line-height: 1;
}
.stat__label {
  font-size: .85rem;
  color: var(--muted);
  margin-top: var(--s-2);
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .about-grid__visual { aspect-ratio: 16/10; order: -1; }
}

/* ===================================================================
   MODELOS (cards)
=================================================================== */
.models-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
.model-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display: flex; flex-direction: column;
}
.model-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -15px rgba(10,26,47,.18);
  border-color: transparent;
}
.model-card__img {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  background: var(--brand-sand) center / cover;
  margin-bottom: var(--s-5);
}
.model-card h3 { margin-bottom: var(--s-2); }
.model-card__meta {
  font-size: .85rem;
  color: var(--track-1-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--s-2);
}
.model-card p { color: var(--muted); flex-grow: 1; }
.model-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--brand-deep);
  font-weight: 600;
  margin-top: var(--s-3);
  transition: gap .2s var(--ease);
}
.model-card__link:hover { gap: var(--s-3); color: var(--track-1-deep); }

@media (max-width: 900px) { .models-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   POR QUÉ ELEGIRNOS
=================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}
.why-item {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.why-item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(10,26,47,.15); }
.why-icon {
  flex: 0 0 56px; height: 56px;
  border-radius: 14px;
  background: var(--track-grad);
  color: var(--track-on-grad);
  display: flex; align-items: center; justify-content: center;
}
.why-icon svg { width: 28px; height: 28px; }
.why-item h3 { margin-bottom: var(--s-2); font-size: 1.25rem; }
.why-item p { color: var(--muted); margin: 0; }

@media (max-width: 767px) { .why-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   CONTACTO
=================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--s-8);
  align-items: start;
}
.contact-info { color: rgba(255,255,255,.9); }
.contact-info h2 { color: var(--white); }
.contact-info .lead { color: rgba(255,255,255,.75); }
.contact-list { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.contact-list li { display: flex; align-items: center; gap: var(--s-3); font-size: 1rem; }
.contact-list a { color: rgba(255,255,255,.95); }
.contact-list a:hover { color: var(--track-1-soft); }
.contact-icon {
  flex: 0 0 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--track-1-soft);
}
.contact-icon svg { width: 20px; height: 20px; }

.contact-form {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
  color: var(--text);
}

/* Fluent Forms overrides */
.contact-form .ff-el-form-control,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  height: 52px;
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-form textarea { min-height: 140px; height: auto; resize: vertical; }
.contact-form .ff-el-form-control:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--track-1);
  box-shadow: 0 0 0 4px rgba(var(--track-1-rgb), .2);
}
.contact-form label { font-weight: 600; font-size: .9rem; color: var(--brand-deep); margin-bottom: 6px; display: block; }
.contact-form .ff-btn-submit {
  background: var(--track-grad) !important;
  color: var(--track-on-grad) !important;
  font-weight: 600 !important;
  padding: 16px 28px !important;
  border-radius: var(--r-md) !important;
  border: 0 !important;
  font-size: 1rem !important;
}
.contact-form .ff-btn-submit:hover { background: var(--track-grad-hover) !important; transform: translateY(-1px); box-shadow: var(--track-glow-hover); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ===================================================================
   FOOTER
=================================================================== */
.rostick-footer {
  background: var(--brand-deep);
  color: rgba(255,255,255,.7);
  padding: var(--s-9) 0 var(--s-6);
}
.rostick-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
  padding: 0 clamp(20px, 4vw, 40px);
  max-width: 1280px;
  margin-left: auto; margin-right: auto;
}
.rostick-footer h4 {
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--s-4);
}
.rostick-footer p, .rostick-footer a { font-size: .95rem; line-height: 1.7; color: rgba(255,255,255,.7); }
.rostick-footer a:hover { color: var(--track-1-soft); }
.rostick-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.rostick-footer-brand {
  font-family: 'Fraunces', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.rostick-footer-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.rostick-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: var(--s-5) clamp(20px, 4vw, 40px) 0;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  font-size: .825rem;
  color: rgba(255,255,255,.5);
}

@media (max-width: 900px) { .rostick-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rostick-footer-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   UTILIDADES scroll-reveal
=================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
   CATÁLOGO DE MODELOS
=================================================================== */
.catalogo-hero {
  background: var(--brand-deep);
  color: var(--brand-bone);
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}
.catalogo-hero h1 { color: var(--brand-bone); margin: 0 0 var(--s-3); }
.catalogo-hero .lead { color: rgba(246,241,232,.85); font-size: var(--fs-lead); margin: 0; }

.catalogo-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-7);
  padding: var(--s-7) var(--s-5);
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 900px) { .catalogo-layout { grid-template-columns: 1fr; } }

/* Toggle de filtros — solo visible en mobile */
.catalogo-filtros-toggle {
  display: none;
}
@media (max-width: 900px) {
  .catalogo-filtros-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font: inherit;
    color: var(--brand-deep);
    cursor: pointer;
    margin-bottom: var(--s-4);
    transition: border-color .2s, background .2s;
  }
  .catalogo-filtros-toggle:hover { border-color: var(--track-1); }
  .catalogo-filtros-toggle__label { font-weight: 600; }
  .catalogo-filtros-toggle__badge {
    background: var(--track-1);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
  }
  .catalogo-filtros-toggle__count {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
  }
  .catalogo-filtros-toggle__chevron {
    transition: transform .2s;
    color: var(--muted);
  }
  .catalogo-filtros-toggle[aria-expanded="true"] .catalogo-filtros-toggle__chevron {
    transform: rotate(180deg);
  }
}

.catalogo-filtros {
  position: sticky;
  top: var(--s-5);
  z-index: 10;
  align-self: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
@media (max-width: 900px) {
  .catalogo-filtros {
    position: static;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s, padding .25s, margin .25s;
  }
  .catalogo-filtros[data-collapsed="true"] {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    opacity: 0;
    pointer-events: none;
    border-color: transparent;
  }
  .catalogo-filtros[data-collapsed="false"] {
    max-height: 1200px;
    margin-bottom: var(--s-5);
    opacity: 1;
  }
}
.catalogo-filtros h2 { font-size: 1.25rem; margin: 0 0 var(--s-4); }
.filtro-grupo { margin-bottom: var(--s-4); }
.filtro-grupo label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--s-2); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.filtro-grupo select,
.filtro-grupo input[type="number"] {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  background: var(--white);
}
.filtro-rango { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.catalogo-filtros .btn-primary { width: 100%; margin-top: var(--s-3); }
.catalogo-filtros .btn-link { display: block; text-align: center; margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-small); }
.filtro-resumen { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-small); }

.modelos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-5);
}
.modelo-card {
  background: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.modelo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(10,26,47,.1); }
.modelo-card__img { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--brand-sand); }
.modelo-card__img img { width: 100%; height: 100%; object-fit: cover; }
.modelo-card__img .placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: var(--fs-small); }
.modelo-card__body { padding: var(--s-4); }
.modelo-ubi { display: inline-block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--track-1-deep); font-weight: 600; margin-bottom: var(--s-2); }
.modelo-card h3 { font-size: 1.1rem; margin: 0 0 var(--s-3); }
.modelo-card h3 a { color: var(--brand-deep); text-decoration: none; }
.modelo-card h3 a:hover { color: var(--track-1-deep); }
.modelo-specs { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: flex; gap: var(--s-3); color: var(--muted); font-size: var(--fs-small); }
.modelo-specs li { display: flex; align-items: center; }
.modelo-precio { font-size: 1.05rem; color: var(--text); }
.modelo-precio strong { color: var(--brand-deep); font-size: 1.25rem; }

.badge { position: absolute; top: var(--s-3); left: var(--s-3); padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.badge-nueva { background: var(--ok); color: var(--white); }
.badge-pedido { background: var(--track-1); color: var(--track-on-1); }

.pagination { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-7); }
.pagination .page-numbers { padding: var(--s-2) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--brand-deep); text-decoration: none; }
.pagination .page-numbers.current { background: var(--brand-deep); color: var(--brand-bone); border-color: var(--brand-deep); }

.no-results { text-align: center; padding: var(--s-8) var(--s-5); background: var(--white); border-radius: var(--r-md); }

/* ===================================================================
   FICHA MODELO (single)
=================================================================== */
.modelo-single .container { max-width: 1200px; padding: var(--s-6) var(--s-5); margin: 0 auto; }
.breadcrumbs { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--s-5); }
.breadcrumbs a { color: var(--muted); }

.modelo-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
@media (max-width: 900px) { .modelo-layout { grid-template-columns: 1fr; } }

/* Estilos legacy de .gal-principal eliminados — el slider real vive en .gal-stage/.gal-slider más abajo. */

.modelo-info { background: var(--white); padding: var(--s-6); border-radius: var(--r-md); border: 1px solid var(--border); align-self: start; position: sticky; top: var(--s-5); }
.modelo-info h1 { font-size: var(--fs-h2); margin: var(--s-2) 0; }
.modelo-ref { color: var(--muted); font-size: var(--fs-small); margin: 0 0 var(--s-4); }
.modelo-destacado { background: var(--brand-bone); padding: var(--s-4); border-radius: var(--r-sm); border-left: 3px solid var(--track-1); margin: var(--s-4) 0; font-size: var(--fs-small); }
.modelo-specs-full { list-style: none; padding: 0; margin: var(--s-5) 0; display: flex; gap: var(--s-5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--s-4) 0; }
.modelo-specs-full li { color: var(--muted); font-size: var(--fs-small); }
.modelo-specs-full strong { display: block; color: var(--brand-deep); font-size: 1.5rem; font-family: 'Fraunces', serif; }

.modelo-precio-grande { margin: var(--s-5) 0; text-align: center; }
.modelo-precio-grande small { display: block; color: var(--muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; }
.modelo-precio-grande span { font-family: 'Fraunces', serif; font-size: 2.5rem; color: var(--brand-deep); font-weight: 600; }

.btn-lg { padding: var(--s-4) var(--s-6); font-size: 1.1rem; width: 100%; text-align: center; }

.modelo-descripcion { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--border); max-width: 800px; }

/* ===================================================================
   HERO — escena mobilhome (scroll-driven + intro + flotación)
=================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  --hero-progress: 0;
  /* Whimsy: "la brújula del importador" — el mobilhome sigue sutilmente
     al cursor como guiño al claim "entregados donde los necesites". */
  --hero-pointer-x: 0;
  --hero-pointer-y: 0;
}
.hero > .container { position: relative; z-index: 2; }

.hero__scene {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  perspective: 1400px;
  perspective-origin: 60% 60%;
}

/* Capa 1 — scroll-driven cinematográfico: parallax + tilt 3D + blur al salir */
.hero__mobilhome-wrap {
  position: absolute;
  right: clamp(-40px, -1vw, 20px);
  top: 50%;
  width: clamp(500px, 58vw, 980px);
  max-width: 62%;
  will-change: transform, filter;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  /* El puntero suma un yaw/pitch muy discreto al transform del scroll.
     Se atenúa a 0 cuando el hero sale del viewport (1 - progress). */
  transform:
    translate3d(
      calc(var(--hero-pointer-x, 0) * 6px * (1 - var(--hero-progress, 0))),
      calc(-50% + 20px - var(--hero-progress, 0) * 160px + var(--hero-pointer-y, 0) * 4px * (1 - var(--hero-progress, 0))),
      0
    )
    scale(calc(0.9 + var(--hero-progress, 0) * 0.22))
    rotateX(calc(var(--hero-progress, 0) * 6deg + var(--hero-pointer-y, 0) * -1.2deg * (1 - var(--hero-progress, 0))))
    rotateY(calc(var(--hero-progress, 0) * -10deg + var(--hero-pointer-x, 0) * 2.2deg * (1 - var(--hero-progress, 0))))
    rotateZ(calc(var(--hero-progress, 0) * -2deg));
  filter:
    drop-shadow(0 calc(20px + var(--hero-progress, 0) * 60px) calc(30px + var(--hero-progress, 0) * 50px) rgba(10,26,47, calc(.2 + var(--hero-progress, 0) * .25)))
    blur(calc(var(--hero-progress, 0) * var(--hero-progress, 0) * 3px));
  transition: filter .1s linear, transform .35s cubic-bezier(.22,.85,.3,1);
}

/* Capa 2 — flotación orgánica continua (respiratoria, no senoidal plana) */
.hero__mobilhome {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  will-change: transform;
  transform-origin: center bottom;
  animation:
    hero-fade-in 1.1s cubic-bezier(.22,.85,.3,1) .2s forwards,
    hero-breathe 7s cubic-bezier(.45,.05,.55,.95) 1s infinite;
}
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* Breathing orgánico: 4 keyframes, no simétricos, ligera expansión */
@keyframes hero-breathe {
  0%   { transform: translateY(0)    rotate(0)      scale(1);     }
  35%  { transform: translateY(-10px) rotate(-.6deg) scale(1.004); }
  65%  { transform: translateY(-18px) rotate(-1.4deg) scale(1.01);  }
  100% { transform: translateY(0)    rotate(0)      scale(1);     }
}

/* Parallax invertido del contenido: texto sube más lento que la casa */
.hero__content {
  transform: translate3d(0, calc(var(--hero-progress, 0) * -40px), 0);
  will-change: transform;
}

/* Haz de luz cinematográfico — pasa diagonal al scrollear */
.hero__sweep {
  position: absolute;
  top: -20%; left: 40%;
  width: 30%;
  height: 140%;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 220, 150, calc(var(--hero-progress, 0) * .35 * (1 - var(--hero-progress, 0)) * 4)) 50%,
    transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform:
    translateX(calc(-50% + var(--hero-progress, 0) * 80%))
    rotate(12deg);
  filter: blur(20px);
}

@keyframes hero-intro {
  0%   { opacity: 0; filter: blur(6px); transform: translate3d(0, 40px, 0) scale(.94); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 20px, 0) scale(.96); }
}

/* Sweep de luz — intensidad aumenta con scroll hasta ~50%, luego baja */
.hero__sweep {
  position: absolute;
  top: 0; right: -15%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent 35%,
    rgba(255,255,255, calc(var(--hero-progress) * .22 * (1 - var(--hero-progress)) * 4)) 50%,
    transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(calc(var(--hero-progress) * 30%));
}

/* Parallax del contenido: sube un pelín más lento */
.hero__content {
  transform: translate3d(0, calc(var(--hero-progress) * -8px), 0);
  will-change: transform;
}

.hero__watermark-mini {
  position: absolute;
  left: -60px;
  top: 18%;
  width: clamp(180px, 22vw, 320px);
  opacity: .06;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero__mobilhome { animation: hero-fade-in 1s forwards; }
  .hero__mobilhome-wrap, .hero__sweep, .hero__content { transform: none; background: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .hero__mobilhome-wrap { width: 62vw; max-width: 560px; top: 50%; }
}

/* Móvil: casa decorativa al fondo */
@media (max-width: 767px) {
  .hero__mobilhome-wrap {
    width: 118vw;
    max-width: none;
    right: -14vw;
    top: auto;
    bottom: -6%;
    opacity: .28;
  }
  .hero__watermark-mini,
  .hero__sweep { display: none; }
}

/* ===================================================================
   PORTAL PRO — registro + área
=================================================================== */
.registro-pro { background: linear-gradient(135deg, var(--brand-deep), var(--brand-night)); min-height: 100vh; padding: var(--s-8) var(--s-4); }
.registro-pro__card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 56px);
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
.registro-pro h1 { font-size: var(--fs-h2); margin: 0 0 var(--s-3); }
.registro-pro .lead { color: var(--muted); margin-bottom: var(--s-6); }

.form-pro .form-group { margin-bottom: var(--s-4); }
.form-pro .form-group label { display: block; font-weight: 600; margin-bottom: var(--s-2); font-size: var(--fs-small); color: var(--brand-deep); }
.form-pro input {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.form-pro input:focus { outline: none; border-color: var(--brand-amber); box-shadow: 0 0 0 3px rgba(240,122,31,.18); }
.form-pro .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .form-pro .form-row { grid-template-columns: 1fr; } }
.form-pro .form-group--highlight {
  background: var(--brand-bone);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--brand-amber);
  margin-bottom: var(--s-6);
}
.form-pro .form-group--highlight small { color: var(--muted); font-size: .8rem; display: block; margin-top: var(--s-2); }
.form-pro .btn-primary.btn-lg { width: 100%; margin-top: var(--s-4); }
.form-pie { text-align: center; margin-top: var(--s-5); color: var(--muted); font-size: var(--fs-small); }

.alert { padding: var(--s-4); border-radius: var(--r-sm); margin-bottom: var(--s-5); }
.alert ul { margin: 0; padding-left: var(--s-5); }
.alert-ok { background: #E6F4EA; color: #1F5A37; border-left: 3px solid var(--ok); }
.alert-ok h2 { color: var(--ok); margin: 0 0 var(--s-2); }
.alert-err { background: #FDECEA; color: #8B2A21; border-left: 3px solid var(--err); }

.area-pro__hero {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-night));
  color: var(--white);
  padding: var(--s-7) 0 var(--s-6);
}
.area-pro__hero h1 { color: var(--white); margin: var(--s-2) 0 var(--s-3); font-size: var(--fs-h2); }
.area-pro__hero .lead { color: rgba(255,255,255,.85); }
.area-pro__hero .eyebrow { color: var(--brand-amber); }
.area-pro__acciones { margin-top: var(--s-4); }
.area-pro__acciones .btn-link { color: rgba(255,255,255,.85); }

.badge-pro { background: var(--brand-deep); color: var(--brand-amber); }
.modelo-card--pro { border: 1px solid rgba(240,122,31,.25); }
.modelo-card--pro .modelo-precio small { display: block; color: var(--brand-amber-dark); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }

/* ===================================================================
   FORMULARIO LEAD (shortcode reutilizable)
=================================================================== */
.lead-form-wrapper { max-width: 680px; margin: var(--s-8) auto; padding: 0 var(--s-4); }
.lead-form-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 20px 50px rgba(10,26,47,.08);
  border: 1px solid var(--border);
}
.lead-form-card h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-5); }
.lead-form__modelo { background: var(--brand-bone); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); border-left: 3px solid var(--track-1); margin: 0 0 var(--s-5); }
.lead-form__modelo span { color: var(--muted); font-size: var(--fs-small); }
.lead-form .form-group { margin-bottom: var(--s-4); }
.lead-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .lead-form .form-row { grid-template-columns: 1fr; } }
.lead-form label { display: block; font-weight: 600; font-size: var(--fs-small); color: var(--brand-deep); margin-bottom: var(--s-2); }
.lead-form input, .lead-form textarea {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.lead-form input:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--track-1);
  box-shadow: 0 0 0 3px rgba(var(--track-1-rgb), .18);
}
.lead-form__tipo { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.lead-form__tipo legend { padding: 0 var(--s-2); color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.lead-form__tipo label { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-5); font-weight: 500; cursor: pointer; }
.lead-form__tipo input[type="radio"] { width: auto; accent-color: var(--track-1); }
.lead-form .btn-primary.btn-lg { width: 100%; margin-top: var(--s-3); }
.lead-form__legal { font-size: .8rem; color: var(--muted); text-align: center; margin-top: var(--s-4); }
.lead-form__legal a { color: var(--track-1-deep); }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden; }

.modelo-lead-form { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--border); }

/* ===================================================================
   PÁGINA CONTACTO
=================================================================== */
.pagina-contacto { background: var(--bg); }
.contacto-hero {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-night));
  color: var(--white);
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}
.contacto-hero h1 { color: var(--white); margin: var(--s-2) 0 var(--s-3); }
.contacto-hero .lead { color: rgba(255,255,255,.85); max-width: 60ch; margin: 0 auto; }
.contacto-hero .eyebrow { color: var(--track-1-soft); }

.contacto-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-7);
  padding: var(--s-7) var(--s-5);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) { .contacto-layout { grid-template-columns: 1fr; } }

.contacto-info h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-5); }
.contacto-canales { list-style: none; padding: 0; margin: 0 0 var(--s-7); display: grid; gap: var(--s-4); }
.contacto-canales li { padding: var(--s-4); background: var(--white); border-radius: var(--r-md); border: 1px solid var(--border); }
.contacto-canales strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: var(--s-2); }
.contacto-canales a { color: var(--brand-deep); font-weight: 600; }
.contacto-canales a:hover { color: var(--track-1); }

.contacto-contenido { margin-bottom: var(--s-6); color: var(--muted); }
.contacto-cta-pro {
  background: var(--brand-bone);
  padding: var(--s-5);
  border-radius: var(--r-md);
  border-left: 3px solid var(--brand-amber);
}
.contacto-cta-pro h3 { margin: 0 0 var(--s-2); font-size: 1.1rem; }
.contacto-cta-pro p { margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--fs-small); }

.contacto-form .lead-form-wrapper { margin: 0; padding: 0; max-width: none; }

/* ===================================================================
   FERIAS
=================================================================== */
.ferias-hero {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-night));
  color: var(--white);
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}
.ferias-hero h1 { color: var(--white); margin: var(--s-2) 0 var(--s-3); }
.ferias-hero .lead { color: rgba(255,255,255,.85); max-width: 60ch; margin: 0 auto; }
.ferias-hero .eyebrow { color: var(--track-1-soft); }

.ferias-seccion { padding: var(--s-7) var(--s-4); max-width: 1280px; margin: 0 auto; }
.ferias-seccion h2 { font-size: var(--fs-h2); margin-bottom: var(--s-5); }
.ferias-seccion--pasadas { border-top: 1px solid var(--border); }
.ferias-seccion--pasadas h2 { color: var(--muted); font-size: 1.5rem; }

.ferias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-5); }
.feria-card { background: var(--white); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.feria-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(10,26,47,.1); }
.feria-card__img { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--brand-sand); }
.feria-card__img img { width: 100%; height: 100%; object-fit: cover; }
.feria-card__fecha { position: absolute; bottom: var(--s-3); left: var(--s-3); background: var(--white); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.feria-card__fecha strong { display: block; font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--brand-deep); line-height: 1; }
.feria-card__fecha span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.feria-card__body { padding: var(--s-4); }
.feria-card h3 { font-size: 1.1rem; margin: 0 0 var(--s-3); }
.feria-card h3 a { color: var(--brand-deep); text-decoration: none; }
.feria-card h3 a:hover { color: var(--track-1); }
.feria-specs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); color: var(--muted); font-size: var(--fs-small); }
.feria-card--pasada { opacity: .7; }

.feria-single .container { max-width: 1100px; padding: var(--s-6) var(--s-5); margin: 0 auto; }

/* Portada/hero de la feria con foto de fondo */
.feria-portada {
  background-color: var(--brand-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  padding: var(--s-8) 0 var(--s-9);
  position: relative;
}
.feria-portada .container { padding-top: var(--s-5); padding-bottom: var(--s-5); max-width: 1100px; }
.feria-portada__content { max-width: 720px; margin-top: var(--s-6); }
.feria-portada .badge { position: static; display: inline-block; margin-bottom: var(--s-4); }
.feria-portada .eyebrow { display: block; color: var(--track-1-soft); font-size: .9rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; margin-bottom: var(--s-3); }
.feria-portada h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 4.5vw + .5rem, 3.75rem);
  margin: 0 0 var(--s-4);
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.feria-portada__fecha {
  font-size: 1.15rem;
  color: rgba(255,255,255,.92);
  margin: 0;
}
.breadcrumbs--light { color: rgba(255,255,255,.7); }
.breadcrumbs--light a { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.3); }
.breadcrumbs--light a:hover { color: var(--track-1); }
.breadcrumbs--light span { color: var(--white); }

.feria-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
@media (max-width: 900px) { .feria-layout { grid-template-columns: 1fr; } }
.feria-imagen { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/10; margin-bottom: var(--s-5); }
.feria-imagen img { width: 100%; height: 100%; object-fit: cover; }
.feria-contenido h1 { font-size: var(--fs-h2); margin: var(--s-2) 0 var(--s-4); }
.feria-info { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); align-self: start; position: sticky; top: var(--s-5); }
.feria-info__list { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.feria-info__list li { border-bottom: 1px solid var(--border); padding: var(--s-3) 0; }
.feria-info__list li:last-child { border: 0; }
.feria-info__list strong { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: var(--s-1); }
.feria-info .btn-primary { width: 100%; text-align: center; margin-bottom: var(--s-3); }

/* Highlights de feria — shortcode [rostick_feria_highlights] */
.feria-highlights {
  margin: var(--s-8) 0;
  padding: var(--s-7) 0;
  border-top: 1px solid var(--border);
}
.feria-highlights__head { text-align: center; max-width: 680px; margin: 0 auto var(--s-7); }
.feria-highlights__head .eyebrow { color: var(--track-1-deep); display: block; margin-bottom: var(--s-3); }
.feria-highlights__head h2 { font-size: var(--fs-h2); margin: 0; }
.feria-highlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-5);
}
.highlight-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(10,26,47,.08);
  border-color: rgba(240,122,31,.35);
}
.highlight-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--brand-bone), #fff);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(240,122,31,.15);
}
.highlight-card h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--s-3);
  color: var(--brand-deep);
  line-height: 1.25;
}
.highlight-card p { color: var(--muted); margin: 0; font-size: .95rem; line-height: 1.55; }
.highlight-card--2 .highlight-card__icon { background: linear-gradient(135deg, #FFE4C4, #FFCB8F); }
.highlight-card--3 .highlight-card__icon { background: linear-gradient(135deg, #F8F2E6, #EFE5D3); }
.highlight-card--4 .highlight-card__icon { background: linear-gradient(135deg, #FFE9C9, #FFD399); }
.highlight-card--5 .highlight-card__icon { background: linear-gradient(135deg, #FEE4D0, #FDB994); }
.highlight-card--6 .highlight-card__icon { background: linear-gradient(135deg, #FFF3DC, #FCDE9F); }
.highlight-card--7 .highlight-card__icon { background: linear-gradient(135deg, #F8F2E6, #EFE5D3); }

/* Sección mapa de feria */
.feria-seccion-mapa {
  background: var(--brand-bone);
  padding: var(--s-7) 0;
  margin-top: var(--s-8);
}
.feria-seccion-mapa .container { max-width: 1100px; padding: 0 var(--s-5); }
.feria-seccion-mapa header { text-align: center; margin-bottom: var(--s-5); max-width: 680px; margin-left: auto; margin-right: auto; }
.feria-seccion-mapa .eyebrow { color: var(--track-1-deep); display: block; margin-bottom: var(--s-2); }
.feria-seccion-mapa h2 { font-size: var(--fs-h2); margin: 0 0 var(--s-3); }
.feria-seccion-mapa .lead { color: var(--muted); margin: 0; }
.feria-mapa { border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(10,26,47,.12); margin-bottom: var(--s-3); }
.feria-seccion-mapa .btn-link { display: inline-block; margin-top: var(--s-3); color: var(--track-1-deep); font-weight: 600; }

/* Sección reserva de feria */
.feria-seccion-reserva {
  padding: var(--s-8) var(--s-5);
  max-width: 900px;
  margin: 0 auto;
}
.feria-reserva-header { text-align: center; margin-bottom: var(--s-6); }
.feria-reserva-header .eyebrow { color: var(--track-1-deep); display: block; margin-bottom: var(--s-2); }
.feria-reserva-header h2 { font-size: var(--fs-h2); margin: 0 0 var(--s-3); }
.feria-reserva-header .lead { color: var(--muted); max-width: 560px; margin: 0 auto; }

/* Banner próxima feria en home */
.feria-banner {
  padding: var(--s-6) var(--s-4);
  max-width: 1200px;
  margin: 0 auto;
}
.feria-banner__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) clamp(20px, 3vw, 36px);
  border-radius: var(--r-lg);
  background-color: var(--brand-deep);
  background-size: cover;
  background-position: center right;
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 20px 60px rgba(10,26,47,.18);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feria-banner__inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(10,26,47,.28);
}
.feria-banner__fecha {
  background: var(--white);
  color: var(--brand-deep);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  text-align: center;
  min-width: 88px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.feria-banner__dia {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--brand-deep);
}
.feria-banner__mes {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--track-1-deep);
  font-weight: 700;
  margin-top: 4px;
}
.feria-banner__texto h2 {
  color: var(--white);
  font-size: clamp(1.25rem, 2.2vw + .4rem, 1.75rem);
  margin: var(--s-1) 0 var(--s-2);
  line-height: 1.2;
}
.feria-banner__eyebrow {
  color: var(--track-1-soft);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.feria-banner__meta {
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
}
.feria-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--track-grad);
  color: var(--track-on-grad);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .95rem;
  transition: background .2s var(--ease);
  white-space: nowrap;
}
.feria-banner__inner:hover .feria-banner__cta { background: var(--track-grad-hover); color: var(--white); }

/* ===================================================================
   COOKIE BANNER
=================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 780px;
  width: calc(100% - 32px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px rgba(10,26,47,.25), 0 6px 20px rgba(10,26,47,.1);
  z-index: 9999;
  animation: cookie-in .5s cubic-bezier(.2,.8,.2,1) .3s both;
}
.cookie-banner.is-hidden { animation: cookie-out .3s ease-out forwards; }
@keyframes cookie-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes cookie-out {
  to { opacity: 0; transform: translate(-50%, 20px); }
}
.cookie-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
}
.cookie-banner__text h2 { font-size: 1.05rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.cookie-banner__text p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.cookie-banner__text a { color: var(--track-1-deep); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: var(--s-3); flex-shrink: 0; }
.cookie-banner__btn { cursor: pointer; border: 0; font: inherit; }
.cookie-banner .btn-link { padding: var(--s-3) var(--s-4); color: var(--muted); background: transparent; }
.cookie-banner .btn-link:hover { color: var(--brand-deep); }
.cookie-banner .btn-primary { padding: var(--s-3) var(--s-5); }
@media (max-width: 640px) {
  .cookie-banner__inner { grid-template-columns: 1fr; gap: var(--s-3); }
  .cookie-banner__actions { grid-column: 1; width: 100%; }
  .cookie-banner__actions .btn-primary { flex: 1; }
}

@media (max-width: 760px) {
  .feria-banner__inner {
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .feria-banner__cta { grid-column: 1 / -1; justify-content: center; }
  .feria-banner__texto h2 { font-size: 1.15rem; }
}

/* ===================================================================
   BLOG
=================================================================== */
.blog-hero {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-night));
  color: var(--white);
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}
.blog-hero h1 { color: var(--white); margin: var(--s-2) 0 var(--s-3); }
.blog-hero .lead { color: rgba(255,255,255,.85); max-width: 60ch; margin: 0 auto; }
.blog-hero .eyebrow { color: var(--track-1-soft); }
.blog-main > .container { padding: var(--s-7) var(--s-4); max-width: 1200px; margin: 0 auto; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-6); }
.blog-card { background: var(--white); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(10,26,47,.1); }
.blog-card__img { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--brand-sand); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__img .placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); }
.blog-card__body { padding: var(--s-5); }
.blog-card__meta { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--track-1-deep); font-weight: 600; }
.blog-card h2, .blog-card h3 { font-size: 1.3rem; margin: var(--s-2) 0 var(--s-3); }
.blog-card h2 a, .blog-card h3 a { color: var(--brand-deep); text-decoration: none; }
.blog-card h2 a:hover, .blog-card h3 a:hover { color: var(--track-1); }
.blog-card p { color: var(--muted); font-size: var(--fs-small); margin: 0 0 var(--s-3); }

.blog-single .container { max-width: 760px; padding: var(--s-6) var(--s-5); margin: 0 auto; }
.blog-single__header { margin: var(--s-5) 0 var(--s-6); }
.blog-single__meta { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--s-3); text-transform: uppercase; letter-spacing: .06em; }
.blog-single__header h1 { font-size: var(--fs-h1); margin: 0 0 var(--s-4); }
.blog-single__header .lead { color: var(--muted); font-size: var(--fs-lead); }
.blog-single__cover { border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s-6); aspect-ratio: 16/9; }
.blog-single__cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-single__content { font-size: 1.1rem; line-height: 1.75; }
.blog-single__content h2 { margin-top: var(--s-7); }
.blog-single__content h3 { margin-top: var(--s-6); }
.blog-single__content img { border-radius: var(--r-sm); }
.blog-single__content blockquote { border-left: 3px solid var(--track-1); padding: var(--s-3) var(--s-5); color: var(--muted); font-style: italic; margin: var(--s-5) 0; }
.blog-tags { margin-top: var(--s-7); }
.blog-tags a { display: inline-block; padding: 4px 10px; background: var(--brand-bone); border-radius: 999px; color: var(--track-1-deep); font-size: .8rem; margin-right: var(--s-2); text-decoration: none; }
.blog-tags a:hover { background: var(--track-1); color: var(--white); }
.blog-related { max-width: 1200px; margin: var(--s-8) auto; padding: var(--s-6) var(--s-5); border-top: 1px solid var(--border); }
.blog-related h2 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }

/* ===================================================================
   ROSTICK PARTNERS (B2B) — landing /partners/
=================================================================== */
.partners { color: var(--text); }
.partners .section { padding: var(--s-9) 0; }
.partners .section--dark { background: var(--brand-deep); color: var(--brand-bone); }
.partners .section--dark h2,
.partners .section--dark h3 { color: var(--white); }
.partners .section--sand { background: var(--brand-bone); }
.partners .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5); }
.partners .container--narrow { max-width: 860px; }

.partners .section-header { text-align: center; margin-bottom: var(--s-8); }
.partners .section-header .eyebrow,
.partners .eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-amber-dark); margin: 0 0 var(--s-3); }
.partners .section-header--invert .eyebrow { color: var(--brand-gold); }
.partners .section-header h2 { font-size: var(--fs-h2); margin: 0 0 var(--s-4); color: var(--brand-deep); }
.partners .section-header--invert h2 { color: var(--white); }
.partners .section-header .lead { font-size: var(--fs-lead); color: var(--muted); max-width: 640px; margin: 0 auto; }
.partners .section-header--invert .lead { color: rgba(248,242,230,.78); }
.partners .hl-amber { color: var(--brand-amber); font-style: normal; }

/* ---- 1. HERO ---- */
.partners-hero { position: relative; color: var(--brand-bone); min-height: 92vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.partners-hero__bg { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(1200px 700px at 20% 10%, rgba(240,122,31,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 90%, rgba(232,184,40,.16), transparent 60%),
    linear-gradient(135deg, #06111F 0%, #0A1A2F 45%, #13284A 100%); }
.partners-hero__bg::after { content: ""; position: absolute; inset: 0; background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%); }
.partners-hero__inner { max-width: 1100px; width: 100%; margin: 0 auto; padding: var(--s-9) var(--s-5); }
.partners-hero__eyebrow { font-size: .82rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-gold); margin: 0 0 var(--s-4); }
.partners-hero__title { font-size: var(--fs-h1); line-height: 1.05; margin: 0 0 var(--s-5); color: var(--white); font-weight: 600; }
.partners-hero__title em { font-style: italic; color: var(--brand-gold); }
.partners-hero__lead { font-size: var(--fs-lead); color: rgba(248,242,230,.88); max-width: 620px; margin: 0 0 var(--s-6); }
.partners-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }
.partners-hero__ctas .btn-ghost { border-color: rgba(255,255,255,.45); color: var(--white); }
.partners-hero__ctas .btn-ghost:hover { background: rgba(255,255,255,.08); }
.partners-hero__pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.partners-hero__pills li { font-size: .85rem; color: rgba(248,242,230,.85); padding: 6px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; backdrop-filter: blur(4px); background: rgba(255,255,255,.04); }

/* ---- 2. PERFILES ---- */
.perfiles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.perfil-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.perfil-card:hover { transform: translateY(-4px); border-color: var(--brand-amber); box-shadow: 0 18px 40px rgba(10,26,47,.08); }
.perfil-card__icon { font-size: 1.8rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--brand-bone); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.perfil-card h3 { font-size: 1.15rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.perfil-card p { color: var(--muted); font-size: var(--fs-small); margin: 0; line-height: 1.55; }

/* ---- 3. SERVICIOS 3x3 ---- */
.servicios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); overflow: hidden; }
.servicio-card { background: var(--brand-deep); padding: var(--s-6); transition: background .35s var(--ease); }
.servicio-card:hover { background: var(--brand-night); }
.servicio-card__num { display: inline-block; font-family: 'Fraunces', serif; font-size: .95rem; color: var(--brand-gold); letter-spacing: .08em; margin-bottom: var(--s-3); }
.servicio-card h3 { font-size: 1.1rem; margin: 0 0 var(--s-2); color: var(--white); }
.servicio-card p { color: rgba(248,242,230,.74); font-size: var(--fs-small); margin: 0; line-height: 1.55; }

/* ---- 4. PAQUETES ---- */
.paquetes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
.paquete-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-7) var(--s-6); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.paquete-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,26,47,.08); }
.paquete-card--featured { background: var(--brand-deep); color: var(--brand-bone); border-color: var(--brand-amber); transform: translateY(-8px); box-shadow: 0 24px 50px rgba(10,26,47,.22); }
.paquete-card--featured:hover { transform: translateY(-12px); }
.paquete-card--featured h3,
.paquete-card--featured .paquete-card__tag { color: var(--white); }
.paquete-card--featured .paquete-card__sub,
.paquete-card--featured .paquete-card__list li { color: rgba(248,242,230,.85); }
.paquete-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--brand-amber); color: var(--white); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(240,122,31,.35); }
.paquete-card__head { margin-bottom: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
.paquete-card--featured .paquete-card__head { border-bottom-color: rgba(255,255,255,.15); }
.paquete-card__tag { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--brand-amber-dark); margin: 0 0 var(--s-2); }
.paquete-card h3 { font-size: 1.6rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.paquete-card__sub { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.paquete-card__list { list-style: none; padding: 0; margin: 0 0 var(--s-6); flex: 1; }
.paquete-card__list li { position: relative; padding: 8px 0 8px 26px; font-size: .95rem; color: var(--text); border-bottom: 1px dashed var(--border); }
.paquete-card--featured .paquete-card__list li { border-bottom-color: rgba(255,255,255,.08); }
.paquete-card__list li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--brand-amber); font-weight: 700; }
.paquete-card--featured .paquete-card__list li::before { color: var(--brand-gold); }
.paquete-card .btn-primary,
.paquete-card .btn-ghost { align-self: stretch; text-align: center; }
.paquetes-nota { text-align: center; margin-top: var(--s-7); color: var(--muted); font-size: var(--fs-small); }
.paquetes-nota a { color: var(--brand-amber-dark); font-weight: 600; }

/* ---- 5. PROCESO ---- */
.proceso-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); counter-reset: step; }
.proceso-step { position: relative; padding-top: var(--s-7); }
.proceso-step__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-amber); color: var(--white); font-weight: 700; font-size: 1.1rem; margin-bottom: var(--s-3); box-shadow: 0 8px 22px rgba(240,122,31,.32); }
.proceso-step h3 { font-size: 1.05rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.proceso-step p { color: var(--muted); font-size: var(--fs-small); margin: 0; line-height: 1.55; }
.proceso-step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--s-7) + 24px); left: 48px; right: calc(-1 * var(--s-5)); height: 1px; background: linear-gradient(to right, var(--brand-amber), transparent); }

/* ---- 6. VENTAJAS ---- */
.ventajas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-7); }
.ventaja { position: relative; padding-left: var(--s-5); border-left: 3px solid var(--brand-amber); }
.ventaja h3 { font-size: 1.1rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.ventaja p { color: var(--muted); font-size: var(--fs-small); margin: 0; line-height: 1.6; }

/* ---- 7. CASOS ---- */
.casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.caso-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; }
.caso-card__meta { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--brand-amber-dark); margin: 0 0 var(--s-3); }
.caso-card h3 { font-size: 1.25rem; margin: 0 0 var(--s-3); color: var(--brand-deep); line-height: 1.25; }
.caso-card > p { color: var(--muted); font-size: .95rem; line-height: 1.6; flex: 1; margin: 0 0 var(--s-5); }
.caso-card__kpis { list-style: none; padding: var(--s-4) 0 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); border-top: 1px dashed var(--border); }
.caso-card__kpis li { display: flex; flex-direction: column; align-items: flex-start; }
.caso-card__kpis strong { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--brand-amber); line-height: 1; }
.caso-card__kpis span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* ---- 8. RED (NÚMEROS + MAPA) ---- */
.red-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.red-numbers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.red-numbers li { display: flex; flex-direction: column; }
.red-numbers__value { font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 4vw, 3.75rem); color: var(--brand-gold); font-weight: 600; line-height: 1; }
.red-numbers__label { color: rgba(248,242,230,.72); font-size: .88rem; margin-top: var(--s-2); letter-spacing: .03em; }

.red-mapa { margin: 0; position: relative; }
.red-mapa__svg { width: 100%; height: auto; max-width: 520px; display: block; margin: 0 auto; }
.red-mapa__land { fill: rgba(255,255,255,.06); stroke: rgba(232,184,40,.35); stroke-width: 1.2; }
.red-point { fill: var(--brand-amber); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 4px 10px rgba(240,122,31,.55)); cursor: help; animation: red-pulse 2.8s var(--ease) infinite; transform-origin: center; }
.red-point--pt { fill: var(--brand-gold); animation-delay: .4s; }
.red-point--fr { fill: var(--brand-amber-dark); animation-delay: .8s; }
.red-point:hover { animation-play-state: paused; r: 9; }
@keyframes red-pulse {
  0%, 100% { r: 5; opacity: .9; }
  50%      { r: 8; opacity: 1; }
}
.red-mapa__caption { text-align: center; font-size: .78rem; color: rgba(248,242,230,.55); margin-top: var(--s-3); font-style: italic; }

/* ---- 9. FAQ ---- */
.faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.faq-item[open] { border-color: var(--brand-amber); box-shadow: 0 10px 24px rgba(10,26,47,.06); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--s-5) var(--s-6); gap: var(--s-4); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--brand-deep); }
.faq-item__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-bone); color: var(--brand-amber-dark); display: grid; place-items: center; font-size: 1.3rem; font-weight: 400; flex-shrink: 0; transition: transform .25s var(--ease), background .25s var(--ease); }
.faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--brand-amber); color: var(--white); }
.faq-item__a { padding: 0 var(--s-6) var(--s-5); color: var(--muted); line-height: 1.65; }
.faq-item__a p { margin: 0; }

/* ---- 10. CTA FINAL + FORM (reutiliza .lead-form-wrapper) ---- */
.partners-cta .lead-form-wrapper { margin-top: var(--s-5); }

/* ---- STICKY CTA ---- */
.partners-sticky-cta { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 90; background: var(--brand-amber); color: var(--white); padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: 0 12px 28px rgba(240,122,31,.4); display: inline-flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease); }
.partners-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.partners-sticky-cta:hover { background: var(--brand-amber-dark); color: var(--white); }

/* ---- Responsive Partners ---- */
@media (max-width: 1024px) {
  .perfiles-grid { grid-template-columns: repeat(2, 1fr); }
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }
  .paquetes-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .paquete-card--featured { transform: none; }
  .paquete-card--featured:hover { transform: translateY(-4px); }
  .proceso-steps { grid-template-columns: repeat(2, 1fr); }
  .proceso-step::after { display: none !important; }
  .ventajas-grid { grid-template-columns: repeat(2, 1fr); }
  .casos-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .red-layout { grid-template-columns: 1fr; gap: var(--s-7); }
  .red-numbers { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .partners .section { padding: var(--s-8) 0; }
  .partners-hero { min-height: 80vh; }
  .partners-hero__inner { padding: var(--s-8) var(--s-5); }
  .partners-hero__ctas .btn-primary,
  .partners-hero__ctas .btn-ghost { width: 100%; text-align: center; }
  .perfiles-grid,
  .servicios-grid,
  .ventajas-grid { grid-template-columns: 1fr; }
  .proceso-steps { grid-template-columns: 1fr; }
  .red-numbers { grid-template-columns: repeat(2, 1fr); }
  .partners-sticky-cta { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); justify-content: center; }
}

/* ===================================================================
   ÁREA PRO v2 — layout compartido
=================================================================== */
.area-pro-shell { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 80px); background: var(--bg); }
.area-pro-sidebar { background: var(--brand-deep); color: var(--brand-bone); position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.area-pro-sidebar__inner { padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; min-height: 100vh; }
.area-pro-sidebar__brand { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--brand-gold); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--s-6); }
.area-pro-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.area-pro-nav a { display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r-sm); color: rgba(248,242,230,.78); text-decoration: none; font-size: .95rem; transition: background .2s var(--ease), color .2s var(--ease); }
.area-pro-nav a:hover { background: rgba(255,255,255,.06); color: var(--white); }
.area-pro-nav li.is-active a { background: var(--brand-amber); color: var(--white); font-weight: 600; }
.area-pro-nav__icon { font-size: 1.1rem; line-height: 1; width: 22px; text-align: center; }
.area-pro-nav__badge { margin-left: auto; background: var(--brand-amber); color: var(--white); font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.area-pro-nav li.is-active .area-pro-nav__badge { background: var(--white); color: var(--brand-amber); }
.area-pro-sidebar__logout { margin: var(--s-5) 0 0; padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.area-pro-sidebar__logout a { color: rgba(248,242,230,.6); text-decoration: none; }
.area-pro-sidebar__logout a:hover { color: var(--brand-amber); }

.area-pro-content { padding: var(--s-6) var(--s-7); max-width: 1100px; }
.area-pro-content__head { margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.area-pro-content__head h1 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); color: var(--brand-deep); margin: 0; }
.area-pro-content__body h2 { font-size: 1.25rem; color: var(--brand-deep); margin: var(--s-7) 0 var(--s-4); }

/* Panel */
.area-pro-welcome { font-size: 1.05rem; color: var(--muted); margin: 0 0 var(--s-6); }
.area-pro-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-7); }
.area-pro-quicklink { display: flex; flex-direction: column; align-items: center; padding: var(--s-5); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--brand-deep); transition: all .25s var(--ease); }
.area-pro-quicklink:hover { border-color: var(--brand-amber); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,26,47,.07); }
.area-pro-quicklink__icon { font-size: 1.8rem; margin-bottom: var(--s-2); }
.area-pro-quicklink__label { font-size: .9rem; font-weight: 600; }

.area-pro-panel-news { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); }
.area-pro-panel-news__list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.area-pro-panel-news__list li { border-bottom: 1px dashed var(--border); }
.area-pro-panel-news__list li:last-child { border-bottom: 0; }
.area-pro-panel-news__list a { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; color: var(--brand-deep); text-decoration: none; }
.area-pro-panel-news__list time { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-amber-dark); min-width: 56px; }
.area-pro-empty { color: var(--muted); font-style: italic; }

/* Responsive */
@media (max-width: 900px) {
  .area-pro-shell { grid-template-columns: 1fr; }
  .area-pro-sidebar { position: relative; max-height: none; }
  .area-pro-sidebar__inner { min-height: auto; padding: var(--s-4) var(--s-5); }
  .area-pro-nav { flex-direction: row; flex-wrap: wrap; gap: var(--s-2); }
  .area-pro-nav a { padding: 8px 10px; font-size: .88rem; }
  .area-pro-sidebar__logout { display: none; }
  .area-pro-content { padding: var(--s-5) var(--s-4); }
  .area-pro-quicklinks { grid-template-columns: repeat(2, 1fr); }
}

/* Área Pro — Tabs, piezas branding, modal, assets */
.ap-tabs { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
.ap-tabs a { padding: var(--s-3) var(--s-4); color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent; transition: all .2s var(--ease); }
.ap-tabs a:hover { color: var(--brand-deep); }
.ap-tabs a.is-active { color: var(--brand-amber); border-bottom-color: var(--brand-amber); }
.ap-intro { color: var(--muted); margin: 0 0 var(--s-5); max-width: 720px; }

.ap-pieza-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-5); }
.ap-pieza { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.ap-pieza:hover { border-color: var(--brand-amber); transform: translateY(-2px); }
.ap-pieza__img { aspect-ratio: 4/3; background: var(--brand-bone); display: grid; place-items: center; overflow: hidden; }
.ap-pieza__img img { width: 100%; height: 100%; object-fit: cover; }
.ap-pieza__placeholder { font-size: 3rem; color: var(--brand-amber-dark); opacity: .5; }
.ap-pieza__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.ap-pieza__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-amber-dark); margin: 0 0 var(--s-2); font-weight: 600; }
.ap-pieza__body h3 { font-size: 1.05rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.ap-pieza__desc { color: var(--muted); font-size: .88rem; margin: 0 0 var(--s-3); flex: 1; }
.ap-pieza__specs { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 var(--s-4); font-size: .82rem; }
.ap-pieza__specs dt { color: var(--muted); }
.ap-pieza__specs dd { margin: 0; color: var(--brand-deep); font-weight: 500; }
.ap-pieza__body .btn-primary { width: 100%; text-align: center; }

.ap-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.ap-modal.is-open { display: flex; align-items: center; justify-content: center; }
.ap-modal__backdrop { position: absolute; inset: 0; background: rgba(10,26,47,.7); backdrop-filter: blur(4px); }
.ap-modal__dialog { position: relative; background: var(--white); border-radius: var(--r-lg); padding: var(--s-7) var(--s-6); max-width: 560px; width: calc(100% - 32px); max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.ap-modal__close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; font-size: 1.8rem; cursor: pointer; color: var(--muted); }
.ap-modal__close:hover { color: var(--brand-amber); }
.ap-modal h2 { font-size: 1.4rem; margin: 0 0 var(--s-4); color: var(--brand-deep); }

.ap-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.ap-asset { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; }
.ap-asset__cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-amber-dark); margin: 0 0 var(--s-2); font-weight: 600; }
.ap-asset h3 { font-size: 1rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.ap-asset p { color: var(--muted); font-size: .85rem; margin: 0 0 var(--s-3); flex: 1; }
.ap-asset__unavailable { color: var(--muted); font-style: italic; font-size: .82rem; }

/* Área Pro — Noticias */
.ap-noticias-list { display: flex; flex-direction: column; gap: var(--s-4); }
.ap-noticia { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); border-left: 4px solid var(--border); }
.ap-noticia--alta    { border-left-color: var(--brand-amber); }
.ap-noticia--urgente { border-left-color: var(--err); }
.ap-noticia__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; font-size: .78rem; }
.ap-noticia__prio { padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: 700; letter-spacing: .1em; font-size: .7rem; }
.ap-noticia__prio--normal  { background: #888; }
.ap-noticia__prio--alta    { background: var(--brand-amber); }
.ap-noticia__prio--urgente { background: var(--err); }
.ap-noticia__cat { color: var(--brand-amber-dark); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.ap-noticia__head time { color: var(--muted); margin-left: auto; }
.ap-noticia h2 { font-size: 1.2rem; margin: 0 0 var(--s-3); color: var(--brand-deep); }
.ap-noticia__body { color: var(--text); line-height: 1.65; }
.ap-pagination { margin-top: var(--s-6); display: flex; gap: var(--s-2); justify-content: center; }
.ap-pagination a, .ap-pagination span { padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); text-decoration: none; color: var(--brand-deep); }
.ap-pagination span.current { background: var(--brand-amber); color: var(--white); border-color: var(--brand-amber); }

/* Área Pro — Catálogo + Material en single-modelo */
.ap-catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.ap-modelo-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: all .25s var(--ease); }
.ap-modelo-card:hover { border-color: var(--brand-amber); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,26,47,.08); }
.ap-modelo-card__link { display: block; padding: var(--s-4); text-decoration: none; color: inherit; }
.ap-modelo-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); margin-bottom: var(--s-3); }
.ap-modelo-card h3 { font-size: 1.05rem; margin: 0 0 var(--s-2); color: var(--brand-deep); }
.ap-modelo-card__specs { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: flex; gap: var(--s-3); color: var(--muted); font-size: .85rem; }
.ap-modelo-card__precio { margin: 0; font-size: .9rem; color: var(--brand-amber-dark); }
.ap-modelo-card__precio strong { color: var(--brand-deep); }

.modelo-material-pro { background: var(--brand-bone); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin: var(--s-6) 0; }
.modelo-material-pro h2 { margin: 0 0 var(--s-3); font-size: 1.2rem; color: var(--brand-deep); }
.modelo-material-pro__precio { margin: 0 0 var(--s-4); color: var(--brand-amber-dark); }
.modelo-material-pro__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.modelo-material-pro__list li { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); }
.modelo-material-pro__missing { color: var(--muted); font-size: .85rem; font-style: italic; }

/* Área Pro — Calculadora */
.ap-calc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6); max-width: 700px; }
.ap-calc__field { margin-bottom: var(--s-5); }
.ap-calc__field label { display: block; font-weight: 600; color: var(--brand-deep); margin-bottom: var(--s-2); }
.ap-calc__field select,
.ap-calc__field input[type="range"] { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--r-sm); }
.ap-calc__field input[type="range"] { padding: 0; accent-color: var(--brand-amber); }
.ap-calc__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-5) 0; }
.ap-calc__result { background: var(--brand-bone); padding: var(--s-4); border-radius: var(--r-sm); }
.ap-calc__result span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.ap-calc__result strong { display: block; font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--brand-deep); }
.ap-calc__result--highlight { background: var(--brand-amber); }
.ap-calc__result--highlight span,
.ap-calc__result--highlight strong { color: var(--white); }
.ap-calc__copied { margin: var(--s-3) 0 0; color: var(--ok); font-size: .9rem; min-height: 1.2em; }

/* Área Pro — Mi cuenta */
.ap-cuenta-ficha { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6); }
.ap-cuenta-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 var(--s-4); }
.ap-cuenta-dl dt { font-weight: 600; color: var(--muted); font-size: .9rem; }
.ap-cuenta-dl dd { margin: 0; color: var(--brand-deep); }
.ap-cuenta-nota { color: var(--muted); font-size: .88rem; font-style: italic; margin: 0; }
.ap-pedidos-tabla { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ap-pedidos-tabla th, .ap-pedidos-tabla td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border); font-size: .92rem; }
.ap-pedidos-tabla th { background: var(--brand-bone); font-weight: 600; color: var(--brand-deep); }
.ap-pedidos-tabla tr:last-child td { border-bottom: 0; }
.ap-estado { font-size: .75rem; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ap-estado--pendiente  { background: #E5E7EB; color: #4B5563; }
.ap-estado--preparando { background: #FEF3C7; color: #92400E; }
.ap-estado--enviado    { background: #DBEAFE; color: #1E40AF; }
.ap-estado--entregado  { background: #D1FAE5; color: #065F46; }
.ap-estado--cancelado  { background: #FEE2E2; color: #991B1B; }

/* Área Pro v2 — Responsive final */
@media (max-width: 640px) {
  .area-pro-content { padding: var(--s-4) var(--s-3); }
  .area-pro-quicklinks { grid-template-columns: 1fr 1fr; }
  .ap-pieza-grid,
  .ap-catalogo-grid { grid-template-columns: 1fr; }
  .ap-calc__results { grid-template-columns: 1fr; }
  .ap-modal__dialog { padding: var(--s-5) var(--s-4); }
  .ap-pedidos-tabla { font-size: .82rem; }
  .ap-pedidos-tabla th, .ap-pedidos-tabla td { padding: var(--s-2) var(--s-3); }
  .modelo-material-pro__list { grid-template-columns: 1fr; }
}

/* ===================================================================
   LENGUAJE DE ESTADOS ESPECIALES (404, confirmación form, empty states)
   Divisor ámbar fino, reutilizable. No usa dorado (reservado para hitos).
=================================================================== */
.amber-rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--brand-amber);
  border: 0;
  margin: 0;
}

/* ===================================================================
   404 · Ruta no encontrada (Rostick B2B, tono técnico)
=================================================================== */
.err404 {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  background: var(--brand-bone);
}

.err404__inner {
  max-width: 760px;
  width: 100%;
  text-align: center;
}

.err404__mark {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto var(--s-5);
}

.err404__mark-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 220px;
  font-weight: 600;
  letter-spacing: -0.02em;
  fill: none;
  stroke: var(--brand-amber);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: err404-draw 800ms cubic-bezier(.65,.05,.35,1) forwards;
}

@keyframes err404-draw {
  to { stroke-dashoffset: 0; }
}

.err404__amber-rule {
  margin: 0 auto var(--s-5);
}

.err404__copy {
  font-size: var(--fs-lead);
  color: var(--brand-deep);
  line-height: 1.5;
  margin: 0 auto var(--s-7);
  max-width: 560px;
}

.err404__code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .05em;
  display: inline-block;
  margin-right: var(--s-2);
}

.err404__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: 0 auto;
}

.err404__card {
  display: block;
  padding: var(--s-5) var(--s-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  color: var(--brand-deep);
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.err404__card:hover,
.err404__card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand-amber);
  box-shadow: 0 6px 20px -10px rgba(10,26,47,.25);
}

.err404__card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--brand-deep);
  margin: 0 0 var(--s-2);
}

.err404__card-desc {
  font-size: .9rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.err404__card-arrow {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: .85rem;
  font-weight: 600;
  color: var(--brand-amber-dark);
}

@media (max-width: 720px) {
  .err404 { min-height: calc(100vh - 140px); padding: var(--s-6) var(--s-3); }
  .err404__mark-text { font-size: 180px; }
  .err404__cards { grid-template-columns: 1fr; gap: var(--s-3); }
  .err404__copy { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .err404__mark-text {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ===================================================================
   HUB PARTNER · Empty states (whimsy aprobado 2026-04-19)
   "Cada módulo vacío es una pista del próximo movimiento"
=================================================================== */
.ap-empty-state {
  max-width: 520px;
  margin: var(--s-6) auto;
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--brand-deep);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  animation: ap-empty-enter 500ms var(--ease) both;
}

.ap-empty-state__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-4);
  color: var(--brand-amber);
  background: var(--brand-bone);
  border-radius: 50%;
}

.ap-empty-state__glyph svg {
  width: 32px;
  height: 32px;
  display: block;
}

.ap-empty-state__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--brand-deep);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.01em;
}

.ap-empty-state__body {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 auto var(--s-5);
  max-width: 42ch;
}

.ap-empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: .9rem;
  color: var(--brand-amber-dark);
  text-decoration: none;
  padding: var(--s-2) 0;
  border-bottom: 1.5px solid transparent;
  transition: color .2s var(--ease), gap .2s var(--ease), border-color .2s var(--ease);
}

.ap-empty-state__cta:hover,
.ap-empty-state__cta:focus-visible {
  color: var(--brand-amber);
  gap: var(--s-3);
  border-bottom-color: var(--brand-amber);
}

/* Variante compacta para widgets dentro del panel */
.ap-empty-state--compact {
  padding: var(--s-5) var(--s-4);
  margin: var(--s-3) 0;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
  max-width: none;
}

.ap-empty-state--compact .ap-empty-state__glyph {
  margin: 0;
  width: 40px;
  height: 40px;
}

.ap-empty-state--compact .ap-empty-state__glyph svg {
  width: 22px;
  height: 22px;
}

.ap-empty-state--compact .ap-empty-state__title {
  font-size: 1.05rem;
  margin: 0;
  grid-column: 2;
}

.ap-empty-state--compact .ap-empty-state__body {
  margin: 2px 0 0;
  grid-column: 2;
  font-size: .88rem;
}

/* Wrapper para el bloque onboarding del panel */
.area-pro-onboarding {
  margin: 0 0 var(--s-6);
}

.area-pro-onboarding .ap-empty-state {
  margin: 0;
  max-width: none;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-6);
}

.area-pro-onboarding .ap-empty-state__glyph { margin: 0; }
.area-pro-onboarding .ap-empty-state__title { margin: 0 0 var(--s-1); }
.area-pro-onboarding .ap-empty-state__body  { margin: 0; max-width: none; }
.area-pro-onboarding .ap-empty-state__cta   { justify-self: end; white-space: nowrap; }

@keyframes ap-empty-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .ap-empty-state { padding: var(--s-6) var(--s-4); }
  .ap-empty-state__title { font-size: 1.15rem; }
  .area-pro-onboarding .ap-empty-state {
    grid-template-columns: auto 1fr;
    padding: var(--s-5) var(--s-4);
  }
  .area-pro-onboarding .ap-empty-state__cta {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-empty-state { animation: none; }
}

/* ===================================================================
   CONFIRMACIÓN DE FORMULARIO (whimsy aprobado 2026-04-19)
   Fade-up del copy + línea ámbar dibujada izquierda→derecha + REF.
=================================================================== */
.lead-confirm {
  padding: var(--s-7) var(--s-5) calc(var(--s-7) + var(--s-3));
  text-align: center;
  color: var(--brand-deep);
  background: var(--brand-bone);
  border-radius: var(--r-md);
  position: relative;
  animation: lead-confirm-fade 120ms ease-out both;
}

.lead-confirm__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.35rem, 1.8vw + .85rem, 1.75rem);
  line-height: 1.2;
  color: var(--brand-deep);
  margin: 0 auto var(--s-3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lead-confirm__copy {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.05rem, 1.2vw + .7rem, 1.25rem);
  line-height: 1.5;
  color: var(--brand-deep);
  max-width: 48ch;
  margin: 0 auto var(--s-5);
  font-weight: 500;
}

.lead-confirm__copy strong {
  color: var(--brand-amber-dark);
  font-weight: 600;
}

.lead-confirm__rule {
  margin: 0 auto var(--s-4);
  transform: scaleX(0);
  transform-origin: left center;
  animation: lead-confirm-rule 600ms cubic-bezier(.2,.8,.2,1) 120ms forwards;
}

.lead-confirm__ref {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-4);
}

@keyframes lead-confirm-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lead-confirm-rule {
  to { transform: scaleX(1); }
}

@media (max-width: 640px) {
  .lead-confirm { padding: var(--s-6) var(--s-4) var(--s-7); }
  .lead-confirm__ref {
    position: static;
    display: block;
    text-align: center;
    margin-top: var(--s-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lead-confirm,
  .lead-confirm__rule {
    animation: none;
    transform: none;
  }
}

/* ============================================================
 * Área Pro · Tienda B2B
 * ============================================================ */
.ap-tienda-head { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; flex-wrap:wrap; }
.ap-tienda-head .ap-intro { margin:0; max-width:700px; }
.ap-tienda-cartlink { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background:var(--brand-amber); color:#fff; border-radius:999px; font-weight:600; text-decoration:none; transition:background .2s; }
.ap-tienda-cartlink:hover { background:var(--brand-amber-dark); color:#fff; }

.ap-tienda-toast { padding:10px 16px; background:#E8F5E9; border-left:4px solid #2E8B57; border-radius:4px; margin-bottom:16px; font-weight:600; color:#1B5E20; }

.ap-tienda-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid #eee; }
.ap-tienda-filters a { padding:6px 14px; border-radius:999px; border:1px solid #ddd; text-decoration:none; color:#333; font-size:14px; transition:all .15s; }
.ap-tienda-filters a:hover { border-color:var(--brand-amber); color:var(--brand-amber); }
.ap-tienda-filters a.is-active { background:var(--brand-amber); color:#fff; border-color:var(--brand-amber); }

.ap-tienda-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.ap-tienda-card { background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.ap-tienda-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); transform:translateY(-2px); }
.ap-tienda-card.is-agotado { opacity:.55; }
.ap-tienda-card__img { position:relative; background:var(--brand-bone); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.ap-tienda-card__img img { width:100%; height:100%; object-fit:cover; }
.ap-tienda-card__img span { font-size:56px; opacity:.4; }
.ap-tienda-badge { position:absolute; top:10px; right:10px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.ap-tienda-badge--pedido  { background:#FFF3CD; color:#856404; }
.ap-tienda-badge--agotado { background:#E8ECEF; color:#6C757D; }

.ap-tienda-card__body { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ap-tienda-card__sku { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#999; margin:0; }
.ap-tienda-card__body h3 { margin:0; font-size:17px; line-height:1.3; }
.ap-tienda-card__dim { font-size:13px; color:#666; margin:0; }
.ap-tienda-card__desc { font-size:14px; color:#555; margin:0; flex:1; }
.ap-tienda-card__precio { margin:8px 0 0; display:flex; flex-direction:column; gap:2px; }
.ap-tienda-card__precio strong { font-size:22px; color:var(--brand-amber-dark); }
.ap-tienda-card__precio span { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:.5px; }
.ap-tienda-card__precio em { font-size:12px; color:#666; font-style:normal; }
.ap-tienda-card__nodisp { font-size:13px; color:#856404; font-style:italic; margin:0; }

.ap-tienda-addform { display:flex; gap:8px; align-items:end; margin-top:8px; }
.ap-tienda-addform label { display:flex; flex-direction:column; font-size:12px; color:#666; }
.ap-tienda-addform input[type=number] { width:70px; padding:6px 8px; border:1px solid #ddd; border-radius:6px; }
.ap-tienda-addform .btn-primary { flex:1; }

.ap-tienda-h2 { font-size:28px; margin:0 0 24px; }

.ap-tienda-table { width:100%; border-collapse:collapse; margin-bottom:24px; background:#fff; }
.ap-tienda-table th, .ap-tienda-table td { padding:12px; text-align:left; border-bottom:1px solid #eee; vertical-align:middle; }
.ap-tienda-table thead th { background:#F8F2E6; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#666; }
.ap-tienda-table tfoot td { background:#F8F2E6; font-size:16px; }

.ap-tienda-qtyform { display:flex; gap:6px; align-items:center; margin:0; }
.ap-tienda-qtyform input[type=number] { width:60px; padding:4px 6px; border:1px solid #ddd; border-radius:4px; }
.btn-sm { padding:4px 10px; font-size:12px; }

.ap-tienda-checkout { background:#fff; padding:24px; border:1px solid #eee; border-radius:12px; }
.ap-tienda-checkout__actions { display:flex; gap:12px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.ap-tienda-clear { margin-top:12px; text-align:right; }
.ap-tienda-min { background:#FFF3CD; border-left:4px solid #E8B828; padding:10px 14px; border-radius:4px; color:#856404; margin:16px 0; }
.ap-tienda-legal { font-size:12px; color:#999; margin-top:12px; }

.ap-tienda-ok { text-align:center; padding:48px 24px; background:#fff; border:1px solid #eee; border-radius:12px; max-width:560px; margin:0 auto; }
.ap-tienda-ok__icon { font-size:56px; margin:0 0 16px; }
.ap-tienda-ok h2 { margin:0 0 8px; font-size:28px; }
.ap-tienda-ok__ref { font-family:monospace; font-size:14px; color:#666; letter-spacing:1px; margin:0 0 20px; }
.ap-tienda-ok__note { color:#2E8B57; font-weight:600; }
.ap-tienda-ok__warn { background:#FFF3CD; border-left:4px solid #E8B828; padding:10px 14px; border-radius:4px; color:#856404; text-align:left; }

.area-pro-nav__badge--cart { background:var(--brand-amber); color:#fff; }

@media (max-width:720px) {
    .ap-tienda-table thead { display:none; }
    .ap-tienda-table tr { display:block; border:1px solid #eee; border-radius:8px; margin-bottom:12px; padding:12px; }
    .ap-tienda-table td { display:flex; justify-content:space-between; border:none; padding:6px 0; }
    .ap-tienda-table td::before { content:attr(data-label); font-weight:600; color:#666; }
    .ap-tienda-table tfoot td { background:transparent; }
}

/* ===================================================================
   ÁREA PRO — LANDING PÚBLICA (visitantes anónimos / no-partners)
   Mismo lenguaje visual que el hero V06 — navy + amber + serif italic.
=================================================================== */
.area-pro-public {
    --apl-coral:        #E87A3A;
    --apl-coral-light:  #F08E4E;
    --apl-coral-cream:  #FFD9A8;
    --apl-bg-1:         #162132;
    --apl-bg-2:         #0C121D;
    --apl-bg-3:         #070A10;
    --apl-text-bright:  #F5F8FC;
    --apl-text-base:    #E8ECF2;
    --apl-text-muted:   rgba(220,230,245,0.6);
    --apl-text-dim:     rgba(220,230,245,0.55);
    --apl-line:         rgba(255,255,255,0.10);
    --apl-line-soft:    rgba(255,255,255,0.06);
    --apl-card-bg:      rgba(16,22,34,0.78);

    background: radial-gradient(ellipse at 20% 0%, var(--apl-bg-1) 0%, var(--apl-bg-2) 45%, var(--apl-bg-3) 100%);
    color: var(--apl-text-base);
    font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
    min-height: 100vh;
    isolation: isolate;
}

/* HERO */
.area-pro-public__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 9vh, 110px) 22px clamp(48px, 8vh, 80px);
    isolation: isolate;
}
.area-pro-public__ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.area-pro-public__glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.area-pro-public__glow--1 { top: -10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232,122,58,0.12) 0%, transparent 70%); }
.area-pro-public__glow--2 { bottom: -15%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(70,120,200,0.10) 0%, transparent 70%); }
.area-pro-public__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right,  rgba(150,180,220,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(150,180,220,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
            mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
}

.area-pro-public__hero-inner {
    position: relative; z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    animation: apl-rise 0.9s cubic-bezier(.2,.7,.2,1) both;
}

.area-pro-public__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px; letter-spacing: 0.12em;
    color: var(--apl-coral); font-weight: 500;
    margin-bottom: 28px;
}
.area-pro-public__eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--apl-coral);
    box-shadow: 0 0 0 0 rgba(232,122,58,0.5);
    animation: apl-pulse 1.8s ease-out infinite;
}

.area-pro-public__h1 {
    font-family: "Instrument Serif", ui-serif, Georgia, serif;
    font-weight: 400;
    font-size: clamp(44px, 5.5vw, 72px);
    line-height: 1.05; letter-spacing: -0.01em;
    margin: 0 auto 22px;
    color: var(--apl-text-bright);
    padding-bottom: 0.12em;
    max-width: 18ch;
}
.area-pro-public__h1-line { display: block; }
.area-pro-public__h1-accent { color: var(--apl-coral); font-style: italic; }

.area-pro-public__sub {
    font-size: 16px; line-height: 1.6;
    color: var(--apl-text-muted);
    margin: 0 auto 32px; max-width: 56ch;
    animation: apl-rise 1s 0.3s cubic-bezier(.2,.7,.2,1) both;
}

.area-pro-public__notice {
    display: inline-block;
    background: rgba(255, 200, 130, 0.08);
    border: 1px solid rgba(255, 200, 130, 0.25);
    border-left: 3px solid var(--apl-coral);
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 13.5px; line-height: 1.5;
    color: var(--apl-text-base);
    margin: 0 auto 26px;
    max-width: 56ch;
    text-align: left;
}
.area-pro-public__notice strong { color: var(--apl-coral-cream); display: block; margin-bottom: 4px; }
.area-pro-public__notice a { color: var(--apl-coral-light); text-decoration: underline; text-underline-offset: 2px; }

.area-pro-public__ctas {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 36px;
    animation: apl-rise 1s 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.area-pro-public__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border-radius: 8px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    text-decoration: none;
    transition: transform .2s, gap .2s, background .2s, border-color .2s;
}
.area-pro-public__cta:hover { transform: translateY(-1px); gap: 14px; }
.area-pro-public__cta--primary {
    background: linear-gradient(180deg, var(--apl-coral-light) 0%, var(--apl-coral) 100%);
    color: #2A1408;
    box-shadow: 0 8px 24px rgba(232,122,58,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
.area-pro-public__cta--primary:hover { background: linear-gradient(180deg, #F59A5F 0%, #EF824A 100%); color: #2A1408; }
.area-pro-public__cta-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(42,20,8,0.25);
}
.area-pro-public__cta--ghost {
    background: rgba(255,255,255,0.04);
    color: var(--apl-text-base);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
}
.area-pro-public__cta--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.30); color: #fff; }

.area-pro-public__microbar {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
    list-style: none; padding: 0; margin: 0;
    font-size: 12.5px; color: var(--apl-text-dim);
    animation: apl-rise 1s 0.7s cubic-bezier(.2,.7,.2,1) both;
}
.area-pro-public__microbar li { display: inline-flex; align-items: center; gap: 8px; }
.area-pro-public__microbar svg { color: var(--apl-coral); flex-shrink: 0; }

/* FEATURES — qué encontrarás dentro */
.area-pro-public__features {
    padding: clamp(56px, 8vh, 90px) 22px;
    background: linear-gradient(180deg, var(--apl-bg-3) 0%, var(--apl-bg-2) 100%);
    border-top: 1px solid var(--apl-line-soft);
}
.area-pro-public__features-inner { max-width: 1100px; margin: 0 auto; }
.area-pro-public__features-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}
.area-pro-public__features-eyebrow {
    display: inline-block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.12em;
    color: var(--apl-coral); font-weight: 500;
    margin-bottom: 16px;
}
.area-pro-public__features-head h2 {
    font-family: "Instrument Serif", ui-serif, Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.15; letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--apl-text-bright);
}
.area-pro-public__features-head p {
    font-size: 15px; line-height: 1.6;
    color: var(--apl-text-muted);
    margin: 0;
}

.area-pro-public__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.area-pro-public__card {
    background: var(--apl-card-bg);
    border: 1px solid var(--apl-line);
    border-radius: 12px;
    padding: 24px 22px;
    transition: border-color .25s, transform .25s, background .25s;
}
.area-pro-public__card:hover {
    border-color: rgba(232,122,58,0.4);
    transform: translateY(-2px);
    background: rgba(20,28,42,0.85);
}
.area-pro-public__card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 9px;
    background: rgba(232,122,58,0.14);
    border: 1px solid rgba(232,122,58,0.28);
    color: var(--apl-coral-light);
    margin-bottom: 16px;
}
.area-pro-public__card h3 {
    font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
    font-size: 16px; font-weight: 600;
    color: var(--apl-text-bright);
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}
.area-pro-public__card p {
    font-size: 13.5px; line-height: 1.55;
    color: var(--apl-text-dim);
    margin: 0;
}

/* FOOTER CTA — links de servicio */
.area-pro-public__footer-cta {
    padding: 48px 22px 72px;
    background: var(--apl-bg-3);
    border-top: 1px solid var(--apl-line-soft);
}
.area-pro-public__footer-inner {
    max-width: 980px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.area-pro-public__footer-link {
    display: block;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--apl-line);
    border-radius: 10px;
    padding: 18px 20px;
    color: var(--apl-text-base);
    text-decoration: none;
    transition: border-color .2s, background .2s, transform .2s;
}
.area-pro-public__footer-link:hover {
    border-color: rgba(232,122,58,0.4);
    background: rgba(255,255,255,0.05);
    color: var(--apl-text-bright);
    transform: translateY(-1px);
}
.area-pro-public__footer-link strong {
    display: block;
    font-size: 14px; font-weight: 500;
    color: var(--apl-text-bright);
    margin-bottom: 4px;
}
.area-pro-public__footer-link span {
    font-size: 12.5px;
    color: var(--apl-text-dim);
}

/* Animaciones (compartidas con hero V06) */
@keyframes apl-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes apl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232,122,58,0.55); }
    100% { box-shadow: 0 0 0 10px rgba(232,122,58,0); }
}

@media (prefers-reduced-motion: reduce) {
    .area-pro-public *,
    .area-pro-public *::before,
    .area-pro-public *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .area-pro-public__hero { padding: 56px 18px 48px; }
    .area-pro-public__h1 { font-size: 36px; }
    .area-pro-public__sub { font-size: 14.5px; }
    .area-pro-public__cta { font-size: 13px; padding: 11px 18px; }
    .area-pro-public__features { padding: 48px 18px; }
    .area-pro-public__cards { grid-template-columns: 1fr; }
}

/* ===================================================================
   PARTNERS · RED — cobertura tipográfica (sin pretensión de mapa real)
   Aproach honesto: matriz por países con dot pulsante por ciudad.
=================================================================== */
.partners-red__coverage {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(20,28,45,0.6) 0%, rgba(8,14,26,0.7) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 28px clamp(20px, 4vw, 36px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    color: #E8ECF2;
}

.partners-red__coverage-head {
    text-align: left;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.partners-red__coverage-eyebrow {
    display: inline-block;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: #E87A3A;
    font-weight: 500;
    margin-bottom: 8px;
}
.partners-red__coverage-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-family: "Instrument Serif", ui-serif, Georgia, serif;
    font-weight: 400;
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.1;
    color: #F5F8FC;
    margin: 0;
}
.partners-red__coverage-num {
    color: #FFD9A8;
    font-style: italic;
}
.partners-red__coverage-num-label {
    font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    color: rgba(220,230,245,0.6);
    font-style: normal;
    margin-right: 4px;
}

.partners-red__coverage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.partners-red__coverage-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    align-items: baseline;
}
.partners-red__coverage-country {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(220,230,245,0.55);
    font-weight: 500;
    line-height: 1.6;
}
.partners-red__coverage-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-family: "Instrument Serif", ui-serif, Georgia, serif;
    font-size: clamp(18px, 2.4vw, 22px);
    line-height: 1.3;
    color: #F5F8FC;
}
.partners-red__coverage-city {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s, transform .2s;
}
.partners-red__coverage-city:hover {
    color: #FFD9A8;
    transform: translateY(-1px);
}
.partners-red__coverage-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #E87A3A;
    box-shadow: 0 0 0 0 rgba(232,122,58,0.55);
    animation: partners-red-pulse 1.8s ease-out infinite;
    animation-delay: calc(var(--i, 0) * 0.4s);
    flex-shrink: 0;
}

.partners-red__coverage-foot {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(220,230,245,0.65);
}
.partners-red__coverage-link {
    color: #FFD9A8;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,217,168,0.4);
    transition: text-decoration-color .2s, color .2s;
    margin-left: 4px;
}
.partners-red__coverage-link:hover {
    color: #F08E4E;
    text-decoration-color: #F08E4E;
}

@keyframes partners-red-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232,122,58,0.55); }
    100% { box-shadow: 0 0 0 8px rgba(232,122,58,0); }
}

@media (max-width: 640px) {
    .partners-red__coverage-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .partners-red__coverage-cities {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .partners-red__coverage-dot { animation: none; }
}

/* ===================================================================
   STRETCHED LINK — toda la card del modelo es clickable
   Overlay anchor invisible cubre la card. Click en cualquier punto navega.
=================================================================== */
.modelo-card,
.model-card { position: relative; }

.modelo-card__overlay,
.model-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
    /* Invisible pero clickable. Sin background ni border. */
    background: transparent;
    border: 0;
}
.modelo-card__overlay:focus-visible,
.model-card__overlay:focus-visible {
    /* Indicador accesible cuando se navega con teclado */
    outline: 2px solid var(--brand-amber, #F07A1F);
    outline-offset: -2px;
    border-radius: inherit;
}

/* Hover: feedback en toda la card. La sombra/lift comunica "click aquí". */
.modelo-card:has(.modelo-card__overlay:hover),
.model-card:has(.model-card__overlay:hover) {
    transform: translateY(-2px);
    transition: transform .25s, box-shadow .25s;
}

/* Cursor pointer en toda la zona clickable */
.modelo-card:has(.modelo-card__overlay),
.model-card:has(.model-card__overlay) { cursor: pointer; }

/* Asegurar que badges, h3 y demás siguen visibles encima del overlay */
.modelo-card > *:not(.modelo-card__overlay),
.model-card > *:not(.model-card__overlay) {
    position: relative;
    z-index: 2;
    pointer-events: none; /* clicks atraviesan al overlay */
}
/* Excepto enlaces internos legítimos que deban funcionar individualmente */
.modelo-card a:not(.modelo-card__overlay),
.model-card a:not(.model-card__overlay) {
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

/* ===================================================================
   GALERÍA single-modelo — slider swipeable + thumbnails + lightbox
=================================================================== */
.modelo-galeria { width: 100%; }

.gal-stage {
    position: relative;
    /* Fondo neutro elegante para el "letterbox" cuando la foto no llena el frame.
       4/3 es el estándar industria mobilhome: encaja la mayoría de exteriores
       sin barras y reduce el letterbox de las panorámicas. Para fotos verticales
       siempre habrá margen lateral, pero contain nunca recorta. */
    background: linear-gradient(180deg, #f5f2ec 0%, #ede9e0 100%);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: inset 0 0 0 1px rgba(20,24,28,0.04);
}

.gal-slider {
    display: flex;
    width: 100%; height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gal-slider::-webkit-scrollbar { display: none; }
.gal-slider:focus { outline: none; }

.gal-slide {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    display: block;
    cursor: zoom-in;
    background: transparent;
}
.gal-slide .gal-img,
.gal-slide img {
    width: 100%; height: 100%;
    /* contain: la foto se ve completa con padding si las proporciones difieren.
       El distribuidor B2B necesita inspeccionar — no queremos recortes ocultos. */
    object-fit: contain;
    display: block;
}

.gal-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 0;
    color: #14181C;
    cursor: pointer;
    z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background .2s, transform .2s;
}
.gal-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.gal-nav:active { transform: translateY(-50%) scale(0.95); }
.gal-nav--prev { left: 12px; }
.gal-nav--next { right: 12px; }

@media (hover: none) and (pointer: coarse) {
    .gal-nav { display: none; } /* en táctil basta el swipe */
}

.gal-counter {
    position: absolute;
    bottom: 14px; right: 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    z-index: 3;
    backdrop-filter: blur(8px);
}
.gal-counter__sep { margin: 0 4px; opacity: 0.6; }

.gal-stage .badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 3;
}

.gal-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
}
.gal-thumb {
    flex: 0 0 84px;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 7px;
    overflow: hidden;
    cursor: pointer;
    background: #efece5;
    padding: 0;
    transition: border-color .2s, opacity .2s, transform .2s;
    opacity: 0.55;
}
.gal-thumb:hover { opacity: 0.85; }
.gal-thumb.is-active {
    border-color: var(--brand-amber, #F07A1F);
    opacity: 1;
}
.gal-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 720px) {
    /* aspect-ratio se mantiene 4/3 — coherente con desktop, evita reflujo entre breakpoints. */
    .gal-thumb { flex: 0 0 64px; }
    .gal-counter { bottom: 10px; right: 10px; font-size: 11px; padding: 4px 10px; }
}

/* ===================================================================
   STICKY CTA MÓVIL — single-modelo
   Barra inferior fija solo móvil con precio + botón principal.
   Mejora conversión: el CTA no desaparece al hacer scroll por la galería.
=================================================================== */
.modelo-cta-sticky {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: rgba(255,255,255,0.97);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid rgba(20,24,28,0.08);
    box-shadow: 0 -6px 18px rgba(20,24,28,0.06);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 12px;
}
.modelo-cta-sticky__price {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
}
.modelo-cta-sticky__price small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.modelo-cta-sticky__price strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    color: var(--brand-deep);
    font-weight: 600;
}
.modelo-cta-sticky .btn-primary {
    flex: 0 0 auto;
    padding: 12px 18px;
    font-size: 0.95rem;
    white-space: nowrap;
    border-radius: 8px;
}
@media (max-width: 720px) {
    .modelo-cta-sticky { display: flex; }
    /* Hueco al final del main para que el sticky no tape el form. */
    .modelo-single { padding-bottom: 88px; }
}

/* ===================================================================
   HERO V07 — DUAL HERO (Particular ↔ Profesional)
   Importado desde Claude Design (claude.ai/design) · diseño aprobado 27/04/2026
   Reemplaza al V06 Dark Hub. Spec: docs/superpowers/specs/2026-04-27-hero-v07-dual-design.md
=================================================================== */

@property --accent-weight {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.hero-v07 {
    --pro-weight: 0.35;
    --accent-weight: 0;
    /* RGB interpolados de logo dual (#2C7BC1 azul particular) a logo pro
       (#F07A1F naranja). Alineados con tokens.css --track-1 para coherencia
       de marca. El calc() permite animar la transición con el cursor. */
    --accent-r: calc(44  + (240 - 44)  * var(--accent-weight));
    --accent-g: calc(123 + (122 - 123) * var(--accent-weight));
    --accent-b: calc(193 + (31  - 193) * var(--accent-weight));
    --accent: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
    --accent-soft: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.16);
    --accent-line: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.32);
    --accent-glow: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.30);
    --accent-deep: rgb(
        calc(var(--accent-r) * 0.88),
        calc(var(--accent-g) * 0.88),
        calc(var(--accent-b) * 0.88)
    );
    /* Acento secundario interpolado: verde (particular) ↔ ámbar oscuro (pro).
       Verde extraído del logo dual. Particular = azul + verde. Pro = naranja sólido. */
    --accent2-r: calc(46  + (201 - 46)  * var(--accent-weight));
    --accent2-g: calc(151 + (80  - 151) * var(--accent-weight));
    --accent2-b: calc(72  + (46  - 72)  * var(--accent-weight));
    --accent-2: rgb(var(--accent2-r), var(--accent2-g), var(--accent2-b));
    --accent-2-soft: rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.18);
    --accent-2-glow: rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.28);

    position: relative;
    min-height: calc(100vh - 56px);
    background: radial-gradient(ellipse at 20% 0%, #162132 0%, #0C121D 45%, #070A10 100%);
    color: #E8ECF2;
    overflow: hidden;
    cursor: ew-resize;
    transition: --accent-weight .4s cubic-bezier(.2, .7, .2, 1);
}

.hero-v07.is-pro          { --accent-weight: 1; }
.hero-v07.is-particular   { --accent-weight: 0; }

.hero-v07__desktop {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 56px);
}

.hero-v07__mobile { display: none; }

@media (max-width: 760px) {
    .hero-v07 { cursor: default; min-height: auto; }
    .hero-v07__desktop { display: none; }
    .hero-v07__mobile { display: block; padding-bottom: 30px; }
}
/* Tabs solo tienen sentido cuando el cursor-split funciona (desktop ancho).
   Las tabs viven dentro de .hero-v07__desktop, así que en mobile (≤760px)
   ya desaparecen automáticamente al ocultarse el bloque desktop. En tablet
   stacked (761-900) además las ocultamos para que no pisen el título. */
@media (max-width: 900px) {
    .hero-v07__tabs { display: none; }
}

/* Ambient layers ----------------------------------------------------- */
.hero-v07__ambient {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero-v07__glow {
    position: absolute; border-radius: 50%; filter: blur(80px);
    transition: opacity .6s, background .5s;
}
.hero-v07__glow--1 {
    top: -10%; left: -10%; width: 600px; height: 600px;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
    opacity: 0.85;
}
.hero-v07__glow--2 {
    bottom: 10%; right: -5%; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(70,120,200,0.10) 0%, transparent 70%);
    opacity: calc(0.5 + var(--pro-weight) * 0.6);
}
.hero-v07__split-glow {
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        rgba(232,122,58, calc(0.10 * (1 - var(--pro-weight)))) 0%,
        transparent 35%,
        transparent 65%,
        rgba(70,140,220, calc(0.10 * var(--pro-weight))) 100%
    );
    transition: background .35s;
}

/* Tinte semi-pantalla izquierda ------------------------------------- */
.hero-v07__left-tint {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    mask-image: linear-gradient(90deg, black 0%, black 32%, transparent 60%);
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 32%, transparent 60%);
}
.hero-v07__left-tint--blue,
.hero-v07__left-tint--orange {
    position: absolute; inset: 0;
    transition: opacity .55s cubic-bezier(.2, .7, .2, 1);
    mix-blend-mode: screen;
}
.hero-v07__left-tint--blue {
    background:
        radial-gradient(ellipse 80% 100% at 0% 50%,
            rgba(74,144,217,0.42) 0%, rgba(74,144,217,0.18) 38%, transparent 70%),
        linear-gradient(180deg, rgba(60,110,180,0.10) 0%, rgba(20,60,120,0.18) 100%);
    opacity: calc(1 - var(--pro-weight));
}
.hero-v07__left-tint--orange {
    background:
        radial-gradient(ellipse 80% 100% at 0% 50%,
            rgba(232,122,58,0.38) 0%, rgba(232,122,58,0.16) 38%, transparent 70%),
        linear-gradient(180deg, rgba(180,90,40,0.08) 0%, rgba(120,55,20,0.16) 100%);
    opacity: var(--pro-weight);
}
.hero-v07__left-tint--edge {
    position: absolute; top: 0; bottom: 0; left: 42%; width: 2px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255,255,255,0.06) 30%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.06) 70%,
        transparent 100%);
    filter: blur(0.5px);
    opacity: 0.6;
}
@media (max-width: 900px) {
    .hero-v07__left-tint, .hero-v07__left-tint--edge { display: none; }
}

/* Globo (mismo asset que V06) --------------------------------------- */
.hero-v07__map {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.hero-v07__map-img {
    position: absolute; top: 50%; right: 2%;
    transform: translateY(-50%);
    width: 72%; height: auto; min-height: 110%;
    object-fit: cover;
    opacity: calc(0.6 + var(--pro-weight) * 0.45);
    mask-image: radial-gradient(ellipse 70% 75% at 62% 50%, black 45%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 70% 75% at 62% 50%, black 45%, transparent 95%);
    filter: saturate(1.05) contrast(1.02);
    transition: opacity .5s;
}
.hero-v07__map-vignette {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 62% 50%, transparent 50%, rgba(10,18,32,0.35) 85%, rgba(10,18,32,0.65) 100%),
        linear-gradient(90deg, rgba(10,18,32,0.7) 0%, rgba(10,18,32,0.25) 25%, transparent 45%);
}
.hero-v07__map-overlay {
    position: absolute; top: 50%; right: 2%;
    transform: translateY(-50%);
    width: 72%; height: auto; min-height: 110%;
    opacity: calc(0.55 + var(--pro-weight) * 0.45);
    transition: opacity .5s;
}

/* Tabs --------------------------------------------------------------- */
.hero-v07__tabs {
    position: absolute; top: 26px; left: 52px; z-index: 6;
    display: flex; align-items: center; gap: 6px;
    padding: 5px;
    background: rgba(16,22,34,0.7);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
}
.hero-v07__tab {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.06em;
    color: rgba(220,230,245,0.7);
    padding: 8px 14px;
    border-radius: 999px;
    border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .25s, color .25s;
    text-transform: uppercase;
}
.hero-v07__tab-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background .25s, box-shadow .25s;
}
.hero-v07__tab.is-active {
    background: var(--accent-soft);
    color: #FFFFFF;
    transition: background .35s, color .35s;
}
.hero-v07__tab.is-active .hero-v07__tab-dot {
    background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
    transition: background .35s, box-shadow .35s;
}
.hero-v07__tab.is-locked {
    background: var(--accent-line);
    box-shadow: inset 0 0 0 1px var(--accent-line);
}
.hero-v07__tab:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
}
.hero-v07__tab-hint {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: rgba(220,230,245,0.4);
    padding: 0 10px 0 6px;
    letter-spacing: 0.05em;
}
.hero-v07__tab-unlock {
    color: var(--accent); cursor: pointer;
    background: transparent; border: 0; padding: 0;
    font: inherit; text-decoration: underline;
    transition: color .35s;
}
.hero-v07__tab-unlock:hover { filter: brightness(1.15); }

/* Left column (copy) ------------------------------------------------- */
.hero-v07__left {
    position: relative; z-index: 3;
    padding: 110px 0 40px 52px;
    max-width: 580px;
}
.hero-v07__copy {
    position: absolute; top: 110px; left: 52px;
    width: calc(100% - 52px);
    max-width: 528px;
    transition: opacity .22s, filter .22s, transform .22s;
}
.hero-v07__copy--pro {
    opacity: 0; filter: blur(4px); transform: translateY(-4px);
    pointer-events: none;
}

.hero-v07.is-particular .hero-v07__copy--pro,
.hero-v07.is-pro        .hero-v07__copy--particular {
    opacity: 0; filter: blur(4px); transform: translateY(-4px);
    pointer-events: none;
}
.hero-v07.is-particular .hero-v07__copy--particular,
.hero-v07.is-pro        .hero-v07__copy--pro {
    opacity: 1; filter: blur(0); transform: translateY(0);
    pointer-events: auto;
}

.hero-v07__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.12em;
    color: var(--accent); font-weight: 500; margin-bottom: 24px;
    transition: color .4s;
}
.hero-v07__eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    animation: hero-v07-pulse 1.8s ease-out infinite;
    transition: background .4s;
}
.hero-v07__h1 {
    font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(46px, 5vw, 76px);
    line-height: 1.04; letter-spacing: -0.01em;
    margin: 0 0 24px;
    padding-bottom: 0.12em;
    color: #F5F8FC;
}
.hero-v07__h1-line { display: block; padding-bottom: 0.04em; }
.hero-v07__h1-accent { color: var(--accent); font-style: italic; transition: color .4s; }
.hero-v07__sub {
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-size: 15px; line-height: 1.6;
    color: rgba(220,230,245,0.62);
    margin: 0 0 30px; max-width: 480px;
}
.hero-v07__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-v07__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border-radius: 8px;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    transition: transform .2s, gap .2s, background .2s;
}
.hero-v07__cta:hover { transform: translateY(-1px); gap: 14px; }
.hero-v07__cta:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
}
.hero-v07__cta--primary {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #0C1828;
    box-shadow: 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: background .4s, box-shadow .4s, color .4s, transform .2s, gap .2s;
}
.hero-v07__cta-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(42,20,8,0.25);
}
.hero-v07__microbar {
    display: flex; flex-wrap: wrap; gap: 22px;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: rgba(220,230,245,0.55);
}
.hero-v07__microbar span { display: inline-flex; align-items: center; gap: 8px; }
.hero-v07__microbar svg { color: var(--accent); flex-shrink: 0; transition: color .4s; }

/* Right column (product + cards) ------------------------------------ */
.hero-v07__right {
    position: absolute; top: 80px; right: 0; bottom: 80px;
    width: 58%; min-width: 520px;
    z-index: 2;
}
.hero-v07__product {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 96%; max-width: 720px;
    animation: hero-v07-rise 1.2s .3s cubic-bezier(.2,.7,.2,1) both,
               hero-v07-float-product 6s ease-in-out infinite;
}
.hero-v07__product-img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55))
            drop-shadow(0 0 40px var(--accent-glow));
    transition: filter .4s;
}
.hero-v07__product-halo {
    position: absolute; inset: -12% -8% -8% -8%;
    background:
        radial-gradient(ellipse at 30% 55%, var(--accent-2-soft) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 55%, var(--accent-soft) 0%, transparent 55%);
    filter: blur(30px); z-index: -1;
    animation: hero-v07-breathe 5s ease-in-out infinite;
    transition: background .4s;
}
.hero-v07__product-glow {
    position: absolute; left: 10%; right: 10%; bottom: -20px; height: 30px;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
    filter: blur(16px); animation: hero-v07-breathe 4s ease-in-out infinite;
    transition: background .4s;
}

.hero-v07__dust { position: absolute; inset: 0; pointer-events: none; }
.hero-v07__dust span {
    position: absolute; left: var(--x); top: var(--y);
    width: 2px; height: 2px; border-radius: 50%;
    background: rgba(255,200,150,0.6);
    animation: hero-v07-dust var(--d) var(--dl) ease-in-out infinite;
}

/* Cards -------------------------------------------------------------- */
.hero-v07__cards {
    position: absolute; inset: 0; pointer-events: none;
    transition: opacity .22s, filter .22s, transform .22s;
}
.hero-v07__cards--pro {
    opacity: 0; filter: blur(4px); transform: translateY(-4px);
}
.hero-v07.is-particular .hero-v07__cards--pro,
.hero-v07.is-pro        .hero-v07__cards--particular {
    opacity: 0; filter: blur(4px); transform: translateY(-4px);
    pointer-events: none;
}
.hero-v07.is-particular .hero-v07__cards--particular,
.hero-v07.is-pro        .hero-v07__cards--pro {
    opacity: 1; filter: blur(0); transform: translateY(0);
}
.hero-v07__card {
    position: absolute;
    pointer-events: auto;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px;
    background: rgba(16,22,34,0.78);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.06);
    min-width: 180px;
    animation: hero-v07-card-in .6s cubic-bezier(.2,.7,.2,1) both,
               hero-v07-float var(--dur, 6s) ease-in-out infinite;
    animation-delay: .1s, 1s;
    transition: border-color .25s;
}
/* Cards flotantes desktop: borde e icono usan el accent del modo activo
   (azul en particular, naranja en pro) — no naranja fijo. */
.hero-v07__card:hover { border-color: var(--accent-line); }
.hero-v07__card-icon {
    width: 34px; height: 34px; border-radius: 7px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent); flex-shrink: 0;
    transition: background .4s, border-color .4s, color .4s;
}
.hero-v07__card-t {
    font-size: 13px; font-weight: 500;
    color: #F5F8FC; line-height: 1.2;
}
.hero-v07__card-s {
    font-size: 11.5px;
    color: rgba(220,230,245,0.55);
    line-height: 1.4; margin-top: 3px;
}
.hero-v07__card--area   { top: 12%; left: -2%;  --dur: 6.5s; }
.hero-v07__card--cat    { top: 6%;  right: 4%;  --dur: 7s; }
.hero-v07__card--brand  { top: 38%; right: -4%; --dur: 6s; }
.hero-v07__card--fair   { top: 62%; left: 2%;   --dur: 7.5s; }
.hero-v07__card--calc   { top: 70%; right: -2%; --dur: 6.2s; }

/* Mobile branch ------------------------------------------------------ */
/* Imagen mobilhome arriba del hero móvil con halo dual verde→naranja
   para que se intuya el producto y los dos caminos sin scroll. */
.hero-v07__m-hero-img-wrap {
    position: relative; z-index: 3;
    width: 100%;
    margin: 60px 0 -10px;
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center;
    overflow: visible;
}
.hero-v07__m-hero-img {
    position: relative; z-index: 2;
    width: 96%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 28px rgba(0,0,0,0.55))
            drop-shadow(0 0 28px rgba(46,151,72,0.18))
            drop-shadow(0 0 28px rgba(232,122,58,0.18));
    animation: hero-v07-rise 1s .15s cubic-bezier(.2,.7,.2,1) both;
}
.hero-v07__m-hero-halo {
    position: absolute; inset: 12% -10% 6% -10%;
    background:
        radial-gradient(ellipse 55% 65% at 28% 60%, rgba(46,151,72,0.32) 0%, transparent 65%),
        radial-gradient(ellipse 55% 65% at 72% 60%, rgba(240,122,31,0.32) 0%, transparent 65%);
    filter: blur(28px);
    z-index: 1;
    animation: hero-v07-breathe 5s ease-in-out infinite;
}
.hero-v07__m-content {
    position: relative; z-index: 4;
    padding: 18px 22px 30px;
    display: flex; flex-direction: column; gap: 14px;
}
.hero-v07__m-h1 {
    font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 34px; line-height: 1.1; margin: 0 0 8px;
    color: #F5F8FC; padding-bottom: 0.12em;
}
.hero-v07__m-sub {
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-size: 14px; line-height: 1.55;
    color: rgba(220,230,245,0.6); margin: 0 0 12px;
}
.hero-v07__m-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px;
    background: rgba(16,22,34,0.78);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    text-decoration: none; color: inherit;
    transition: transform .2s, border-color .2s, background .2s;
}
.hero-v07__m-card:active { transform: scale(0.98); }
/* Particular = azul (dominante) + verde (acento). Logo dual ola superior + ola inferior. */
.hero-v07__m-card--p {
    border-color: rgba(110,160,220,0.30);
    background:
        linear-gradient(180deg, rgba(70,140,220,0.10), rgba(16,22,34,0.78)),
        radial-gradient(ellipse at 100% 100%, rgba(46,151,72,0.10) 0%, transparent 60%);
    background-blend-mode: normal;
}
.hero-v07__m-card--p:hover { border-color: rgba(123,193,66,0.40); }
/* Pro/partner = naranja exclusivo, sin azul residual. */
.hero-v07__m-card--b {
    border-color: rgba(232,122,58,0.35);
    background: linear-gradient(180deg, rgba(232,122,58,0.12), rgba(16,22,34,0.78));
}
.hero-v07__m-card-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Particular: icono azul con borde verde sutil que recuerda la ola inferior del logo. */
.hero-v07__m-card--p .hero-v07__m-card-icon {
    background: linear-gradient(140deg, rgba(110,160,220,0.18) 0%, rgba(46,151,72,0.16) 100%);
    border: 1px solid rgba(123,193,66,0.32);
    color: #9CC2EC;
}
.hero-v07__m-card--b .hero-v07__m-card-icon {
    background: rgba(232,122,58,0.18);
    border: 1px solid rgba(232,122,58,0.35);
    color: #F0A571;
}
.hero-v07__m-card-eye {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.12em;
    color: rgba(220,230,245,0.5); margin-bottom: 6px;
}
/* Eyebrow particular en VERDE lima (diferenciador respecto al azul del título). */
.hero-v07__m-card--p .hero-v07__m-card-eye { color: var(--brand-green-bright); }
.hero-v07__m-card--b .hero-v07__m-card-eye { color: var(--brand-amber); }
.hero-v07__m-card-t {
    font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
    font-size: 19px;
    color: #F5F8FC; line-height: 1.2; margin-bottom: 6px;
}
.hero-v07__m-card-s {
    font-size: 12.5px; line-height: 1.5;
    color: rgba(220,230,245,0.6); margin-bottom: 10px;
}
.hero-v07__m-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.04em;
}
/* Fix: cada CTA usa el color de su zona, no invertidos. */
.hero-v07__m-card--p .hero-v07__m-card-cta { color: var(--brand-blue-soft); }
.hero-v07__m-card--b .hero-v07__m-card-cta { color: #FFD9A8; }

/* Tablet (761-900) --------------------------------------------------- */
@media (max-width: 1100px) {
    .hero-v07__right { width: 52%; min-width: 440px; }
    .hero-v07__card { min-width: 150px; padding: 10px 12px; }
    .hero-v07__card-t { font-size: 12px; }
    .hero-v07__card-s { font-size: 10.5px; }
}
@media (max-width: 900px) and (min-width: 761px) {
    .hero-v07__tabs { left: 50%; transform: translateX(-50%); }
    .hero-v07__tab-hint { display: none; }
    .hero-v07__left { padding: 90px 22px 30px; max-width: none; }
    .hero-v07__copy {
        position: relative; top: auto; left: auto; width: 100%;
    }
    .hero-v07__h1 { font-size: 38px; }
    .hero-v07__right {
        position: relative; top: auto; right: auto; bottom: auto;
        width: 100%; min-width: 0; height: 360px; margin-top: 30px;
    }
    .hero-v07__product { width: 84%; }
    .hero-v07__card { min-width: 0; padding: 8px 10px; }
    .hero-v07__card--brand, .hero-v07__card--fair { display: none; }
}

/* Animations --------------------------------------------------------- */
@keyframes hero-v07-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hero-v07-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hero-v07-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}
@keyframes hero-v07-float-product {
    0%,100% { transform: translate(-50%,-50%); }
    50%     { transform: translate(-50%, calc(-50% - 8px)); }
}
@keyframes hero-v07-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232,122,58,0.55); }
    100% { box-shadow: 0 0 0 12px rgba(232,122,58,0); }
}
@keyframes hero-v07-breathe {
    0%,100% { opacity: 0.85; }
    50%     { opacity: 1; }
}
@keyframes hero-v07-dust {
    0%,100% { opacity: 0; transform: translate(0,0); }
    50%     { opacity: 0.8; transform: translate(8px,-12px); }
}

/* Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-v07 *,
    .hero-v07 *::before,
    .hero-v07 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero-v07__map-overlay circle[fill="#FFD9A8"],
    .hero-v07__dust { display: none; }
}

/* ============================================================================
   FASE 4 · COMPONENTES CON ANIMACIÓN DE PISTA
   Aislado al final del archivo para revertir limpio si rompe.
   Consume tokens de assets/css/tokens.css. Respeta prefers-reduced-motion vía
   --track-anim-duration que se anula automáticamente cuando aplica.
============================================================================ */

/* ── 1. Botón primary: gradiente animado en hover + glow + flecha opcional ── */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--track-grad-hover);
    opacity: 0;
    transition: opacity var(--track-anim-duration) var(--track-anim-ease);
    z-index: -1;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:focus-visible::before { opacity: .8; }

/* Modifier opcional: añade flecha que se desplaza en hover.
   Uso: <a class="btn-primary btn-primary--arrow">Texto</a>
   No se aplica a todos los .btn-primary para no romper layouts existentes. */
.btn-primary--arrow::after {
    content: "→";
    display: inline-block;
    margin-left: var(--s-2);
    transition: transform var(--track-anim-duration) var(--track-anim-ease);
    will-change: transform;
}
.btn-primary--arrow:hover::after {
    transform: translateX(var(--track-anim-translate));
}

/* ── 2. Underline animado en links — opt-in con clase .link
      Para no afectar a menús/footer/CTAs que ya tienen su propio tratamiento. */
.link {
    position: relative;
    display: inline-block;
    color: var(--track-1-deep);
    text-decoration: none;
    font-weight: 600;
    padding-bottom: 2px;
}
.link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--track-grad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--track-anim-duration) var(--track-anim-ease);
}
.link:hover { color: var(--track-1); }
.link:hover::after { transform: scaleX(1); }

/* Aplicación automática del underline animado en contextos de texto donde
   los enlaces son siempre semánticos (no nav, no UI): contenido del blog,
   texto legal del lead-form, texto del cookie banner. */
.blog-single__content a:not(.btn-primary):not(.btn-link):not(.link),
.lead-form__legal a:not(.btn-primary),
.cookie-banner__text a:not(.btn-primary) {
    position: relative;
    display: inline-block;
    padding-bottom: 1px;
    background-image: linear-gradient(var(--track-1), var(--track-1));
    background-size: 0 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--track-anim-duration) var(--track-anim-ease), color .2s var(--ease);
}
.blog-single__content a:not(.btn-primary):not(.btn-link):not(.link):hover,
.lead-form__legal a:not(.btn-primary):hover,
.cookie-banner__text a:not(.btn-primary):hover {
    background-size: 100% 2px;
}

/* ── 3. Cards con border-top gradiente + sombra coloreada en hover ── */
.model-card,
.modelo-card,
.feria-card,
.blog-card,
.perfil-card {
    position: relative;
}
.model-card::before,
.modelo-card::before,
.feria-card::before,
.blog-card::before,
.perfil-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--track-grad);
    border-radius: var(--r-md) var(--r-md) 0 0;
    opacity: 0;
    transform: scaleX(.4);
    transform-origin: center;
    transition: opacity var(--track-anim-duration) var(--track-anim-ease),
                transform var(--track-anim-duration) var(--track-anim-ease);
    pointer-events: none;
    z-index: 1;
}
.model-card:hover::before,
.modelo-card:hover::before,
.feria-card:hover::before,
.blog-card:hover::before,
.perfil-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Sombra coloreada en hover — sustituye la sombra gris previa solo cuando se
   hace hover. Mezclo navy estructural con tinte de pista para que se note la
   "calidez" sin perder peso visual. */
.model-card:hover,
.modelo-card:hover,
.feria-card:hover,
.blog-card:hover {
    box-shadow:
        0 18px 36px -18px rgba(10, 26, 47, .25),
        0 8px 24px -10px rgba(var(--track-1-rgb), .35);
}

/* ── 4. Divisor de pista azul→naranja
      Utility class. Coloca un <hr class="track-divider"> entre una sección B2C
      y una zona profesional para sugerir la transición de marca. */
.track-divider {
    height: 3px;
    border: 0;
    margin: var(--s-7) 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #163A6A 0%,
        #2C7BC1 18%,
        #2E9748 38%,
        #E8B828 62%,
        #F07A1F 82%,
        #C9502E 100%
    );
    opacity: .85;
}
.track-divider--soft {
    height: 1px;
    opacity: .55;
}
.track-divider--vertical {
    height: auto;
    width: 3px;
    align-self: stretch;
    margin: 0 var(--s-5);
    background: linear-gradient(
        180deg,
        #163A6A 0%,
        #2C7BC1 18%,
        #2E9748 38%,
        #E8B828 62%,
        #F07A1F 82%,
        #C9502E 100%
    );
}

/* ── 5. Reforzar focus-visible con el outline tokenizado (ya aplicado en
      Bloque 2 vía :focus-visible global). Aquí solo añadimos box-shadow
      complementaria de halo suave para inputs/botones de form. */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.lead-form input:focus-visible,
.lead-form textarea:focus-visible {
    outline: 3px solid var(--track-1);
    outline-offset: 2px;
}

/* ── 6. Anim helper utilitario: scaleX entrando desde la izquierda.
      Disponible como .track-anim-line si se quiere reutilizar el underline
      en componentes futuros. */
.track-anim-line {
    position: relative;
    display: inline-block;
}
.track-anim-line::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--track-grad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--track-anim-duration) var(--track-anim-ease);
}
.track-anim-line:hover::after,
.track-anim-line:focus-visible::after {
    transform: scaleX(1);
}