/* =============================================================================
   GoBooking · capa GoData (22 set. 2026)

   Alinea gobookingcr.com con el resto del ecosistema. godatacr.com, el
   Facturador, House Gateway y el propio panel de GoBooking comparten una sola
   línea visual —Figtree, escala slate, esmeralda de acento, botón píldora
   oscuro— y este sitio era el único que iba por libre: Inter, azul y naranja,
   69 degradados.

   Fuente de verdad, en este orden:
     · ~/Sites/godatacr.com/assets/css/styles.css      (sitio corporativo, v6)
     · gobooking_prod .../admin-assets/css/godata-theme.css  (panel de GoBooking)
   Las reglas de abajo son un puerto de esas dos, no una interpretación propia.
   La página gobooking.php del corporativo es la referencia visual exacta.

   La marca de GoBooking vive en el logo —igual que en el panel—, no en el
   color del sitio.

   Se carga después de style.css y pages.css, y trabaja en dos tiempos:
     1. redefine los tokens que el sitio ya usaba (155 referencias cambian solas)
     2. corrige a mano lo que estaba escrito con valores fijos: 44 degradados
        y 137 colores sueltos.
   ============================================================================= */


/* =============================================================================
   1 · Tokens
   ============================================================================= */

:root {
    /* --- Paleta GoData (Tailwind slate / emerald / amber) ------------------ */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --emerald-50:  #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;

    --amber-50:  #fffbeb;
    --amber-200: #fde68a;
    --amber-700: #b45309;
    --amber-900: #78350f;

    /* --- Alias semánticos --------------------------------------------------
       Los componentes se escriben contra estos, nunca contra la paleta. */
    --ink:    var(--slate-900);
    --text:   var(--slate-600);
    --line:   var(--slate-200);
    --ground: #ffffff;

    --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* --- Forma y profundidad -----------------------------------------------
       Con prefijo propio: el sitio ya tenía --radius-* y --shadow-* con otro
       significado, y redefinirlos sobre sí mismos en este bloque los dejaba
       todos en 9999 px. Aquí viven los valores; abajo se mapean los viejos. */
    --gd-radius-md:   0.75rem;
    --gd-radius-lg:   1rem;
    --gd-radius-xl:   1.5rem;
    --gd-radius-full: 9999px;

    --gd-shadow-sm:   0 1px 2px rgb(15 23 42 / 0.05);
    --gd-shadow-card: 0 10px 30px -12px rgb(15 23 42 / 0.18);
    --gd-shadow-lg:   0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
    --gd-shadow-shot: 0 20px 25px -5px rgb(203 213 225 / 0.4), 0 8px 10px -6px rgb(203 213 225 / 0.4);

    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --container:   1040px;

    /* --- Remapeo de los tokens viejos --------------------------------------
       style.css y pages.css los usan 155 veces. Al reapuntarlos aquí, el sitio
       entero cambia de idioma sin tocar esos dos archivos.

       --primary-blue era el color de "lo fuerte" (botón primario, títulos,
       números, bordes marcados): va a tinta. Los sitios donde significaba
       "acento" —insignias e iconos— se corrigen uno a uno más abajo.
       --primary-orange era el acento: va a esmeralda. */
    --primary-blue:   var(--ink);
    --secondary-blue: var(--emerald-500);
    --primary-orange: var(--emerald-600);

    --white:      #ffffff;
    --gray-light: var(--slate-50);
    --gray-text:  var(--slate-600);
    --black-soft: var(--slate-900);

    /* Los degradados dejan de serlo. El ecosistema no usa ninguno. */
    --gradient-primary: var(--slate-900);
    --gradient-orange:  var(--emerald-600);
    --gradient-hero:    var(--slate-900);

    --font-family: var(--font-sans);

    --section-padding: 5rem 0;

    --radius-sm: var(--gd-radius-md);
    --radius-md: var(--gd-radius-lg);
    --radius-lg: var(--gd-radius-xl);
    --radius-xl: var(--gd-radius-full);

    --shadow-sm:   var(--gd-shadow-sm);
    --shadow-md:   var(--gd-shadow-card);
    --shadow-lg:   var(--gd-shadow-lg);
    --shadow-card: var(--gd-shadow-card);

    --transition-fast:   160ms var(--ease-out);
    --transition-normal: 240ms var(--ease-out);
    --transition-slow:   400ms var(--ease-out);

    /* --- Tokens propios de esta capa --------------------------------------- */
    --gb-surface:        #ffffff;
    --gb-surface-alt:    var(--slate-50);
    --gb-surface-sunken: var(--slate-100);
    --gb-content:        var(--ink);
    --gb-content-muted:  var(--text);
    --gb-border:         var(--line);
    --gb-accent:         var(--emerald-600);
    --gb-accent-ink:     var(--emerald-700);
    --gb-accent-soft:    var(--emerald-50);

    --gb-text-xs:   0.8125rem;
    --gb-text-sm:   0.875rem;
    --gb-text-base: 1rem;
    --gb-text-md:   1.0625rem;
    --gb-text-lg:   1.25rem;
    --gb-text-xl:   1.5rem;

    --gb-space-3: 0.75rem;
    --gb-space-4: 1rem;
    --gb-space-5: 1.5rem;
    --gb-space-6: 2rem;
    --gb-space-7: 3rem;

    --gb-radius-sm:   var(--gd-radius-md);
    --gb-radius-md:   var(--gd-radius-lg);
    --gb-radius-lg:   var(--gd-radius-xl);
    --gb-radius-pill: var(--gd-radius-full);

    --gb-shadow-sm: var(--gd-shadow-sm);
    --gb-shadow-md: var(--gd-shadow-card);

    --gb-ease:      var(--ease-out);
    --gb-dur-fast:  160ms;
    --gb-dur:       240ms;
    --gb-section-y: clamp(4rem, 3rem + 2.5vw, 5rem);
}


/* =============================================================================
   2 · Base: tipografía y tinta
   ============================================================================= */

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--ink);
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem;    line-height: 1.3;  letter-spacing: -0.01em; font-weight: 600; }
h4 { font-size: 1.0625rem;  line-height: 1.35; font-weight: 600; }
h5 { font-size: 1rem;       font-weight: 600; }
h6 { font-size: 0.9375rem;  font-weight: 600; }

p { color: var(--text); }

/* Los títulos sobre fondo oscuro siguen siendo blancos */
.section__title--white,
.cta__title,
.cta h2,
.cta__content h2,
.footer h3,
.footer h4 { color: #fff; }

a { transition: color 160ms var(--ease-out); }

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

::selection { background: var(--emerald-100); color: var(--ink); }


/* =============================================================================
   3 · Cabecera pegajosa y translúcida
   ============================================================================= */

.header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgb(255 255 255 / 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgb(226 232 240 / 0.6);
    box-shadow: none;
}

.header--scrolled {
    background: rgb(255 255 255 / 0.82);
    box-shadow: none;
    border-bottom-color: var(--line);
}

.nav__link {
    color: var(--slate-600);
    font-size: 0.9375rem;
    font-weight: 400;
}

.nav__link:hover,
.nav__link.active-link {
    color: var(--ink);
}

.nav__link.active-link { font-weight: 500; }

/* El subrayado animado del menú no existe en el ecosistema */
.nav__link::after { display: none !important; }

@media (prefers-reduced-transparency: reduce) {
    .header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* =============================================================================
   4 · Botones: píldora, primario oscuro
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--gd-radius-full);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transition: transform 160ms var(--ease-out),
                background-color 160ms ease,
                border-color 160ms ease,
                color 160ms ease;
    -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }
.btn:hover  { transform: none; box-shadow: none; }

.btn--large { padding: 0.8rem 1.6rem; font-size: 0.9375rem; }
.btn--small { padding: 0.5rem 1.1rem; font-size: 0.875rem; }

.btn--primary {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.btn--primary:hover {
    background: var(--slate-700);
    border-color: var(--slate-700);
    color: #fff;
}

.btn--outline,
.btn--secondary,
.btn--ghost {
    background: transparent;
    border-color: var(--slate-300);
    color: var(--ink);
}
.btn--outline:hover,
.btn--secondary:hover,
.btn--ghost:hover {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}

/* Sobre el bloque oscuro del cierre se invierte */
.btn--white {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
.btn--white:hover {
    background: var(--slate-100);
    border-color: var(--slate-100);
    color: var(--ink);
}

.btn--outline-white {
    background: transparent;
    border-color: var(--slate-600);
    color: #fff;
}
.btn--outline-white:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.btn--lang {
    border-color: var(--slate-300);
    color: var(--slate-600);
    background: transparent;
}
.btn--lang:hover { border-color: var(--ink); color: var(--ink); }


/* =============================================================================
   5 · Fondos de sección: blanco y slate-50, sin degradados
   ============================================================================= */

.hero {
    background: rgb(236 253 245 / 0.5);
    border-bottom: 1px solid var(--emerald-100);
}

.screenshots,
.demo-section,
.integrations,
.faq {
    background: var(--slate-50);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.features,
.how-it-works,
.pricing,
#facturacion {
    background: var(--ground);
}

/* "Para quién" era una banda azul con tarjetas de vidrio: pasa a blanco */
.industries {
    background: var(--ground);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.industries .section__title,
.industries .section__title--white,
.industries .section__subtitle {
    color: var(--ink);
}
.industries .section__subtitle { color: var(--text); }

.industry-card {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--gd-radius-xl);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--text);
}
.industry-card h3,
.industry-card__title { color: var(--ink); }
.industry-card p,
.industry-card__text { color: var(--text); }
.industry-card i,
.industry-card__icon { color: var(--emerald-700); }

.industries__secondary,
.industries__secondary * { color: var(--text); }

/* Banda de Costa Rica y cualquier resto de degradado azul */
.costa-rica-section {
    background: var(--slate-50);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.costa-rica-section h2,
.costa-rica-section h3 { color: var(--ink); }

.zigzag-item__image,
.image-placeholder,
.blog-card__image,
.article-featured-image,
.featured-post__image,
.case-card__header,
.case-study-featured {
    background: var(--slate-100);
}

.pricing-card--commission,
.pricing-card--enterprise,
.bank-card--featured,
.newsletter-widget,
.newsletter-box,
.contact-info-box,
.company-badge,
.mvv-card__icon,
.article-cta,
.case-cta,
.author-avatar,
.article-category,
.page-hero {
    background: var(--ground);
}

.page-hero {
    background: var(--slate-50);
    border-bottom: 1px solid var(--line);
}

.enterprise-badge {
    background: var(--ink);
    color: #fff;
}

.comparison-table thead {
    background: var(--slate-100);
}
.comparison-table thead th { color: var(--ink); }

.credentials-box {
    background: var(--amber-50);
    border: 1px solid var(--amber-200);
    color: var(--amber-900);
}

.highlight-box {
    background: var(--emerald-50);
    border: 1px solid var(--emerald-100);
    border-radius: var(--gd-radius-lg);
}

.cta,
.article-cta,
.case-cta {
    background: var(--ground);
}


/* =============================================================================
   6 · Acentos: esmeralda donde antes había naranja o azul
   ============================================================================= */

.section__badge,
.hero__badge,
.eyebrow {
    background: var(--emerald-50);
    color: var(--emerald-700);
    border: 1px solid var(--emerald-100);
    border-radius: var(--gd-radius-full);
    font-weight: 600;
    box-shadow: none;
}

.section__badge i,
.hero__badge i { color: var(--emerald-600); }

/* El resaltado del titular: el "24/7" verde de gobooking.php */
.hero__title { color: var(--ink); }
.hero__title span:not(.text-gradient):not(.highlight):not(.hero__title-accent) { color: var(--ink); }

.hero__title-accent,
.text-gradient,
.highlight {
    color: var(--emerald-600);
    background: none;
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/* Iconos de tarjeta: cuadro esmeralda claro, símbolo esmeralda oscuro */
.feature-card__icon,
.demo-option__icon,
.model-icon,
.mvv-card__icon,
.integration-card__icon {
    background: var(--emerald-50);
    color: var(--emerald-700);
    border-radius: var(--gd-radius-md);
    box-shadow: none;
}

.feature-card__icon i,
.demo-option__icon i,
.model-icon i,
.integration-card__icon i { color: var(--emerald-700); }

/* Palomas y listas de verificación */
.pricing-card__features li i,
.help-card__list i,
.check-list i,
.feature-list i,
.list-check i { color: var(--emerald-600); }

.payment-tag i,
.contact-item i,
.calendar__header i,
.help-mini > i { color: var(--emerald-700); }

.stat__number,
.faq-item__question span { color: var(--ink); }


/* =============================================================================
   7 · Tarjetas y marcos
   ============================================================================= */

.feature-card,
.pricing-card,
.industry-card,
.step,
.faq-item,
.demo-option,
.integration-card,
.blog-card,
.case-card,
.help-card,
.testimonial-card,
.bank-card,
.mvv-card {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--gd-radius-xl);
    box-shadow: none;
    transition: transform 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out),
                border-color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .feature-card:hover,
    .pricing-card:hover,
    .industry-card:hover,
    .demo-option:hover,
    .integration-card:hover,
    .blog-card:hover,
    .case-card:hover,
    .help-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--gd-shadow-card);
        border-color: var(--line);
    }
}

.pricing-card--featured,
.pricing-card--popular {
    border-color: var(--ink);
    box-shadow: var(--gd-shadow-card);
}

/* Las capturas van en un marco slate-100, como en el corporativo */
.screenshot-card,
.screenshot__frame,
.screenshots__item,
.app-frame {
    background: var(--slate-100);
    border-radius: var(--gd-radius-xl);
    padding: 0.625rem;
    border: none;
    box-shadow: none;
}

.screenshot-card img,
.screenshot__frame img,
.screenshots__item img,
.app-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--gd-radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--gd-shadow-shot);
}


/* =============================================================================
   8 · El cierre: bloque oscuro redondeado
   ============================================================================= */

.cta {
    padding: 4rem 0 5rem;
    background: var(--ground);
}

.cta .container,
.cta__content {
    background: var(--ink);
    color: #fff;
    border-radius: var(--gd-radius-xl);
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

.cta__content h2,
.cta__title { color: #fff; }

.cta__content p,
.cta__subtitle,
.cta__text { color: var(--slate-300); }

.cta__content .btn--primary,
.cta .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
.cta__content .btn--primary:hover,
.cta .btn--primary:hover {
    background: var(--slate-100);
    border-color: var(--slate-100);
    color: var(--ink);
}

.cta__content .btn--outline,
.cta .btn--outline {
    border-color: var(--slate-600);
    color: #fff;
}
.cta__content .btn--outline:hover,
.cta .btn--outline:hover {
    border-color: #fff;
    color: #fff;
}


/* =============================================================================
   9 · Pie
   ============================================================================= */

.footer {
    background: var(--ground);
    border-top: 1px solid var(--line);
    color: var(--slate-500);
}

.footer h3,
.footer h4,
.footer__title {
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: normal;
}

.footer p,
.footer li,
.footer a { color: var(--slate-600); font-size: 0.875rem; }
.footer a:hover { color: var(--ink); }

.footer__bottom {
    border-top: 1px solid var(--line);
    color: var(--slate-500);
}

.social-link,
.footer__social a {
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--slate-600);
    background: transparent;
}
.social-link:hover,
.footer__social a:hover { border-color: var(--ink); color: var(--ink); background: transparent; }


/* =============================================================================
   10 · Movimiento
   ============================================================================= */

/* Sin revelado al hacer scroll: el sitio venía de dejar 51 de 55 bloques
   invisibles si el script tardaba. Se conserva el movimiento que sí se siente
   —la respuesta al presionar y el hover— y nada bloquea la lectura. */

a, button, .btn, summary {
    -webkit-tap-highlight-color: transparent;
}

.faq-item__question,
.accordion__trigger {
    transition: color 160ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .btn:active { transform: none; }
    .feature-card:hover,
    .pricing-card:hover,
    .industry-card:hover,
    .demo-option:hover,
    .integration-card:hover { transform: none; }
}


/* =============================================================================
   11 · Desbordes horizontales en pantallas pequeñas
   ============================================================================= */

/* El desplazamiento lateral se escapaba porque el recorte estaba solo en body */
html { overflow-x: hidden; }

/* Los items de una rejilla no encogen por debajo de su contenido salvo que se
   les diga: por eso la tabla de ayuda y la ficha destacada de casos estiraban
   la página a 444 y 406 px sobre un móvil de 390. */
.help-layout > *,
.help-sidebar,
.help-content,
.case-study-featured > *,
.content-layout > * { min-width: 0; }

/* La tabla ancha se desplaza dentro de su caja, no arrastra la página */
.help-content .help-table,
.help-table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 767px) {
    .case-study-featured { padding: var(--gb-space-6) var(--gb-space-5); }
}


/* =============================================================================
   12 · El menú, sin apreturas
   ============================================================================= */

/* Con "Facturación" dentro, las etiquetas se partían en dos líneas y los
   botones chocaban con el logo. */
.nav__link,
.header .btn { white-space: nowrap; }

/* El logo se aplastaba al estrecharse la ventana (de 147 a 57 px a 1024) */
.nav__logo img,
.header .logo img,
.nav__logo { flex-shrink: 0; }

.nav__logo img,
.header .logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* El flex con separación es .nav__list, no .nav__menu. Entre 769 y 1100 px la
   barra no tiene dónde encoger y el botón de acceso se salía de la pantalla. */
@media (min-width: 769px) and (max-width: 1199px) {
    .nav__list { gap: 18px; }
    .nav__link { font-size: var(--gb-text-sm); }
}

@media (min-width: 769px) and (max-width: 1099px) {
    .nav__list { gap: 14px; }
    /* "Ver Demo" ya está en el hero, en el cierre y en el menú desplegable */
    .header .btn--outline.demo-trigger { display: none; }
}

/* La barra de escritorio no cabe por debajo de ~900 px y el desplegable no
   aparecía hasta 768: se adelanta el cambio a 900 px. */
@media (min-width: 769px) and (max-width: 899px) {
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--ground);
        padding: 80px 40px;
        box-shadow: var(--gd-shadow-lg);
        transition: right 240ms var(--ease-out);
        z-index: 100;
    }

    .nav__menu.show-menu { right: 0; }

    .nav__list { flex-direction: column; gap: 24px; }

    .nav__close { display: block; position: absolute; top: 24px; right: 24px; }
    .nav__toggle { display: block; }

    .nav__actions { display: flex; align-items: center; gap: 12px; }
    .nav__actions .btn--lang { display: flex; }

    .nav__buttons { display: none; }

    .nav__buttons-mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid var(--line);
    }
}


/* =============================================================================
   13 · La rejilla de facturación
   ============================================================================= */

#facturacion .features__grid--compact { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) {
    #facturacion .features__grid--compact { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    #facturacion .features__grid--compact { grid-template-columns: 1fr; }
}

.industries__secondary { padding-bottom: var(--gb-space-6); }


/* =============================================================================
   14 · WhatsApp
   ============================================================================= */

.whatsapp-float,
.whatsapp-btn {
    box-shadow: var(--gd-shadow-card);
}


/* =============================================================================
   15 · Correcciones de la conversión
   ============================================================================= */

/* El hero llevaba círculos de color de fondo. El ecosistema no usa adornos:
   el fondo es un tinte plano y el contenido manda. */
.hero__bg-shapes,
.hero__shape { display: none; }

/* .step__icon no es una caja de icono sino un glifo grande y translúcido bajo
   el número del paso: se le cambia la tinta, no la forma. */
.step__icon i { color: var(--emerald-600); opacity: 0.35; }

/* --- El pie pasa de oscuro a claro --------------------------------------
   Era azul oscuro con enlaces blancos al 70 %. El del ecosistema es blanco
   con borde superior y texto slate; al cambiar solo el fondo, los enlaces
   quedaban blanco sobre blanco. */
.footer {
    background: var(--ground);
    color: var(--slate-600);
    border-top: 1px solid var(--line);
}

.footer__brand p,
.footer__links ul li a,
.footer__payments-label,
.footer__bottom p { color: var(--slate-600); }

.footer__links h4 {
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: normal;
}

.footer__links ul li a:hover { color: var(--ink); }

.footer__bottom {
    border-top: 1px solid var(--line);
}
.footer__bottom p { color: var(--slate-500); font-size: 0.8125rem; }

.footer__social a {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--slate-600);
}
.footer__social a:hover {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}

.footer__payments-label i { color: var(--emerald-600); }
.footer__payments-cards i { color: var(--slate-400); }
.footer__payments-cards i:hover { color: var(--ink); }
.footer__bottom i { color: var(--slate-400); }


/* =============================================================================
   16 · Variantes que quedaban fuera del sistema
   ============================================================================= */

/* El segundo botón del hero era de contorno naranja. En el ecosistema el
   secundario es un contorno neutro: borde slate-300, texto tinta. */
.btn--outline-orange {
    background: transparent;
    border: 1px solid var(--slate-300);
    color: var(--ink);
}
.btn--outline-orange:hover {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}

/* Botón pequeño de demo. Esmeralda 600 con texto blanco da 3,77:1 y no pasa;
   esmeralda 700 da 5,55:1. */
.btn--demo {
    background: var(--emerald-700);
    color: #fff;
    border-radius: var(--gd-radius-full);
    border: 1px solid var(--emerald-700);
    font-weight: 600;
}
.btn--demo:hover {
    background: var(--emerald-600);
    border-color: var(--emerald-600);
    color: #fff;
}

/* El grande del ecosistema es discreto, no enorme */
.btn--lg { padding: 0.8rem 1.6rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }


/* =============================================================================
   17 · "Para quién": la banda azul con vidrio pasa a fondo claro
   ============================================================================= */

/* La sección era un degradado azul y todo su texto iba en blanco. Al pasarla a
   blanco hay que devolver la tinta a cada pieza, no solo al fondo. */
.industries .section__badge {
    background: var(--emerald-50);
    color: var(--emerald-700);
    border: 1px solid var(--emerald-100);
}

.industries .section__title,
.industries__category,
.industries__category--secondary,
.industry-card--featured h4,
.industry-card h4,
.industry-card h3 { color: var(--ink); }

.industries__category i { color: var(--emerald-700); }

.industry-card--featured {
    background: var(--ground);
    border: 1px solid var(--line);
}
.industry-card--featured p,
.industry-card p { color: var(--text); }


/* =============================================================================
   18 · Fondos esmeralda con texto blanco
   ============================================================================= */

/* Mismo motivo que el botón de demo: sobre esmeralda 600 el blanco no llega. */
.new-badge,
.time__slots .slot.selected,
.slot.selected,
.badge--success,
.pricing-card__badge {
    background: var(--emerald-700);
    color: #fff;
}

/* Los dos últimos degradados del sitio: los iconos del bloque de demo, que
   llevan selector más específico que la regla general de iconos. */
.demo-option--landing .demo-option__icon,
.demo-option--admin .demo-option__icon {
    background: var(--emerald-50);
    color: var(--emerald-700);
}
.demo-option--landing .demo-option__icon i,
.demo-option--admin .demo-option__icon i { color: var(--emerald-700); }


/* =============================================================================
   19 · Las páginas internas
   ============================================================================= */

/* Tokens que define pages.css (se carga antes que esta capa) */
:root {
    --primary-celeste: var(--emerald-600);
    --neutral-white:   #ffffff;
    --neutral-light:   var(--slate-50);
    --neutral-gray:    var(--slate-600);
    --neutral-dark:    var(--slate-900);
}

/* La cabecera de las internas era un degradado azul con textura de puntos y
   todo el texto en blanco. Pasa a fondo claro, como el resto del ecosistema.
   El relleno superior era de 12rem porque la barra iba fija y tapaba: ahora es
   pegajosa y ocupa su sitio, así que sobra. */
.page-hero {
    background: var(--slate-50);
    border-bottom: 1px solid var(--line);
    padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 clamp(3rem, 2rem + 2.5vw, 4.5rem);
    color: var(--text);
}

.page-hero--small {
    padding: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.page-hero::before { display: none; }

.page-hero h1 {
    color: var(--ink);
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.page-hero p { color: var(--text); }

.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .breadcrumb span { color: var(--slate-600); }
.page-hero .breadcrumb a:hover { color: var(--ink); }

/* Avisos: caja de un solo tono con borde, sin degradado */
.help-tip {
    background: var(--amber-50);
    border: 1px solid var(--amber-200);
    color: var(--amber-900);
}

.help-info {
    background: var(--emerald-50);
    border: 1px solid var(--emerald-100);
    color: var(--slate-700);
}

.help-warning {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
}

/* Etiquetas y rótulos que venían en gris claro (2,5:1) */
.sidebar-title,
.help-sidebar h3,
.toc-title,
.content-label,
.help-sidebar h2.h-sub3 { color: var(--slate-600); }


/* =============================================================================
   20 · Piezas que eran blancas sobre fondo oscuro
   ============================================================================= */

/* Al aclarar los fondos, cada texto en blanco se quedó sin dónde apoyarse.
   Se listan uno a uno en vez de una regla ancha: una regla ancha fue lo que
   apagó el botón del cierre en la ronda anterior. */

/* Etiquetas de categoría sobre imagen o cabecera de tarjeta */
.blog-card__category,
.case-industry,
.cookie-badge,
.article-category {
    background: var(--emerald-700);
    color: #fff;
    border-radius: var(--gd-radius-full);
    font-weight: 600;
}

/* Bloque de suscripción */
.newsletter-content h3,
.newsletter-box h3,
.newsletter-widget h3 { color: var(--ink); }

.newsletter-content p,
.newsletter-box p,
.newsletter-widget p { color: var(--text); }

/* Caja de datos de contacto de las páginas legales */
.contact-info-box,
.contact-info-box p,
.contact-info-box strong,
.contact-info-box a { color: var(--text); }
.contact-info-box strong { color: var(--ink); }
.contact-info-box {
    background: var(--slate-50);
    border: 1px solid var(--line);
    border-radius: var(--gd-radius-lg);
}

/* La firma de un testimonio: esmeralda 600 sobre blanco da 3,77:1 */
.case-quote cite,
blockquote cite { color: var(--emerald-700); }

/* El botón de WhatsApp con texto: el verde de la marca con texto blanco da
   1,98:1. En el ecosistema es un contorno neutro con el icono verde,
   igual que "Pedir una demo" en gobooking.php. */
.btn--whatsapp {
    background: transparent;
    border: 1px solid var(--slate-300);
    color: var(--ink);
}
.btn--whatsapp:hover {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}
.btn--whatsapp i { color: #25D366; }


/* =============================================================================
   21 · El hueco que dejó la barra al dejar de ser flotante
   ============================================================================= */

/* La barra iba en position:fixed y tapaba el inicio de la página, así que el
   hero llevaba 120 px de relleno arriba para esquivarla. Ahora es pegajosa y
   ocupa su lugar en el flujo: esos 120 px eran un hueco vacío. Se usa el mismo
   ritmo que el hero del corporativo. */
.hero {
    padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 clamp(3rem, 2rem + 2.5vw, 4.5rem);
}

/* Los anclajes del menú ya se compensan en main.js (80 px); esto cubre los
   saltos que hace el navegador por su cuenta, como al abrir con #facturacion. */
html { scroll-padding-top: 6rem; }


/* =============================================================================
   22 · Orden de capas del menú desplegable
   ============================================================================= */

/* El cajón del menú nunca tuvo z-index: quedaba por debajo de la cabecera y del
   botón de WhatsApp (998), que se le montaban encima al abrirlo. Con la
   cabecera en 30 seguía pasando lo mismo, así que se ordena de una vez.
   Solo se eleva cuando está abierto, para no tapar nada mientras está guardado. */
.nav__menu.show-menu { z-index: 1100; }
.nav__close { z-index: 1101; }

/* Y el flotante se aparta mientras el menú está abierto. main.js no marca el
   body al abrir, así que se detecta con :has(); donde no esté soportado el
   flotante sigue visible, que es exactamente como está hoy. */
body:has(.nav__menu.show-menu) .whatsapp-float {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms var(--ease-out);
}


/* =============================================================================
   23 · Hallazgos de la revisión contra gobooking.php
   ============================================================================= */

/* --- La cabecera translúcida solo se veía en la portada ---------------------
   Nueve de las diez páginas llevan `header header--solid`, y
   `.header.header--solid` (0,2,0) le gana a `.header` (0,1,0) aunque esta capa
   cargue después: el fondo quedaba blanco opaco y el desenfoque no hacía nada.
   La clase que pone main.js al bajar es `scrolled`, no `header--scrolled`. */
.header.header--solid {
    background: rgb(255 255 255 / 0.72);
    box-shadow: none;
    border-bottom: 1px solid rgb(226 232 240 / 0.6);
}

.header.scrolled,
.header.header--solid.scrolled {
    background: rgb(255 255 255 / 0.82);
    box-shadow: none;
    border-bottom: 1px solid var(--line);
}

.header.scrolled .btn--lang { border-color: var(--slate-300); color: var(--slate-600); }
.header.scrolled .btn--lang:hover { border-color: var(--ink); color: var(--ink); }

@media (prefers-reduced-transparency: reduce) {
    .header,
    .header.header--solid,
    .header.scrolled { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* --- El botón flotante de WhatsApp -----------------------------------------
   Era el único verde no esmeralda del sitio, y su icono blanco sobre el verde
   de WhatsApp daba 1,98:1 (el mínimo para un gráfico es 3:1). En el corporativo
   este botón es slate-900: el icono blanco encima da 17,4:1. */
.whatsapp-float {
    background: var(--ink);
    width: 50px;
    height: 50px;
    box-shadow: var(--gd-shadow-card);
}
.whatsapp-float:hover { background: var(--slate-700); }
.whatsapp-float i { color: #fff; }
.whatsapp-float::before { display: none; }


/* --- Azul #0A5DBA escrito a mano que la conversión no alcanzó ---------------
   Estas reglas no pasaban por variables, así que el remapeo no las tocó. */
.zigzag-item__image,
.demo__form-container {
    box-shadow: none;
}

.comparison-note i.fa-circle-info,
.comparison-note i { color: var(--emerald-700); }

.highlight-box li { border-bottom-color: var(--emerald-100); }

.demo-option:hover { background: var(--slate-50); }


/* --- El foco de los formularios --------------------------------------------
   `.form-group input:focus { outline: none }` anulaba el foco de esta capa, y
   el halo azul que lo sustituía daba 1,16:1 contra el blanco: invisible para
   quien navega con teclado. Se devuelve un anillo sólido de tinta. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.demo__form input:focus,
.demo__form select:focus,
.demo__form textarea:focus,
.form-control:focus {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: none;
    border-color: var(--ink);
}


/* --- El marco de las capturas ----------------------------------------------
   El fondo slate-100 y el radio estaban bien, pero con padding 0 la imagen
   tapaba el marco entero. En el corporativo son 10 px, que es lo que lo hace
   visible. */
.zigzag-item__image {
    padding: 0.625rem;
    background: var(--slate-100);
    border-radius: var(--gd-radius-xl);
}

.zigzag-item__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--gd-radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--gd-shadow-shot);
}


/* --- Tarjetas que seguían con sombra y sin borde ---------------------------- */
.floating-card,
.mockup__browser,
.legal-nav,
.legal-main,
.cookie-preferences-box,
.info-box {
    box-shadow: none;
    border: 1px solid var(--line);
}

/* La destacada de precios: anillo, no sombra, como en el corporativo */
.pricing-card--popular,
.pricing-card--featured {
    box-shadow: 0 0 0 1px var(--ink);
    border-color: var(--ink);
}


/* --- Fichas de estado a medio convertir ------------------------------------- */

/* Estaba mitad ámbar mitad esmeralda: se queda en ámbar, que es el color de
   aviso del ecosistema */
.info-box {
    background: var(--amber-50);
    border-left: 4px solid var(--amber-700);
}
.info-box h4,
.info-box h4 i,
.info-box i.fa-lightbulb,
.info-box h3.h-sub,
.info-box h3.h-sub i { color: var(--amber-900); }
.consequence-item i.fa-triangle-exclamation { color: var(--amber-700); }


/* --- Detalles sueltos ------------------------------------------------------- */

/* Los <button> no heredan la tipografía: los filtros del blog salían en Arial */
button,
input,
select,
textarea,
.category-btn { font-family: var(--font-sans); }

/* Gris escrito a mano (gray-500) en vez del slate del sistema */
.comparison-note { color: var(--text); }

/* Los iconos de terceros de la página de cookies, ahora locales */
.third-party-logo {
    width: 32px;
    height: 32px;
    font-size: 1.75rem;
    line-height: 32px;
    text-align: center;
    color: var(--slate-600);
}


/* --- La tabla de cookies a 390 px -------------------------------------------
   Su contenido mínimo mide 327 px y, con los rellenos de la tarjeta y del
   contenedor, estiraba la columna a 423 px dentro de 350: el texto se cortaba
   y, como html lleva overflow-x:hidden, no había forma de alcanzarlo. Mismo
   remedio que ya tienen la tabla de ayuda y la de comparativa. */
.cookie-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cookie-category > *,
.legal-main > *,
.legal-wrapper > * { min-width: 0; }


/* =============================================================================
   24 · Dos cajas que heredaban radio de píldora
   ============================================================================= */

/* Viene del CSS original, no de la conversión: `--radius-xl` valía 999 px y se
   usaba tanto para insignias como para estas dos cajas. Una caja de 550×610
   con radio 9999 px se dibuja como elipse, y así salía el modal de la demo en
   el sitio publicado. Las insignias sí son píldoras y se quedan como están. */
.demo-modal__content,
.pricing-model-card {
    border-radius: var(--gd-radius-xl);
}


/* =============================================================================
   25 · El logo del pie, sin invertir
   ============================================================================= */

/* El pie era oscuro y style.css volvía el logo blanco con brightness(0) invert(1).
   Desde que el pie es blanco eso lo dejaba invisible. El logo nuevo (28 set. 2026,
   el mismo que usa el panel) va tal cual sobre blanco. */
.footer__logo-img,
.footer__logo img { filter: none; height: 36px; width: auto; }


/* =============================================================================
   26 · La cabecera en teléfonos con el logo nuevo
   ============================================================================= */

/* El logo nuevo es 5,6:1 (el viejo era 3,3:1): a 40 px de alto mide 225 px y en
   un teléfono de 390 empujaba los botones fuera de la pantalla, con la
   hamburguesa inalcanzable. Bajo 480 px el logo baja a 32 px (180 px de ancho)
   y se oculta la píldora "Demo", que ya está en la portada y en el menú. */
@media (max-width: 480px) {
    .nav__logo img,
    .header .logo img,
    .nav__logo-img { height: 32px; }
    .header .nav__actions .btn--demo { display: none; }
    .nav__actions { gap: 8px; }
}


/* =============================================================================
   27 · Cualquier tabla de las páginas legales se desplaza dentro de su caja
   ============================================================================= */

/* La regla anterior cubría solo .cookie-table; en cookies.html hay otra tabla
   sin esa clase que a 390 px se pasaba 6 px del borde. */
.legal-main table,
.legal-content table,
.cookie-category table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =============================================================================
   28 · Arreglos de la auditoría SEO (5 oct. 2026)
   ============================================================================= */

/* Los títulos de columna del pie eran h4 sin un h3 encima: el orden de
   encabezados saltaba de h2 a h4 en todas las páginas. Ahora son párrafos con
   el mismo aspecto que tenían. */
.footer__links .footer__heading {
    font-family: var(--font-sans);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    margin: 0 0 24px;
}

/* La etiqueta verde del hero pasa a ser parte del H1, para que el título
   principal diga qué es GoBooking. Se ve igual que antes: una píldora en su
   propia línea, encima de la frase grande. */
.hero__content .hero__title span.hero__badge:not(.text-gradient) {
    display: table;
    margin: 0 0 20px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--emerald-700);
    text-wrap: wrap;
}
/* Bajo 1024 px el hero va centrado (.hero__container en style.css): la
   píldora, que es una tabla, se centra con márgenes automáticos. */
@media (max-width: 1024px) {
    .hero__content .hero__title span.hero__badge:not(.text-gradient) { margin-left: auto; margin-right: auto; }
}

/* Entradas del blog: el título de cada tarjeta es el enlace (antes solo
   "Leer más"), sin cambiar su aspecto. */
.blog-card__title a,
.related-grid .blog-card__title a {
    color: inherit;
    text-decoration: none;
}
.blog-card__title a:hover { color: var(--emerald-700); }

/* Etiquetas de los artículos: eran enlaces vacíos (href="#"); ahora son texto. */
span.article-tag { cursor: default; }

/* Flotantes en teléfonos: el de WhatsApp tapaba texto al leer. Es más chico,
   se aparta mientras se baja por la página y vuelve al subir (main.js).
   El de "volver arriba" se oculta: en el teléfono ya existe ese gesto. */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 44px;
        height: 44px;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
    }
    .whatsapp-float i { font-size: 1.375rem; }
    .whatsapp-float.is-hidden {
        transform: translateY(72px);
        opacity: 0;
        pointer-events: none;
    }
    .back-to-top { display: none; }
    .footer { padding-bottom: 72px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .whatsapp-float { transition: none; }
}

/* Comparativa: guía corta para elegir plan, debajo de la tabla. */
.comparison--guide { padding-top: 0; }
.plan-guide {
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}
.plan-guide li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 20px;
    color: var(--text);
    line-height: 1.6;
}
.plan-guide strong { color: var(--ink); }
.plan-guide__note { max-width: 860px; margin: 16px auto 0; color: var(--slate-600); }
.plan-guide__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Tamaño del nivel original para los encabezados que subieron de nivel al
   corregir el orden (h2 → h4 pasaba a ser h2 → h3, con el aspecto de un h4). */
.h-sub  { font-size: 1.0625rem; line-height: 1.35; letter-spacing: normal; font-weight: 600; }
.h-sub3 { font-size: 1.25rem;   line-height: 1.3;  letter-spacing: -0.01em; font-weight: 600; }

/* Zonas táctiles de al menos 44 px en pantallas táctiles, sin mover el diseño:
   el relleno amplía el área y el margen negativo lo compensa. */
@media (pointer: coarse), (max-width: 768px) {
    .nav__logo { padding-block: 6px; min-height: 44px; display: inline-flex; align-items: center; }
    .breadcrumb a,
    .blog-card__link,
    .contact-item a {
        display: inline-block;
        padding-block: 12px;
        margin-block: -12px;
    }
    /* "Blog" e "Inicio" miden 32-39 px de ancho: el área táctil se ensancha
       sin mover el texto (el margen negativo compensa el relleno). */
    .breadcrumb a { min-width: 44px; padding-inline: 6px; margin-inline: -6px; text-align: center; }
    .share-btn { width: 44px; height: 44px; }
    .footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
    .category-btn { min-height: 44px; padding: 0.625rem 1.125rem; }
    .help-nav a { min-height: 44px; }
}

/* Filtro del blog: la tarjeta lleva display propio y le ganaba al atributo hidden. */
.blog-card[hidden] { display: none; }

/* Listas dentro de los artículos del blog: con viñeta o número (el CSS base
   quita las viñetas en todo el sitio). */
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li::marker { color: var(--emerald-600); }

/* Llamada a la acción y avatar del autor en las entradas: el diseño viejo los
   pintaba con un degradado azul y texto blanco; al quitar el degradado quedó
   blanco sobre blanco. Pasan al bloque oscuro del ecosistema y al esmeralda. */
.article-cta {
    background: var(--ink);
    color: #fff;
    border-radius: 24px;
}
.article-content .article-cta h3,
.article-cta h3 { color: #fff; }
.article-cta p { color: rgb(255 255 255 / 0.82); }
.article-cta .btn,
.article-cta .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
.article-cta .btn:hover { background: var(--slate-100); border-color: var(--slate-100); color: var(--ink); transform: none; }
.author-avatar {
    background: var(--emerald-50);
    border: 1px solid var(--emerald-100);
}
.author-avatar i { color: var(--emerald-700); }

/* ==========================================================================
   29 · Casos ilustrativos (5 oct. 2026)
   Los casos de éxito y la entrada de Spa Serenity no son clientes reales
   (ninguno existe como cuenta en GoBooking): una nota visible lo dice antes
   del contenido. Mismo bloque en la página de casos y dentro del artículo.
   ========================================================================== */
.aviso-ejemplo { padding: 40px 0 0; }
p.nota-ejemplo,
.article-content p.nota-ejemplo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 16px;
    color: var(--slate-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    text-align: left;
}
.article-content p.nota-ejemplo { max-width: none; margin: 0 0 32px; }
.nota-ejemplo i { color: var(--emerald-700); margin-top: 5px; flex-shrink: 0; }
.nota-ejemplo strong { color: var(--ink); }

/* Enlaces secundarios dentro de la llamada a la acción de las entradas:
   la demo y los precios (oportunidad 24 de la auditoría). */
.article-cta .article-cta__links {
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 12px;
    color: rgb(255 255 255 / 0.6);
}
.article-cta__links a {
    display: inline-block;
    padding: 12px 4px;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-cta__links a:hover { color: var(--emerald-100); }
/* En teléfonos los dos enlaces no caben en una fila: van apilados y sin el
   punto separador, que quedaba suelto al final de la primera línea. */
@media (max-width: 480px) {
    .article-cta .article-cta__links { flex-direction: column; gap: 0; }
    .article-cta__links span { display: none; }
}

/* Cajas de consejo, éxito, aviso e información: su encabezado pasó de h4 a
   h2/h3 con la clase h-sub (orden de encabezados) y heredaba el margen
   superior de los títulos del artículo (32-40 px). Vuelve a ir pegado al
   borde de la caja, como antes, y el último párrafo no suma margen abajo. */
:is(.tip-box, .success-box, .warning-box, .info-box) > :is(.h-sub, .h-sub3):first-child { margin-top: 0; }
:is(.tip-box, .success-box, .warning-box, .info-box) > :last-child { margin-bottom: 0; }
/* Los enlaces dentro de esas cajas se veían como texto normal. */
.article-content :is(.tip-box, .success-box, .warning-box, .info-box) a {
    color: var(--emerald-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =============================================================================
   30 · Crítica de diseño (5 oct. 2026)
   Portada más corta y con jerarquía, bloque propio de Costa Rica, planes
   alineados y restos del diseño viejo (iconos blancos sobre fondo claro).
   ============================================================================= */

/* Hero: el alto mínimo de pantalla completa dejaba ~340 px vacíos bajo el
   contenido; ahora mide lo que ocupa y la franja siguiente asoma. */
.hero { min-height: 0; }

/* Cifras reales en lugar de «Fácil / Rápido / Siempre». */
.hero__datos {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: flex;
    gap: 40px;
}
.hero__datos .stat { text-align: left; }
.hero__datos .stat__number { font-size: 1.75rem; line-height: 1.1; }
.hero__datos .stat__label {
    display: block;
    margin-top: 6px;
    max-width: 15ch;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--slate-600);
}
@media (max-width: 1024px) {
    .hero__datos { justify-content: center; }
    .hero__datos .stat { text-align: center; }
    .hero__datos .stat__label { margin-inline: auto; }
}
@media (max-width: 600px) {
    .hero__datos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 32px;
    }
    .hero__datos .stat__number { font-size: 1.25rem; }
    .hero__datos .stat__label { font-size: 0.75rem; }
}

/* «Para quién» dentro de Beneficios: los sectores como etiquetas. Las del
   turismo, que es la especialidad, van con el tinte esmeralda. */
.sectores {
    list-style: none;
    padding: 0;
    margin: 0 auto 48px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.sector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--gd-radius-full);
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-700);
    font-size: 0.9375rem;
    font-weight: 500;
}
.sector i { color: var(--emerald-700); font-size: 0.9375rem; }
.sector--turismo { background: var(--emerald-50); border-color: var(--emerald-100); color: var(--ink); }
.features__grid--compact.features__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .features__grid--compact.features__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .features__grid--compact.features__grid--4 { grid-template-columns: 1fr; } }

/* Bloque de Costa Rica: dos columnas y tinte esmeralda, para que lo que solo
   GoBooking ofrece aquí no pese lo mismo que el resto. */
.costa-rica {
    padding: clamp(4rem, 3rem + 3vw, 6rem) 0;
    background: var(--emerald-50);
    border-block: 1px solid var(--emerald-100);
}
.costa-rica__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
}
.costa-rica__intro .section__title { text-align: left; margin: 14px 0 16px; }
.costa-rica__texto { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.7; margin: 0; }
.costa-rica__subtitulo { margin: 28px 0 12px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.costa-rica__pagos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.costa-rica__pagos li { display: flex; align-items: center; gap: 12px; color: var(--slate-700); }
.costa-rica__pagos i { width: 20px; text-align: center; color: var(--emerald-700); }
.costa-rica__nota { margin: 24px 0 0; font-size: 0.875rem; color: var(--slate-600); }
.costa-rica__tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.costa-rica__tarjetas .feature-card { background: #fff; }
@media (max-width: 1024px) {
    .costa-rica__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .costa-rica__tarjetas { grid-template-columns: 1fr; }
}

/* Preguntas frecuentes (gris) y demo quedaban juntas con el mismo fondo. */
.demo-section { background: #fff; }

/* Planes: una sola insignia destacada (esmeralda); las demás, neutras.
   Tarjetas de igual alto con el botón abajo. */
.new-badge,
.selfservice-badge,
.enterprise-badge {
    background: var(--slate-100);
    color: var(--slate-700);
    border: 1px solid var(--slate-200);
}
.popular-badge { background: var(--emerald-700); color: #fff; border: 1px solid var(--emerald-700); }
.pricing__grid--4 { align-items: stretch; }
.pricing__grid--4 .pricing-card { display: flex; flex-direction: column; }
.pricing__grid--4 .pricing-card__features { flex-grow: 1; }
.pricing__grid--4 .pricing-card > .btn { margin-top: auto; }
.pricing-iva { margin: 32px auto 0; max-width: 60ch; text-align: center; font-size: 0.9375rem; color: var(--slate-600); }
.pricing-iva + .pricing-iva { margin-top: 12px; }
.pricing-iva a, .plan-guide a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pricing-card__header p { text-wrap: balance; }
.pricing-card__price .period { white-space: nowrap; }
/* Teléfonos de 320 px: «Hablar con ventas» en una sola línea */
@media (max-width: 360px) {
    .pricing__grid--4 .pricing-card .btn { white-space: nowrap; padding-inline: 16px; }
}
/* Comparativa en el teléfono: la tabla se desliza y la columna de funciones queda fija */
@media (max-width: 768px) {
    .comparison-table { overflow: clip; }
    .comparison-table th:first-child,
    .comparison-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 132px; background: #fff; box-shadow: 1px 0 0 var(--slate-200), 8px 0 10px -8px rgba(15, 23, 42, 0.18); }
    .comparison-table thead th:first-child { background: var(--slate-100); }
    /* pages.css las bajaba a ~10 px: el mínimo legible es 12 px */
    .comparison-table th .new-badge,
    .comparison-table th .selfservice-badge,
    .comparison-table th .popular-badge,
    .comparison-table th .enterprise-badge { font-size: 0.75rem; }
}
/* En el teléfono cada plan muestra sus cinco puntos principales; el detalle
   completo está en la comparativa (los planes ocupaban más de cuatro pantallas). */
@media (max-width: 768px) {
    .pricing__grid--4 .pricing-card__features li:nth-child(n+6) { display: none; }
}

/* Iconos y marcas con contraste suficiente (mínimo 3:1 para gráficos). */
.pricing-card__features li i,
.zigzag-item__features li i,
.demo__feature i,
.form-note i { color: var(--emerald-600); }
.floating-card--1 i { color: var(--emerald-600); }
.footer__payments-cards i { color: var(--slate-500); }
.footer__bottom .fa-heart { color: var(--emerald-700); }
.comparison-table td .fa-check { color: var(--emerald-700); }
.comparison-table td .fa-xmark { color: #dc2626; }
.btn--whatsapp i { color: #128C7E; }
.share-btn.twitter { background: #0f1419; }
.share-btn.whatsapp { background: #128C7E; }

/* Casos de uso: la cabecera de cada tarjeta era una banda gris con un icono
   blanco invisible; queda como las demás tarjetas del sitio. */
.case-card__header {
    background: transparent;
    color: var(--ink);
    padding: 24px 24px 0;
}
.case-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--emerald-50);
    border: 1px solid var(--emerald-100);
}
.case-icon i { color: var(--emerald-700); font-size: 1.125rem; }
.case-industry { padding: 4px 12px; font-size: 0.8125rem; line-height: 1.5; }
.case-featured__image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 440px;
    object-fit: cover;
    border-radius: 24px;
}

/* Idioma: el botón EN solo donde hay traducción completa. */
html:not([data-traducible]) .lang-selector { display: none !important; }

/* Boletín del blog. */
.newsletter-aviso { margin: 12px 0 0; font-size: 0.9375rem; min-height: 1.5em; }
.newsletter-aviso--ok { color: var(--emerald-700); font-weight: 600; }
.newsletter-aviso--error { color: #b91c1c; }
/* El plan destacado se distingue por el borde y la insignia, no por tamaño:
   el escalado bajaba su botón y desalineaba la fila. */
.pricing__grid--4 .pricing-card--popular { transform: none; }
/* Sin alto mínimo, la ola del borde inferior (posición absoluta) tapaba las
   etiquetas de los datos: el relleno de abajo deja sitio para ella. */
.hero { padding-bottom: clamp(4.5rem, 2rem + 8vw, 9.5rem); }

/* Teléfono: etiquetas de sector más compactas y planes en carrusel horizontal
   (antes, los cuatro planes uno debajo de otro ocupaban unos 3.000 px). */
.pricing-desliza { display: none; }
@media (max-width: 768px) {
    .sector { padding: 6px 12px; font-size: 0.875rem; gap: 6px; }
    .sectores { gap: 8px; }
    .pricing-desliza {
        display: block;
        margin: 0 0 8px;
        text-align: center;
        font-size: 0.875rem;
        color: var(--slate-600);
    }
    .pricing-desliza i { color: var(--emerald-700); margin-left: 4px; }
    .pricing__grid--4 {
        display: flex;
        gap: 14px;
        max-width: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        padding: 18px 4px 8px;
        scrollbar-width: none;
    }
    .pricing__grid--4::-webkit-scrollbar { display: none; }
    .pricing__grid--4 .pricing-card {
        flex: 0 0 86%;
        scroll-snap-align: center;
    }
}
/* Teléfono: tarjetas de beneficios, de Costa Rica y pasos en formato de fila
   (icono o número a la izquierda): cada una pasa de ~450 px a ~150 px. */
@media (max-width: 600px) {
    .features__grid--compact .feature-card,
    .costa-rica__tarjetas .feature-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        text-align: left;
        padding: 20px;
    }
    .features__grid--compact .feature-card__icon,
    .costa-rica__tarjetas .feature-card__icon {
        grid-row: span 2;
        width: 48px;
        height: 48px;
        margin: 0;
    }
    .features__grid--compact .feature-card__title,
    .costa-rica__tarjetas .feature-card__title { margin: 2px 0 6px; }
    .features__grid--compact .feature-card__text,
    .costa-rica__tarjetas .feature-card__text { margin: 0; }
    .step {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        text-align: left;
        padding: 20px;
    }
    .step__number { width: 48px; height: 48px; font-size: 1.25rem; margin: 0; }
    .step__content h3 { margin-top: 4px; }
    .step__icon { display: none; }
}
/* Las reglas de pages.css y style.css eran más específicas que las de arriba. */
.comparison-table td i.fa-check { color: var(--emerald-700); }
.comparison-table td i.fa-xmark { color: #dc2626; }
.demo__form .form-note i { color: var(--emerald-700); }
/* Tableta (769-1024 px): los planes iban en una sola columna de 400 px (cuatro
   tarjetas una debajo de otra); van de dos en dos. */
@media (min-width: 769px) and (max-width: 1024px) {
    .pricing__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}

/* Boletín: la caja y el campo estaban pensados para el degradado azul viejo;
   sin él, el campo blanco sin borde no se veía y el foco tampoco. El aviso va
   debajo, a lo ancho (como tercera columna descentraba el contenido). */
.newsletter-box {
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    padding: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
}
.newsletter-content h3 { color: var(--ink); }
.newsletter-content h3 i { color: var(--emerald-700); }
.newsletter-content p { color: var(--slate-600); }
.newsletter-form input[type="email"] {
    border: 1px solid var(--slate-300);
    background: #fff;
    border-radius: var(--gd-radius-full);
    color: var(--ink);
}
.newsletter-form input[type="email"]::placeholder { color: var(--slate-500); }
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--emerald-600);
    box-shadow: 0 0 0 3px rgb(5 150 105 / 0.25);
}
.newsletter-aviso { grid-column: 1 / -1; margin: 12px 0 0; min-height: 0; text-align: right; }
.newsletter-aviso:empty { display: none; }
@media (max-width: 768px) {
    .newsletter-box { grid-template-columns: 1fr; row-gap: 1.25rem; padding: 1.75rem; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input[type="email"] { width: 100%; }
    .newsletter-aviso { text-align: left; }
}

/* Tarjetas relacionadas de las entradas: sin fecha ni categoría en el cuerpo,
   el título quedaba a ~60 px de la foto. */
.related-grid .blog-card__content { padding-top: 20px; }
.related-grid .blog-card__title { margin-top: 0; }
.newsletter-content h3 { margin-top: 0; }
/* La regla de fondos por sección usa el id #facturacion y le ganaba a .costa-rica. */
#facturacion.costa-rica { background: var(--emerald-50); }
/* Escritorio: cabecera y precio con el mismo alto en los cuatro planes, para que
   las listas empiecen a la misma altura («3-6 % según estudio» ocupa dos líneas). */
@media (min-width: 1025px) {
    .pricing__grid--4 .pricing-card__header { min-height: 80px; }
    .pricing__grid--4 .pricing-card__price { min-height: 116px; }
}
/* El aviso «+3 reservas nuevas» tapaba el horario de las 09:00 de la maqueta:
   baja al borde inferior de la tarjeta. */
.floating-card--2 { bottom: -22px; left: -30px; top: auto; }


/* =============================================================================
   28 · Logo nuevo (25 oct. 2026) con el eslogan en el pie
   ============================================================================= */

/* El logo nuevo (las flechas de GoData en lugar del punto de la i) mide 4,2:1:
   a 40 px de alto ocupa 167 px. En el pie va con el eslogan centrado debajo,
   igual que el lema de GoData: Figtree 500 y pizarra 500 (4,8:1 sobre blanco). */
.footer__logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
.footer__slogan {
    font-family: 'Figtree', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: #64748b;
}
.footer__logo:hover .footer__slogan { color: #475569; }