/* Correcciones de producción; estilos y composición del export conservados. */
html { scroll-padding-top: 88px; }
.header__mobile-toggle[aria-expanded="true"] span { background: var(--color-profundo); }
.hero__content, .hero__visual, .plans__card, .footer__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  /* Las bases anteriores sumaban 100% más 64px de separación. */
  .hero__content { flex: 1.1 1 0; }
  .hero__visual { flex: .9 1 0; }
}
.plans__card .btn-primary, .plans__card .btn-secondary { overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 1023px) {
  .plans__card { padding: var(--space-5); }
  .plans__card .btn-primary, .plans__card .btn-secondary { padding-inline: var(--space-3); }
}
#products-slider:focus-visible { outline: 2px solid var(--color-infinito); outline-offset: 4px; }
.sr-only:focus { width: auto; height: auto; clip: auto; white-space: normal; margin: 0; }
/* Contenido legible también si JavaScript no está disponible. */
html:not(.js-ready) .animate-on-scroll { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* El rótulo oculto no debe desplazar el icono fuera del botón. */
.whatsapp-float__label { max-width: 0; margin-left: 0; overflow: hidden; }
.whatsapp-float:hover .whatsapp-float__label { max-width: 90px; margin-left: 8px; }

/* ==================================================================
   Pulido de acabado (sep. 2026). Solo ajustes sobre el diseño recibido:
   misma composición, colores, tipografías y textos.
   ================================================================== */

/* Texto secundario legible: el 50 % de opacidad daba ≈3:1 sobre marfil,
   por debajo de WCAG AA. Con 72 % ronda 6:1. El token solo se usa como color
   de texto, así que no altera bordes ni fondos. */
:root { --color-profundo-50: rgba(20, 46, 58, .72); }
.footer__copyright, .footer__legal-link { color: rgba(248, 245, 239, .72); }

/* Titulares sin palabras huérfanas; párrafos con cortes más naturales. */
h1, h2, h3, .plans__card-title { text-wrap: balance; }
p { text-wrap: pretty; }

/* Foco visible y coherente en toda la página (teclado). */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-infinito);
  outline-offset: 3px;
}
.b2b a:focus-visible, .footer a:focus-visible { outline-color: var(--color-bronce); }

/* Botones: texto centrado y equilibrado a cualquier ancho, objetivo táctil ≥48 px. */
.btn-primary, .btn-secondary, .b2b__cta { text-align: center; text-wrap: balance; min-height: 48px; line-height: 1.3; }
.plans__card .btn-primary, .plans__card .btn-secondary { width: 100%; padding-inline: var(--space-5); }

/* «Solicitar propuesta» ocupa el lugar del precio: rótulo discreto, para que
   no compita con el botón que tiene justo debajo. */
.plans__price-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-profundo-50);
}

/* Tarjetas: elevación suave al pasar el cursor, como el resto de la página. */
@media (hover: hover) {
  .plans__card { transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
  .plans__card:not(.plans__card--featured):hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
  .trust__card:hover { box-shadow: var(--shadow-md); }
}

/* Footer: el <nav> anidado dejaba los enlaces en una sola línea corrida. */
.footer__nav-col nav { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__logo img { height: 36px; width: auto; display: block; }

/* ------------------------------------------------------------------
   Móvil
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
  /* La composición del hero sobresalía por la izquierda y se cortaba. */
  .hero { overflow-x: clip; }
  .hero__composition-accent { left: 0; }
  .hero__microphrase { text-align: center; }

  /* Tarjetas de planes con aire suficiente pero sin desperdiciar ancho. */
  .plans__card { padding: var(--space-6) var(--space-5); }
  .plans__card-header { margin-bottom: var(--space-5); padding-bottom: var(--space-5); }

  /* FAQ: pregunta legible y chevron con su propio espacio. */
  .faq-item__button { padding: var(--space-5); font-size: var(--text-base); line-height: var(--leading-snug); }
  .faq-item__answer-content { padding: 0 var(--space-5) var(--space-5); }

  /* Tarjetas de confianza más compactas. */
  .trust__card { padding: var(--space-6); }

  /* Footer: jerarquía clara y sin que el botón flotante tape el pie legal. */
  .footer__grid { gap: var(--space-10); margin-bottom: var(--space-10); }
  .footer__legal { flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); }
  .footer { padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom, 0px)); }

  /* Botón de WhatsApp algo más discreto, respetando la zona segura del iPhone. */
  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 6px 20px rgba(20, 46, 58, .18);
  }
}

/* Tableta: los planes en una columna centrada leen mejor que tres estrechas. */
@media (min-width: 640px) and (max-width: 767px) {
  .plans__grid { max-width: 480px; }
}