/* =========================================================
   CÚPORA · FUENTES CUSTOM
   --------------------------------------------------------- */

/* Sloop Script — local fallback (Typekit no disponible en localhost) */
@font-face {
  font-family: 'sloop-script';
  src: url('../fonts/SloopScriptRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Century Expanded';
  src: url('../fonts/CenturyExpandedItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Century Expanded';
  src: url('../fonts/CenturyExpandedRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   CÚPORA · PULIDO VISUAL (Fase 6)
   ---------------------------------------------------------
   Capa ADITIVA y scopeada. Micro-interacciones suaves y
   consistencia para páginas internas (contacto, catálogo,
   universo, cotizar), sin tocar el style.css principal.
   Se carga DESPUÉS de style.css y cupora-design-system.css.
   Respeta prefers-reduced-motion.
   ========================================================= */

/* ---------------------------------------------------------
   1. Cards-enlace interactivas (contacto) — feedback al hover
   Antes eran estáticas pese a ser <a> clickeables.
   --------------------------------------------------------- */
.contact-link-card {
  cursor: pointer;
  transition:
    transform 0.32s cubic-bezier(.22, .61, .36, 1),
    box-shadow 0.32s cubic-bezier(.22, .61, .36, 1),
    border-color 0.32s ease;
  border: 1px solid transparent;
  will-change: transform;
}
.contact-link-card img {
  transition: transform 0.32s cubic-bezier(.22, .61, .36, 1);
}
.contact-link-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 52px rgba(91, 59, 40, 0.16);
  border-color: var(--cup-gold-line, rgba(199, 168, 100, 0.30));
}
.contact-link-card:hover img {
  transform: scale(1.06);
}

/* ---------------------------------------------------------
   2. Foco visible consistente (accesibilidad + premium)
   Anillo dorado suave en enlaces, botones y cards-enlace
   de páginas internas, sin pisar el del hero (.cupora-experience
   ya define el suyo para sus propios elementos).
   --------------------------------------------------------- */
.contact-link-card:focus-visible,
.intro-card a:focus-visible,
.contact-email-card a:focus-visible {
  outline: 2px solid var(--cup-gold, #8b6f37);
  outline-offset: 4px;
  border-radius: 14px;
}

/* ---------------------------------------------------------
   3. Tarjeta de correo (contacto) — hover sutil del enlace
   --------------------------------------------------------- */
.contact-email-card a {
  transition: color 0.28s ease, opacity 0.28s ease;
}
.contact-email-card a:hover {
  color: var(--cup-gold-strong, #7f632f);
}

/* ---------------------------------------------------------
   Respeta usuarios con movimiento reducido
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .contact-link-card,
  .contact-link-card img,
  .contact-email-card a {
    transition: none;
  }
  .contact-link-card:hover {
    transform: none;
  }
  .contact-link-card:hover img {
    transform: none;
  }
}

/* =========================================================
   RESPONSIVE MÓVIL (solo afecta móvil; desktop intacto)
   ========================================================= */

/* Menú móvil: panel 100% opaco.
   Antes era rgba(...,.96) y el contenido oscuro de la página se
   transparentaba por detrás de los links (se veía sucio). */
@media (max-width: 980px) {
  .cupora-experience .cx-mobile-menu.mobile-menu,
  .cx-mobile-menu.mobile-menu {
    background: #fff8ef;
    box-shadow: 0 24px 64px rgba(27, 23, 21, 0.26);
  }
}

/* Footer brand: atribución separada visualmente */
.footer-brand-copy--attribution {
  margin-top: 10px;
  opacity: 0.7;
}

/* Icono SVG de email en footer socials — mismo aspecto que los <img> */
.cupora-experience .cx-footer .footer-socials svg {
  color: rgba(255, 255, 255, 0.92);
  display: block;
}

/* Footer móvil: distribución más equilibrada y compacta.
   El logo (248px) dominaba y los socials quedaban muy separados en
   pantallas angostas. Mantiene 1 columna (las 3 secciones no parten
   parejo en 2), pero con mejor ritmo. Solo móvil. */
@media (max-width: 640px) {
  .cupora-experience .cx-footer .footer-brand img {
    width: min(200px, 56vw);
  }
  .cupora-experience .cx-footer .footer-socials {
    gap: 34px;
    margin-top: 14px;
  }
  .cupora-experience .cx-footer-main.footer-main {
    padding: 34px 0 26px;
  }
  .cupora-experience .cx-footer-grid.footer-grid {
    gap: 26px;
  }
  /* Separadores superiores de cada sección un poco más sutiles y aireados */
  .cupora-experience .cx-footer .footer-column.with-divider {
    padding-top: 22px;
  }
}

/* =========================================================
   MÓVIL v2 — cambios visibles y reales (solo móvil)
   ========================================================= */
@media (max-width: 980px) {

  /* ---- FOOTER: centrar el contenido DENTRO de la caja ---- */
  .cupora-experience .cx-footer .footer-column,
  .cupora-experience .cx-footer .footer-brand {
    text-align: center !important;
    justify-items: center !important;
    align-content: start;
  }
  .cupora-experience .cx-footer .footer-column h3,
  .cupora-experience .cx-footer .footer-column a,
  .cupora-experience .cx-footer .footer-column p,
  .cupora-experience .cx-footer .footer-legal p {
    width: 100% !important;
    text-align: center !important;
  }

  /* ---- MENÚ MÓVIL: rediseño premium (links serif grandes) ---- */
  .cupora-experience .cx-mobile-menu.mobile-menu.is-open {
    max-height: 86vh;
  }
  .cupora-experience .cx-mobile-menu.mobile-menu nav {
    padding: 10px 6px 22px;
    gap: 0;
  }
  .cupora-experience .cx-mobile-menu.mobile-menu a {
    width: 100%;
    padding: 16px 6px;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.85rem, 8.5vw, 2.45rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #17110b;
    border-bottom: 1px solid rgba(23, 17, 11, 0.10);
    transition: color 0.2s ease, padding-left 0.25s ease;
  }
  .cupora-experience .cx-mobile-menu.mobile-menu a:hover,
  .cupora-experience .cx-mobile-menu.mobile-menu a:active {
    color: var(--cup-gold, #8b6f37);
    padding-left: 14px;
  }
  .cupora-experience .cx-mobile-menu.mobile-menu a.is-active {
    color: var(--cup-gold, #8b6f37);
  }
  .cupora-experience .cx-mobile-menu.mobile-menu .mobile-cta {
    margin-top: 20px;
    padding: 16px;
    border-bottom: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-align: center;
    border-radius: 999px;
    color: #fff8ef;
  }

  /* ---- HERO: cluster COMPACTO de tarjetas flotantes (móvil) ---- */
  /* baja el contenido del header (el texto quedaba muy pegado) */
  .cupora-experience .cxp-hero {
    padding-top: clamp(8.5rem, 26vw, 11.5rem) !important;
  }
  .cupora-experience .cxp-hero__objects {
    display: block !important;
    position: relative;
    min-height: 330px !important;
    margin-top: 1.75rem;
    perspective: 1100px;
  }
  .cupora-experience .cxp-object {
    box-shadow: 0 22px 48px rgba(27, 23, 21, 0.18);
  }
  .cupora-experience .cxp-hero__objects .cxp-object--main {
    position: absolute !important;
    width: 60% !important;
    max-width: 220px;
    left: 50% !important;
    top: 11% !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateX(-52%) rotate(-3deg) !important;
    z-index: 2;
  }
  .cupora-experience .cxp-hero__objects .cxp-object--main img { min-height: 108px !important; }
  .cupora-experience .cxp-hero__objects .cxp-object--float {
    position: absolute !important;
    width: 45% !important;
    max-width: 162px;
    padding: 0.8rem 0.95rem !important;
  }
  .cupora-experience .cxp-hero__objects .cxp-object--float strong { font-size: 1.35rem !important; }
  /* web y cups un poco más anchas (se veían amontonadas); QR queda igual */
  .cupora-experience .cxp-hero__objects .cxp-object--web {
    left: 0 !important; top: 2% !important; right: auto !important; bottom: auto !important;
    width: 54% !important; max-width: 192px;
    transform: rotate(-7deg) !important; z-index: 4;
  }
  .cupora-experience .cxp-hero__objects .cxp-object--qr {
    right: 1% !important; left: auto !important; top: 28% !important; bottom: auto !important;
    transform: rotate(6deg) !important; z-index: 5;
  }
  .cupora-experience .cxp-hero__objects .cxp-object--cups {
    left: 6% !important; top: 52% !important; bottom: auto !important; right: auto !important;
    width: 54% !important; max-width: 192px;
    transform: rotate(4deg) !important; z-index: 3;
  }
}

/* =========================================================
   Reveal móvil por IntersectionObserver (secciones dinámicas)
   ========================================================= */
@media (max-width: 980px) {
  .cupora-experience .cxp-need-card.cxp-mreveal,
  .cupora-experience .cxp-process-step.cxp-mreveal,
  .cupora-experience .cxp-moment-panel.cxp-mreveal,
  .cupora-experience .cxp-mreveal {
    opacity: 0 !important;
    transform: translateY(34px) !important;
    transition: opacity 0.7s cubic-bezier(.22, .61, .36, 1), transform 0.7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
  }
  .cupora-experience .cxp-need-card.cxp-mreveal.cxp-mreveal--in,
  .cupora-experience .cxp-process-step.cxp-mreveal.cxp-mreveal--in,
  .cupora-experience .cxp-moment-panel.cxp-mreveal.cxp-mreveal--in,
  .cupora-experience .cxp-mreveal.cxp-mreveal--in {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cupora-experience .cxp-mreveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   MÓVIL v3 — footer centrado real, frases a 2 líneas,
   tarjetas estáticas bien distribuidas, hero flotante animado.
   (El scrolljacking forzado se retiró: no animaba en táctil.)
   ========================================================= */
@media (max-width: 980px) {

  /* ---- FOOTER: centrar de verdad, incluidos los subtítulos ---- */
  .cupora-experience .cx-footer .footer-link {
    margin-left: 0 !important;
    max-width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
  }
  .cupora-experience .cx-footer .footer-link span,
  .cupora-experience .cx-footer .footer-link small {
    width: 100%;
    text-align: center !important;
  }

  /* ---- Frases a 2 líneas ---- */
  /* "Personalización según tu evento." */
  .cupora-experience .cxp-needs-carousel__copy .cxp-section-title {
    font-size: clamp(1.9rem, 8.4vw, 2.7rem) !important;
    max-width: 16ch !important;
    margin-inline: auto;
    text-wrap: balance;
  }
  /* "Tres capas para una experiencia completa." */
  .cupora-experience .cxp-services-split__intro .cxp-section-title {
    font-size: clamp(1.8rem, 7.6vw, 2.5rem) !important;
    max-width: 22ch !important;
    text-wrap: balance;
  }

  /* ---- "Parte del momento": tarjetas compactas y minimalistas (2-up) ---- */
  .cupora-experience .cxp-needs-carousel__pin { min-height: auto !important; height: auto !important; }
  .cupora-experience .cxp-need-deck {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    min-height: auto !important;
    perspective: none;
  }
  .cupora-experience .cxp-need-card {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 18px 16px !important;
    min-height: 0 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    justify-content: flex-start !important;
  }
  .cupora-experience .cxp-need-card span { font-size: 0.78rem !important; }
  .cupora-experience .cxp-need-card h3 {
    font-size: 1.42rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    margin: 0.45rem 0 0.4rem !important;
  }
  .cupora-experience .cxp-need-card p {
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
    max-width: none !important;
  }

  /* ---- "Tus decisiones" (proceso): pasos compactos en fila, frescos ---- */
  .cupora-experience .cxp-process-jack__pin { min-height: auto !important; height: auto !important; }
  .cupora-experience .cxp-process-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: auto !important;
    perspective: none;
  }
  .cupora-experience .cxp-process-step {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    grid-template-columns: 54px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 15px 18px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.10) !important;
  }
  .cupora-experience .cxp-process-step img { width: 46px !important; height: 46px !important; }
  .cupora-experience .cxp-process-step h3 {
    font-size: 1.5rem !important;
    line-height: 1.0 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 0.25rem !important;
  }
  .cupora-experience .cxp-process-step p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .cupora-experience .cxp-process-step span { font-size: 0.74rem !important; }

  /* ---- HERO: las tarjetas ahora FLOTAN (animación continua) ---- */
  .cupora-experience .cxp-hero__objects .cxp-object--main {
    transform: translateX(-54%) !important;
    rotate: -3deg;
    animation: cupFloatA 5.2s ease-in-out infinite !important;
  }
  .cupora-experience .cxp-hero__objects .cxp-object--web {
    transform: none !important; rotate: -7deg;
    animation: cupFloatB 4.6s ease-in-out infinite !important;
  }
  .cupora-experience .cxp-hero__objects .cxp-object--qr {
    transform: none !important; rotate: 6deg;
    animation: cupFloatA 5.8s ease-in-out 0.4s infinite !important;
  }
  .cupora-experience .cxp-hero__objects .cxp-object--cups {
    transform: none !important; rotate: 4deg;
    animation: cupFloatB 5s ease-in-out 0.2s infinite !important;
  }
}

@keyframes cupFloatA {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@keyframes cupFloatB {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .cupora-experience .cxp-hero__objects .cxp-object--main,
  .cupora-experience .cxp-hero__objects .cxp-object--web,
  .cupora-experience .cxp-hero__objects .cxp-object--qr,
  .cupora-experience .cxp-hero__objects .cxp-object--cups {
    animation: none !important;
  }
}

/* ─── Italic mixto en titulares (acento editorial DM Serif) ──────────
   Palabra clave en cursiva dentro del titular. Consistente con Catálogo. */
.cupora-experience .intro-card h1 em,
.cupora-experience .catalog-star-card--copy h2 em,
.cupora-experience .catalog-star-intro h2 em,
.cupora-experience .catalog-options-intro h2 em,
.cupora-experience .story-card--essay em {
  font-style: italic;
  font-weight: inherit;
  color: inherit;
}


/* =====================================================================
   CONTACTO v4 — "¿Platicamos?" (pill) + intent cards + form + FAQ
   Mobile-first. Paleta: beige/rosa/café (menos dorado).
   Tokens: --cup-* únicamente salvo gradientes/sombras sin token.
   ===================================================================== */

.contacto-page {
  padding-top: clamp(128px, 11vw, 168px);
  padding-bottom: clamp(64px, 9vw, 112px);
  background:
    radial-gradient(ellipse 55% 45% at 5% 0%,   rgba(237, 194, 190, 0.28), transparent 58%),
    radial-gradient(ellipse 45% 50% at 95% 85%, rgba(250, 219, 181, 0.22), transparent 55%),
    linear-gradient(162deg, var(--cup-white-warm), var(--cup-beige-light));
}

/* ── Hero ─────────────────────────────────────────────── */
.contacto-hero {
  text-align: center;
  margin: 0 auto clamp(48px, 6vw, 72px);
}

.contacto-hero__copy { /* mobile: bloque suelto */ }

.contacto-hero__lead {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.contacto-hero__script-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.contacto-hero__script {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.09em;
  color: var(--cup-ink-black);
  background: var(--cup-blush);
  padding: 14px 44px 16px;
  border-radius: 0;
  transform: rotate(-2.5deg);
  line-height: 1;
}

.contacto-hero__title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-hero);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: var(--cup-ink-black);
  margin: 0 0 var(--space-4);
  white-space: nowrap;
}

.contacto-hero__lead {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--cup-coffee);
}

/* Desktop: script a la izquierda, title a la derecha, grupo centrado */
@media (min-width: 900px) {
  .contacto-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.6vw, 12px);
    text-align: left;
  }

  .contacto-hero__script-wrap {
    flex-shrink: 0;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .contacto-hero__copy {
    padding-left: 0;
  }

  .contacto-hero__lead {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Intent cards ─────────────────────────────────────── */
.contacto-intent {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: clamp(40px, 5vw, 64px);
}

@media (min-width: 640px) {
  .contacto-intent {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contacto-intent-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--cup-ink-black);
  border: 1px solid transparent;
}

.contacto-intent-card--ventas  { background: var(--cup-blush); }
.contacto-intent-card--soporte { background: var(--cup-beige-rose); }
.contacto-intent-card--cotizar { background: var(--cup-peach); }

.contacto-intent-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card-sm);
  background: rgba(255, 255, 255, 0.55);
  color: var(--cup-coffee);
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

.contacto-intent-card__icon svg { width: 22px; height: 22px; }

.contacto-intent-card__title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.9rem, 2.7vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--cup-ink-black);
  margin-bottom: var(--space-4);
}

.contacto-intent-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--cup-coffee);
  flex: 1 1 auto;
  margin-bottom: var(--space-5);
}

.contacto-intent-card__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--cup-coffee);
}

.contacto-intent-card__cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .contacto-intent-card {
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .contacto-intent-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-warm);
  }
  .contacto-intent-card:hover .contacto-intent-card__cta svg {
    transform: translate(3px, -3px);
  }
}

.contacto-intent-card:active { transform: scale(0.97); }

/* ── Body grid ────────────────────────────────────────── */
.contacto-body {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}

@media (min-width: 880px) {
  .contacto-body {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
  }
}

/* ── Form card ────────────────────────────────────────── */
.contacto-form-wrap {
  background: var(--cup-white);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-card-warm);
}

.contacto-success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--cup-rose) 9%, var(--cup-cream));
  border: 1px solid color-mix(in srgb, var(--cup-rose) 25%, transparent);
  border-radius: var(--radius-card-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  color: var(--cup-coffee);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

.contacto-success svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--cup-coffee);
  margin-top: 2px;
}

.contacto-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.contacto-field label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cup-coffee);
}

.contacto-field input,
.contacto-field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--cup-ink-black);
  background: var(--cup-cream);
  border: 1.5px solid var(--cup-gold-line);
  border-radius: var(--radius-input);
  padding: 14px 18px;
  width: 100%;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
}

.contacto-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--lh-body);
}

.contacto-field input:focus,
.contacto-field textarea:focus {
  border-color: var(--cup-rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cup-rose) 14%, transparent);
}

.contacto-field .field-error {
  font-size: var(--fs-small);
  color: var(--cup-error);
}

.contacto-turnstile { margin-bottom: var(--space-5); }

.contacto-submit {
  width: 100%;
  justify-content: center;
  gap: var(--space-3);
}

.contacto-submit svg {
  width: 18px;
  height: 18px;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .contacto-submit:hover svg { transform: translateX(4px); }
}

.contacto-submit:active { transform: scale(0.97); }

/* ── Canales ──────────────────────────────────────────── */
.contacto-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contacto-channels__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cup-coffee);
  margin-bottom: var(--space-2);
}

.contacto-ch {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--radius-card-sm);
  background: var(--cup-white);
  border: 1px solid var(--cup-gold-line);
  color: var(--cup-ink-black);
  text-decoration: none;
}

.contacto-ch__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card-sm);
  background: color-mix(in srgb, var(--cup-rose) 12%, var(--cup-cream));
  color: var(--cup-coffee);
}

.contacto-ch__icon svg { width: 20px; height: 20px; }

.contacto-ch__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contacto-ch__name {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cup-ink-black);
}

.contacto-ch__value {
  display: block;
  font-size: var(--fs-small);
  color: var(--cup-coffee);
}

.contacto-ch__arrow {
  flex-shrink: 0;
  color: var(--cup-taupe);
}

.contacto-ch__arrow svg { width: 18px; height: 18px; display: block; }

/* ── Redes sociales ───────────────────────────────────── */
.contacto-social {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--cup-gold-line);
}

.contacto-social__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cup-coffee);
  margin-bottom: var(--space-4);
}

.contacto-social__links {
  display: flex;
  gap: var(--space-3);
}

.contacto-social__links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--cup-white);
  border: 1px solid var(--cup-gold-line);
  text-decoration: none;
}

.contacto-social__links img { width: 20px; height: 20px; display: block; }

/* ── FAQ ──────────────────────────────────────────────── */
.contacto-faq {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--cup-gold-line);
}

.contacto-faq__title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--cup-ink-black);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.contacto-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 72ch;
}

.contacto-faq__item {
  border: 1px solid var(--cup-gold-line);
  border-radius: var(--radius-card-sm);
  background: var(--cup-white);
  overflow: hidden;
}

.contacto-faq__q {
  list-style: none;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.5vw, 28px);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--cup-ink-black);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  user-select: none;
  -webkit-user-select: none;
}

.contacto-faq__q::-webkit-details-marker { display: none; }

.contacto-faq__q::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 300;
  color: var(--cup-rose);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  line-height: 1;
}

.contacto-faq__item[open] .contacto-faq__q::after {
  transform: rotate(45deg);
}

.contacto-faq__a {
  padding: 0 clamp(20px, 2.5vw, 28px) clamp(16px, 2vw, 22px);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--cup-coffee);
}

@media (prefers-reduced-motion: no-preference) {
  .contacto-faq__item[open] .contacto-faq__a {
    animation: faqReveal 200ms ease-out both;
  }
}

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Hover/press (Emil) ───────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .contacto-ch,
  .contacto-social__links a {
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .contacto-ch:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(38, 26, 16, 0.12);
  }
  .contacto-ch__arrow {
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .contacto-ch:hover .contacto-ch__arrow {
    transform: translate(2px, -2px);
  }
  .contacto-social__links a:hover { transform: translateY(-2px); }
  .contacto-faq__item:hover { border-color: color-mix(in srgb, var(--cup-rose) 30%, transparent); }
}

.contacto-ch:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .contacto-ch,
  .contacto-ch:hover,
  .contacto-ch__arrow,
  .contacto-social__links a,
  .contacto-submit svg,
  .contacto-intent-card,
  .contacto-intent-card__cta svg,
  .contacto-faq__q::after {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* =====================================================================
   FIX contenedor — Tailwind (app.css de vite) genera .container con
   max-width por breakpoint (48rem/64rem/80rem) que colisiona con el
   sistema de contenedores del sitio y capaba el ancho (form a ~768px).
   Mayor especificidad restaura el ancho intencional --container-*.
   ===================================================================== */
.cupora-experience .container {
  max-width: none;
}

/* =====================================================================
   FAQ page — /preguntas-frecuentes
   Acordeón con animación suave via CSS grid-template-rows trick.
   Sin tarjetas: solo divisores. Separador entre ítems = border-bottom.
   ===================================================================== */

/* ── Página y hero ───────────────────────────────────── */
.faq-page {
  padding: clamp(96px, 9vw, 140px) 0 clamp(64px, 8vw, 120px);
}

.faq-hero {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.faq-hero__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 900;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cup-rose);
  margin-bottom: 14px;
}

.faq-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--cup-ink-black);
  margin: 0 0 16px;
  line-height: var(--lh-tight);
}

.faq-hero__lead {
  font-size: var(--fs-body-lg);
  color: var(--cup-coffee);
  margin: 0;
  line-height: var(--lh-body);
}

/* ── Lista y divisores ───────────────────────────────── */
.faq-list {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(48px, 5.5vw, 80px);
  align-items: start;
}

/* Bloques temáticos dentro de la lista */
.faq-section {
  border-top: 1px solid var(--cup-line);
  padding-top: clamp(28px, 3.5vw, 36px);
}

@media (max-width: 720px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
  .faq-section + .faq-section {
    border-top: 1px solid var(--cup-line);
    padding-top: clamp(28px, 3.5vw, 36px);
    margin-top: clamp(32px, 4vw, 48px);
  }
}

.faq-section__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cup-taupe);
  margin: 0 0 clamp(8px, 1.5vw, 12px);
}

.faq-item {
  border-bottom: 1px solid var(--cup-line);
}

/* ── Trigger (botón de cada pregunta) ────────────────── */
.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: clamp(18px, 2.2vw, 24px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.faq-trigger__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.faq-trigger__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--cup-line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cup-coffee);
  background: var(--cup-cream);
  transition:
    background 220ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-trigger__icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.faq-trigger__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.faq-trigger__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--cup-graphite);
  line-height: 1.35;
  transition: color 180ms ease;
}

.faq-trigger__subtitle {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cup-taupe);
}

.faq-trigger__plus {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--cup-taupe);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
    color 180ms ease;
}

.faq-trigger__plus svg {
  width: 16px;
  height: 16px;
}

/* Estado abierto — clase .is-open gestionada por JS */
.faq-item.is-open .faq-trigger__plus {
  transform: rotate(45deg);
  color: var(--cup-rose);
}

.faq-item.is-open .faq-trigger__icon {
  background: color-mix(in srgb, var(--cup-blush) 45%, var(--cup-cream));
  border-color: color-mix(in srgb, var(--cup-rose) 22%, transparent);
  color: var(--cup-coffee);
}

.faq-item.is-open .faq-trigger__title {
  color: var(--cup-coffee);
}

/* ── Contenido animado ───────────────────────────────── */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-content__inner {
  overflow: hidden;
  min-height: 0; /* requerido para colapsar a 0fr */
}

.faq-item.is-open .faq-content {
  grid-template-rows: 1fr;
}

.faq-answer {
  padding: 2px 32px clamp(18px, 2.2vw, 24px) 56px;
  font-size: var(--fs-body);
  color: var(--cup-coffee);
  line-height: var(--lh-body);
  margin: 0;
}

/* ── Focus ring ─────────────────────────────────────── */
.faq-trigger:focus-visible {
  outline: 2px solid var(--cup-rose);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── CTA final ───────────────────────────────────────── */
.faq-cta {
  max-width: 760px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  background: color-mix(in srgb, var(--cup-blush) 22%, var(--cup-cream));
  border: 1px solid color-mix(in srgb, var(--cup-rose) 15%, transparent);
  border-radius: var(--radius-section-xl);
  padding: clamp(32px, 4vw, 48px) clamp(32px, 5vw, 64px);
  text-align: center;
}

.faq-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--cup-ink-black);
  margin: 0 0 10px;
}

.faq-cta__desc {
  font-size: var(--fs-body);
  color: var(--cup-coffee);
  margin: 0 0 24px;
  line-height: var(--lh-body);
}

/* ── Hover (mouse) ───────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .faq-trigger:hover .faq-trigger__title {
    color: var(--cup-coffee);
  }
  .faq-trigger:hover .faq-trigger__icon {
    background: color-mix(in srgb, var(--cup-blush) 20%, var(--cup-cream));
    border-color: color-mix(in srgb, var(--cup-rose) 14%, transparent);
  }
}

/* ── Active press (Emil) ─────────────────────────────── */
.faq-trigger:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .faq-answer {
    padding-left: 0;
    padding-right: 0;
  }
  .faq-cta {
    border-radius: var(--radius-card-sm);
    padding: 28px 20px;
  }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .faq-trigger__plus,
  .faq-content,
  .faq-trigger__icon,
  .faq-trigger__title {
    transition: none;
  }
  .faq-trigger:active {
    transform: none;
  }
}


/* =========================================================
   Cúpora · Custom cursor — páginas públicas
   Idéntico al cursor de la landing (cxp-cursor-*)
   ========================================================= */

.cxp-cursor-dot,
.cxp-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.cxp-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--cxp-accent, var(--cup-gold, #8b6f37));
}

.cxp-cursor-ring {
  width: 46px;
  height: 46px;
  border: 1.4px solid #fff;
  background: rgba(255, 255, 255, .02);
  mix-blend-mode: difference;
  transition:
    width .22s ease,
    height .22s ease,
    background .22s ease,
    border-color .22s ease,
    opacity 200ms ease;
}

.cxp-cursor-active .cxp-cursor-ring {
  width: 74px;
  height: 74px;
  background: rgba(255, 255, 255, .12);
}

body.has-cxp-cursor,
body.has-cxp-cursor * {
  cursor: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cxp-cursor-dot,
  .cxp-cursor-ring { display: none; }
}