/*
   CuidateGratis - UI/UX Polish, Accessibility & Performance Fixes
   Versión 2.1.0
   Cambios: vars acento globales, fix botón Añadir Fuente, fix link legal,
            shimmer en botones, hero gradient text, glow en tool icons,
            barra acento en tarjetas, hover animaciones mejoradas
*/

/* ─── VARIABLES SEMÁNTICAS ──────────────────────────────────────────────────*/
:root {
    color-scheme: light;
    --cg-glass-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --cg-card-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    --cg-card-border: hsl(var(--border) / 0.9);
    --cg-footer-bg: hsl(215 28% 17%);
    --cg-footer-fg: hsl(210 20% 92%);
    --cg-footer-muted: hsl(215 16% 65%);
    /* Colores de acento para herramientas */
    --cg-tool-imc: hsl(160 84% 39%);        /* verde primario */
    --cg-tool-calorias: hsl(24 100% 63%);   /* naranja */
    --cg-tool-nutricion: hsl(180 62% 41%);  /* teal */
    --cg-tool-amino: hsl(262 83% 58%);      /* púrpura */
    --cg-tool-hidratacion: hsl(217 91% 60%); /* azul */

    /* ── Variables de acento extendidas (usadas por app.min.css) ──────────────
       Sin estas definiciones las clases bg-accent-purple, text-accent-teal,
       border-accent-orange, etc. quedan transparentes/invisibles.              */
    --accent-purple:           262 83% 58%;   /* violeta Amino */
    --accent-teal:             180 62% 41%;   /* teal Nutrición */
    --accent-orange:            24 100% 63%;  /* naranja Calorías */
    --accent-yellow:            45 96% 58%;   /* amarillo */
    --primary-blue:            217 91% 60%;   /* azul Hidratación */
    --primary-blue-foreground:   0  0% 100%;
    --tertiary-foreground:     215 28% 17%;
}

:root.dark {
    color-scheme: dark;
    --cg-glass-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
    --cg-card-shadow: 0 24px 48px rgba(2, 6, 23, 0.28);
    --cg-card-border: hsl(var(--border) / 0.75);
    --cg-footer-bg: hsl(215 28% 12%);
    --cg-footer-fg: hsl(210 20% 92%);
    --cg-footer-muted: hsl(215 16% 65%);
}

html { scroll-padding-top: 6rem; }

body.cuidategratis-body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    overflow-x: hidden;
}

body.cuidategratis-body.dark { background-color: hsl(var(--background)); }

#cuidategratis-main, #root { min-height: 100vh; }

/* ─── SKIP LINK ─────────────────────────────────────────────────────────────*/
.skip-link {
    position: absolute; left: 1rem; top: 1rem; z-index: 9999;
    padding: 0.875rem 1.125rem; border-radius: 999px;
    background: hsl(var(--foreground)); color: hsl(var(--background));
    transform: translateY(-200%); transition: transform 0.2s ease; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ─── NOSCRIPT ───────────────────────────────────────────────────────────────*/
.cuidategratis-noscript {
    max-width: 52rem; margin: 8rem auto 3rem; padding: 2rem;
    border-radius: 1.5rem; background: hsl(var(--card)); color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border)); box-shadow: var(--cg-card-shadow); text-align: center;
}
.cuidategratis-noscript h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 4vw, 2.6rem); }

/* ─── TIPOGRAFÍA ─────────────────────────────────────────────────────────────*/
.font-heading, h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', 'DM Sans', sans-serif !important; }

/* Encabezados de sección h2 con línea decorativa bajo la palabra clave */
#root section h2 {
    letter-spacing: -0.03em;
    text-wrap: balance;
}
/* Texto overline / eyebrow arriba de h2 (texto pequeño en mayúsculas) */
#root section p.text-sm.font-medium.uppercase,
#root section p.text-sm.font-semibold.uppercase {
    letter-spacing: 0.12em;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700 !important;
}

/* ─── HEADER GLASS ───────────────────────────────────────────────────────────*/
#root > div > header {
    background: hsl(var(--background) / 0.78) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid hsl(var(--border) / 0.72);
    box-shadow: var(--cg-glass-shadow);
    padding-top: 1rem !important; padding-bottom: 1rem !important;
}
#root > div > header.is-scrolled { background: hsl(var(--background) / 0.9) !important; }
#root > div > header nav a[aria-current='page'] { color: hsl(var(--foreground)); }
#root > div > header nav a[aria-current='page']::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -0.6rem;
    height: 2px; border-radius: 999px; background: hsl(var(--primary));
}
#root > div > header button[aria-label*='modo'] {
    border: 1px solid hsl(var(--border) / 0.9); background: hsl(var(--card) / 0.88);
}

/* ─── SECCIONES ──────────────────────────────────────────────────────────────*/
#root > div > main > main > section { position: relative; }
#root > div > main > main > section + section {
    padding-top: clamp(4.5rem, 7vw, 5.75rem) !important;
    padding-bottom: clamp(4.5rem, 7vw, 5.75rem) !important;
}

/* ─── HERO ───────────────────────────────────────────────────────────────────*/
[data-cg-hero='true'] {
    min-height: auto !important;
    padding-top: clamp(7.5rem, 11vw, 9rem) !important;
    padding-bottom: clamp(4rem, 6vw, 5.5rem) !important;
    /* Ambient glow detrás del hero */
    background:
        radial-gradient(ellipse 72% 52% at 65% 30%, hsl(var(--primary) / 0.065) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 20% 80%, hsl(var(--secondary) / 0.05) 0%, transparent 65%)
        !important;
}
[data-cg-hero='true'] .max-w-2xl { max-width: 38rem !important; }
[data-cg-hero='true'] h1 {
    font-size: clamp(2.7rem, 5.2vw, 4.9rem) !important;
    line-height: 0.98 !important; letter-spacing: -0.05em;
    max-width: 11ch; text-wrap: balance; margin-bottom: 1.25rem !important;
    /* Palabra clave en gradiente */
    background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--foreground)) 55%, hsl(var(--primary)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-cg-hero='true'] p.text-lg, [data-cg-hero='true'] p.text-xl {
    max-width: 60ch; margin-bottom: 2rem !important;
    color: hsl(var(--muted-foreground)) !important;
}
[data-cg-hero='true'] .inline-flex.items-center.gap-2 {
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.12);
    background: hsl(var(--primary) / 0.06) !important;
    border-radius: 999px !important;
}
[data-cg-hero-media='true'] { margin-top: 0 !important; }
[data-cg-hero-media='true'] img {
    height: clamp(430px, 48vw, 620px) !important; border-radius: 2rem !important;
    object-position: center;
    box-shadow: 0 40px 70px rgba(15, 23, 42, 0.18), 0 0 0 1px hsl(var(--border));
}
[data-cg-floating-badge='true'] {
    left: 1.5rem !important; bottom: 1.5rem !important; padding: 1rem 1.125rem !important;
    border: 1px solid hsl(var(--primary) / 0.18) !important;
    background: hsl(var(--card) / 0.88) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16), 0 0 0 1px hsl(var(--primary) / 0.06) !important;
    backdrop-filter: blur(16px);
}

/* ─── BOTONES ────────────────────────────────────────────────────────────────*/
@keyframes cg-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.premium-btn-primary {
    position: relative;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))) !important;
    color: hsl(var(--primary-foreground)) !important; min-height: 3.4rem;
    padding-inline: 1.5rem !important;
    box-shadow: 0 16px 28px rgba(16, 185, 129, 0.26), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    overflow: hidden;
}
.premium-btn-primary::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
    background-size: 200% auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.premium-btn-primary:hover::after { opacity: 1; animation: cg-shimmer 0.7s linear; }
.premium-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 36px rgba(16, 185, 129, 0.32), inset 0 1px 0 rgba(255,255,255,0.2) !important; }

.premium-btn-secondary {
    min-height: 3.4rem; padding-inline: 1.5rem !important;
    border: 1px solid hsl(var(--primary) / 0.28) !important;
    background: hsl(var(--card) / 0.92) !important; color: hsl(var(--foreground)) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}
.premium-btn-secondary:hover {
    border-color: hsl(var(--primary) / 0.52) !important;
    background: hsl(var(--primary) / 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09) !important;
}

/* Fix global: botón bg-accent-purple ahora visible con shimmer */
.bg-accent-purple {
    background-color: hsl(var(--accent-purple)) !important;
    box-shadow: 0 10px 24px hsl(var(--accent-purple) / 0.28) !important;
}
.bg-accent-purple:hover,
.hover\:bg-accent-purple\/90:hover {
    background-color: hsl(var(--accent-purple) / 0.88) !important;
    box-shadow: 0 14px 30px hsl(var(--accent-purple) / 0.36) !important;
    transform: translateY(-1px);
}

/* ─── TARJETAS ───────────────────────────────────────────────────────────────*/
.premium-card {
    border-color: var(--cg-card-border) !important;
    box-shadow: 0 4px 6px rgba(15,23,42,0.04), 0 14px 34px rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s cubic-bezier(0.22,1,0.36,1) !important;
}
.premium-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 24px 48px rgba(15, 23, 42, 0.12), 0 0 0 1px hsl(var(--primary) / 0.06) !important;
}
.premium-card .h-14.w-14, .premium-card .h-16.w-16, [data-cg-tools='true'] .h-16.w-16 {
    border: 1px solid hsl(var(--border)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease;
}
.premium-card:hover .h-14.w-14,
.premium-card:hover .h-16.w-16 {
    transform: scale(1.08) rotate(-2deg);
    box-shadow: 0 6px 16px hsl(var(--primary) / 0.16), inset 0 1px 0 rgba(255,255,255,0.45);
}
[data-cg-tools='true'] > div > a > div, [data-cg-blog='true'] .group > a, [data-cg-newsletter='true'] > div {
    border-color: var(--cg-card-border) !important;
}
[data-cg-process='true'] .premium-card { min-height: 100%; }
[data-cg-blog='true'] .group > a { box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05); }

/* ─── ICONOS DE HERRAMIENTAS: COLORES DEL TEMA ───────────────────────────────*/

/* Tarjeta 1: Calculadora IMC → verde primario */
[data-cg-tools='true'] .grid > div:nth-child(1) .h-16.w-16 {
    background: hsl(var(--primary) / 0.12) !important;
    border-color: hsl(var(--primary) / 0.25) !important;
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.06) !important;
}
[data-cg-tools='true'] .grid > div:nth-child(1) .h-16.w-16 svg { color: hsl(var(--primary)) !important; }
[data-cg-tools='true'] .grid > div:nth-child(1):hover .h-16.w-16 {
    background: hsl(var(--primary) / 0.2) !important;
    box-shadow: 0 0 0 6px hsl(var(--primary) / 0.1), 0 8px 20px hsl(var(--primary) / 0.18) !important;
}

/* Tarjeta 2: Calculadora de Calorías → naranja */
[data-cg-tools='true'] .grid > div:nth-child(2) .h-16.w-16 {
    background: hsl(var(--accent-orange) / 0.12) !important;
    border-color: hsl(var(--accent-orange) / 0.25) !important;
    box-shadow: 0 0 0 4px hsl(var(--accent-orange) / 0.06) !important;
}
[data-cg-tools='true'] .grid > div:nth-child(2) .h-16.w-16 svg { color: hsl(var(--accent-orange)) !important; }
[data-cg-tools='true'] .grid > div:nth-child(2):hover .h-16.w-16 {
    background: hsl(var(--accent-orange) / 0.2) !important;
    box-shadow: 0 0 0 6px hsl(var(--accent-orange) / 0.1), 0 8px 20px hsl(var(--accent-orange) / 0.18) !important;
}

/* Tarjeta 3: Análisis Nutricional → teal */
[data-cg-tools='true'] .grid > div:nth-child(3) .h-16.w-16 {
    background: hsl(var(--accent-teal) / 0.12) !important;
    border-color: hsl(var(--accent-teal) / 0.25) !important;
    box-shadow: 0 0 0 4px hsl(var(--accent-teal) / 0.06) !important;
}
[data-cg-tools='true'] .grid > div:nth-child(3) .h-16.w-16 svg { color: hsl(var(--accent-teal)) !important; }
[data-cg-tools='true'] .grid > div:nth-child(3):hover .h-16.w-16 {
    background: hsl(var(--accent-teal) / 0.2) !important;
    box-shadow: 0 0 0 6px hsl(var(--accent-teal) / 0.1), 0 8px 20px hsl(var(--accent-teal) / 0.18) !important;
}

/* Tarjeta 4: Perfil de Aminoácidos → púrpura */
[data-cg-tools='true'] .grid > div:nth-child(4) .h-16.w-16 {
    background: hsl(var(--accent-purple) / 0.12) !important;
    border-color: hsl(var(--accent-purple) / 0.25) !important;
    box-shadow: 0 0 0 4px hsl(var(--accent-purple) / 0.06) !important;
}
[data-cg-tools='true'] .grid > div:nth-child(4) .h-16.w-16 svg { color: hsl(var(--accent-purple)) !important; }
[data-cg-tools='true'] .grid > div:nth-child(4):hover .h-16.w-16 {
    background: hsl(var(--accent-purple) / 0.2) !important;
    box-shadow: 0 0 0 6px hsl(var(--accent-purple) / 0.1), 0 8px 20px hsl(var(--accent-purple) / 0.18) !important;
}

/* Iconos de la sección herramientas: transición suave */
[data-cg-tools='true'] .h-16.w-16 svg {
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
[data-cg-tools='true'] .grid > div:hover .h-16.w-16 svg { transform: scale(1.12) rotate(-4deg); }

/* Barra de acento inferior en tarjetas de herramientas */
[data-cg-tools='true'] .grid > div:nth-child(1) > a > div,
[data-cg-tools='true'] .grid > div:nth-child(1) > div {
    border-bottom: 3px solid hsl(var(--primary) / 0.35) !important;
}
[data-cg-tools='true'] .grid > div:nth-child(2) > a > div,
[data-cg-tools='true'] .grid > div:nth-child(2) > div {
    border-bottom: 3px solid hsl(var(--accent-orange) / 0.35) !important;
}
[data-cg-tools='true'] .grid > div:nth-child(3) > a > div,
[data-cg-tools='true'] .grid > div:nth-child(3) > div {
    border-bottom: 3px solid hsl(var(--accent-teal) / 0.35) !important;
}
[data-cg-tools='true'] .grid > div:nth-child(4) > a > div,
[data-cg-tools='true'] .grid > div:nth-child(4) > div {
    border-bottom: 3px solid hsl(var(--accent-purple) / 0.35) !important;
}

/* Iconos de las mini-tarjetas de características */
[data-cg-hero='true'] ~ section:not([data-cg-tools='true']) .h-14.w-14 svg,
[data-cg-hero='true'] ~ section:not([data-cg-tools='true']) .h-12.w-12 svg {
    color: hsl(var(--primary)) !important;
}

/* ─── CORRECCIÓN MODO CLARO: textos hardcoded ────────────────────────────────*/
[data-cg-blog='true'] .text-white,
[data-cg-blog='true'] .text-white\/80,
[data-cg-blog='true'] .text-gray-400,
[data-cg-blog='true'] [class*='text-\[#F9FAFB\]'] {
    color: hsl(var(--foreground)) !important;
}

/* ─── CALCULADORAS: INPUTS Y CONTROLES ───────────────────────────────────────
   La clase premium-input no tiene estilos definidos en el bundle compilado.
   Se definen aquí con el sistema de diseño del tema.                           */

.premium-input {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.875rem;
    border-radius: calc(var(--radius) - 0.25rem);
    border: 1.5px solid hsl(var(--border));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.premium-input::-webkit-outer-spin-button,
.premium-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.premium-input::placeholder {
    color: hsl(var(--muted-foreground) / 0.6);
}

.premium-input:hover {
    border-color: hsl(var(--primary) / 0.45);
    background-color: hsl(var(--card));
}

.premium-input:focus {
    outline: none !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15) !important;
    background-color: hsl(var(--card));
}

/* ─── CALCULADORAS: TARJETA PRINCIPAL ────────────────────────────────────────*/
.premium-card.flex.flex-col.h-full.bg-card {
    border-radius: 1.5rem !important;
    padding: 2rem !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    border: 1.5px solid hsl(var(--border)) !important;
    background: hsl(var(--card)) !important;
}

/* Icono de la calculadora en el header de la tarjeta */
.premium-card .p-3.rounded-\[16px\].bg-primary\/10 {
    background: hsl(var(--primary) / 0.1) !important;
    border: 1px solid hsl(var(--primary) / 0.2) !important;
}
.premium-card .p-3.rounded-\[16px\] svg {
    color: hsl(var(--primary)) !important;
}

/* Tabs de la calculadora (KG/CM | LB/IN) */
.premium-card [role='tablist'] {
    background: hsl(var(--input)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.875rem !important;
    padding: 0.25rem !important;
}
.premium-card [role='tab'][data-state='active'] {
    background: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    border-radius: 0.625rem !important;
}
.premium-card [role='tab'][data-state='inactive'] {
    color: hsl(var(--muted-foreground)) !important;
}

/* Botón calcular */
.premium-card button[type='button']:not([role='tab']):not([role='switch']) {
    min-height: 3rem;
    border-radius: 999px !important;
    font-weight: 600;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 8px 24px hsl(var(--primary) / 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer;
}
.premium-card button[type='button']:not([role='tab']):not([role='switch']):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px hsl(var(--primary) / 0.4) !important;
}

/* ─── CALCULADORAS: RESULTADO DEL IMC ────────────────────────────────────────*/
.premium-card .mt-6.p-5,
.premium-card .mt-6.p-4,
.premium-card [class*='bg-primary/10'],
.premium-card [class*='bg-accent'] {
    border-radius: 1rem !important;
    padding: 1.25rem !important;
}

/* Barra de progreso del IMC */
.premium-card .relative.h-3 {
    border-radius: 999px !important;
    overflow: hidden;
    background: hsl(var(--muted)) !important;
}
.premium-card .relative.h-3 > div {
    border-radius: 999px !important;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ─── TABS DE HERRAMIENTAS (IMC, Macros, Análisis...) ────────────────────────*/
[role='tablist'].inline-flex.whitespace-nowrap {
    background: hsl(var(--card)) !important;
    border: 1.5px solid hsl(var(--border)) !important;
    border-radius: 1.25rem !important;
    padding: 0.5rem !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

[role='tab'][data-state='active'].flex.items-center.gap-2 {
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
}

/* Tab IMC activo → verde */
[id$='-trigger-bmi'][data-state='active'] {
    background: hsl(var(--primary) / 0.12) !important;
    color: hsl(var(--primary)) !important;
}

/* Tab Macros activo → naranja */
[id$='-trigger-calories'][data-state='active'] {
    background: rgba(255, 140, 66, 0.12) !important;
    color: #FF8C42 !important;
}

/* Tab Análisis activo → teal */
[id$='-trigger-nutrition'][data-state='active'] {
    background: rgba(6, 182, 212, 0.12) !important;
    color: #06B6D4 !important;
}

/* Tab Aminoácidos activo → púrpura */
[id$='-trigger-amino'][data-state='active'] {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #8B5CF6 !important;
}

/* Tab Hidratación activo → azul */
[id$='-trigger-hydration'][data-state='active'] {
    background: hsl(var(--secondary) / 0.12) !important;
    color: hsl(var(--secondary)) !important;
}

/* ─── FOOTER: FONDO OSCURO + TEXTOS CORREGIDOS ───────────────────────────────*/
footer {
    background-color: var(--cg-footer-bg) !important;
    color: var(--cg-footer-fg) !important;
    position: relative;
}
/* Línea de separación superior con gradiente verde → azul */
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        hsl(var(--primary) / 0.6) 25%,
        hsl(var(--secondary) / 0.5) 60%,
        transparent 100%
    );
}

/* Logo en footer: mantener el acento verde de "gratis" */
footer > div a[href='/'] > span,
footer .cg-footer-brand {
    color: var(--cg-footer-fg) !important;
}
footer > div a[href='/'] > span > span,
footer > div a[href='/'] .text-primary,
footer .cg-footer-brand-highlight {
    color: hsl(var(--primary)) !important;
}

/* Textos del footer: sobrescribir colores hardcoded */
footer .text-white,
footer .text-white\/80,
footer .text-gray-400,
footer [class*='text-\[#F9FAFB\]'] {
    color: var(--cg-footer-fg) !important;
}
footer .text-gray-400,
footer p,
footer .text-sm {
    color: var(--cg-footer-muted) !important;
    opacity: 1 !important;
}
footer h2, footer h3, footer h4, footer h5 {
    color: var(--cg-footer-fg) !important;
}

/* Links del footer */
footer a:not(.cg-contact-pill):not(.cg-footer-legal-link) {
    color: var(--cg-footer-muted) !important;
    transition: color 0.2s ease;
}
footer a:not(.cg-contact-pill):not(.cg-footer-legal-link):hover {
    color: hsl(var(--primary)) !important;
}

/* Separadores del footer */
footer hr,
footer .border-t,
footer [class*='border-white'] {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ─── ICONOS REDES SOCIALES EN FOOTER ────────────────────────────────────────
   Los iconos de redes sociales usan bg-gray-800 y text-gray-400.
   Se les da color de marca con hover animado.                                  */

footer a[aria-label='Instagram'] {
    background: rgba(225, 48, 108, 0.15) !important;
    border: 1px solid rgba(225, 48, 108, 0.25) !important;
    color: #E1306C !important;
    transition: all 0.3s ease !important;
}
footer a[aria-label='Instagram']:hover {
    background: rgba(225, 48, 108, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important;
    color: #E1306C !important;
}
footer a[aria-label='Instagram'] svg { color: #E1306C !important; }

footer a[aria-label='Twitter'] {
    background: rgba(29, 161, 242, 0.15) !important;
    border: 1px solid rgba(29, 161, 242, 0.25) !important;
    color: #1DA1F2 !important;
    transition: all 0.3s ease !important;
}
footer a[aria-label='Twitter']:hover {
    background: rgba(29, 161, 242, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important;
    color: #1DA1F2 !important;
}
footer a[aria-label='Twitter'] svg { color: #1DA1F2 !important; }

footer a[aria-label='LinkedIn'] {
    background: rgba(10, 102, 194, 0.15) !important;
    border: 1px solid rgba(10, 102, 194, 0.25) !important;
    color: #0A66C2 !important;
    transition: all 0.3s ease !important;
}
footer a[aria-label='LinkedIn']:hover {
    background: rgba(10, 102, 194, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important;
    color: #0A66C2 !important;
}
footer a[aria-label='LinkedIn'] svg { color: #0A66C2 !important; }

/* ─── FOOTER LEGAL: LINKS NAVEGABLES ────────────────────────────────────────
   Los links de Política de Privacidad y Términos de Servicio deben ser
   navegables y apuntar a páginas reales de WordPress.                          */
.cg-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cg-footer-legal-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.cg-footer-legal-link,
.cg-footer-legal-label {
    font-size: 0.8125rem;
    color: var(--cg-footer-muted) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.cg-footer-legal-link:hover {
    color: hsl(var(--primary)) !important;
    text-decoration: underline;
}
.cg-footer-legal-label {
    cursor: default;
    user-select: none;
}
.cg-footer-legal-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    user-select: none;
}

/* ─── CONTACT PILL ───────────────────────────────────────────────────────────*/
.cg-contact-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.75rem; padding: 0.75rem 1rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f9fafb !important; text-decoration: none; font-weight: 700;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.cg-contact-pill:hover {
    transform: translateY(-1px); background: rgba(255, 255, 255, 0.14);
    color: #ffffff !important;
}

/* ─── PÁGINAS LEGALES ────────────────────────────────────────────────────────*/
.cg-legal-page {
    max-width: 52rem; margin: 0 auto; padding: 5rem 1.5rem 4rem;
}
.cg-legal-page .cg-legal-header {
    margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid hsl(var(--border));
}
.cg-legal-page .cg-legal-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    color: hsl(var(--foreground)) !important; margin-bottom: 0.5rem !important;
}
.cg-legal-page .cg-legal-date { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0; }
.cg-legal-page h2 {
    font-size: 1.25rem !important; color: hsl(var(--foreground)) !important;
    margin-top: 2.5rem !important; margin-bottom: 0.75rem !important;
}
.cg-legal-page h3 {
    font-size: 1rem !important; font-weight: 600;
    color: hsl(var(--foreground)) !important; margin-top: 1.5rem !important; margin-bottom: 0.5rem !important;
}
.cg-legal-page p { color: hsl(var(--muted-foreground)) !important; line-height: 1.75; margin-bottom: 1rem; }
.cg-legal-page ul, .cg-legal-page ol { color: hsl(var(--muted-foreground)) !important; padding-left: 1.5rem; margin-bottom: 1rem; }
.cg-legal-page li { line-height: 1.75; margin-bottom: 0.375rem; color: hsl(var(--muted-foreground)) !important; }
.cg-legal-page a { color: hsl(var(--primary)) !important; text-decoration: underline; text-underline-offset: 3px; }
.cg-legal-page a:hover { color: hsl(var(--primary) / 0.8) !important; }
.cg-legal-page .cg-legal-highlight {
    background: hsl(var(--muted)); border-left: 3px solid hsl(var(--primary));
    padding: 1rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.5rem 0;
}
.cg-legal-page .cg-legal-highlight p { margin: 0; font-size: 0.9375rem; }

/* ─── SECCIÓN CTA ────────────────────────────────────────────────────────────*/
[data-cg-cta='true'] { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))) !important; }

/* ─── NEWSLETTER ─────────────────────────────────────────────────────────────*/
[data-cg-newsletter='true'] input[type='email'] {
    min-height: 3.25rem; border-width: 1px !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
[data-cg-newsletter='true'] button[type='submit'] {
    min-height: 3.25rem; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

/* ─── OPTIMIZACIÓN DE RENDIMIENTO ────────────────────────────────────────────*/
section.cg-section:not([data-cg-hero='true']) {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

/* ─── FOCUS VISIBLE ──────────────────────────────────────────────────────────*/
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
    outline: none !important; box-shadow: 0 0 0 4px hsl(var(--primary) / 0.18) !important;
}

img { content-visibility: auto; }

/* ─── FOOTER: LINKS LEGALES NAVEGABLES ──────────────────────────────────────
   Se eliminó la regla pointer-events:none para que los links legales sean
   navegables. Los links apuntan ahora a páginas reales de WordPress.           */
footer a[href='#'] { pointer-events: none; }
.cg-placeholder-link { pointer-events: none; opacity: 0.45; }

/* Links legales del footer: siempre navegables */
footer a[href='/politica-de-privacidad'],
footer a[href='/terminos-de-servicio'] {
    pointer-events: auto !important;
    color: var(--cg-footer-muted) !important;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.8125rem;
}
footer a[href='/politica-de-privacidad']:hover,
footer a[href='/terminos-de-servicio']:hover {
    color: hsl(var(--primary)) !important;
    text-decoration: underline;
}

/* ─── CALCULADORAS PREMIUM FUSION: ESTILO CUIDATEGRATIS ──────────────────────*/
:root {
    --cg-premium-dark: #0d1117;
    --cg-premium-dark-2: #131920;
    --cg-premium-card: #162030;
    --cg-premium-card-2: #1c2a3a;
    --cg-premium-text: #e8f4ff;
    --cg-premium-text-muted: #8ba5c4;
    --cg-premium-text-soft: #5a7a9a;
    --cg-premium-line: rgba(59, 130, 246, 0.16);
    --cg-premium-line-strong: rgba(29, 222, 138, 0.24);
    --cg-premium-shadow: 0 18px 45px rgba(2, 6, 23, 0.18);
    --cg-premium-glow: 0 0 0 1px rgba(29, 222, 138, 0.08), 0 18px 36px rgba(29, 222, 138, 0.12);
}

.cg-health-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid hsl(var(--primary) / 0.2);
    background: linear-gradient(135deg, rgba(29, 222, 138, 0.08), rgba(59, 130, 246, 0.08));
    color: hsl(var(--foreground));
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.cg-health-disclaimer::before {
    content: '✦';
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.16);
    color: hsl(var(--primary));
    font-weight: 800;
}

#root [data-cg-calculator] {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem !important;
    background:
        radial-gradient(circle at top right, rgba(29, 222, 138, 0.09), transparent 32%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, var(--cg-premium-card-2), var(--cg-premium-card)) !important;
    border: 1px solid var(--cg-premium-line) !important;
    box-shadow: var(--cg-premium-shadow) !important;
}

#root [data-cg-calculator]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #1dde8a, #3b82f6, #06b6d4);
    opacity: 0.92;
}

#root [data-cg-calculator] > * {
    position: relative;
    z-index: 1;
}

#root [data-cg-calculator] h3,
#root [data-cg-calculator] h4,
#root [data-cg-calculator] label,
#root [data-cg-calculator] strong {
    color: var(--cg-premium-text) !important;
}

#root [data-cg-calculator] p,
#root [data-cg-calculator] li,
#root [data-cg-calculator] span:not(.step-number):not(.cg-empty-control-label) {
    color: var(--cg-premium-text-muted);
}

#root [data-cg-calculator] .border-border,
#root [data-cg-calculator] [class*='border-border'] {
    border-color: var(--cg-premium-line) !important;
}

#root [data-cg-calculator] .calculator-step {
    padding: 1.1rem 1.15rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#root [data-cg-calculator] .step-number {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#root [data-cg-calculator] .premium-input,
#root [data-cg-calculator] button[role='combobox'],
#root [data-cg-calculator] .weight-selector-wrapper button,
#root [data-cg-calculator] [data-radix-popper-content-wrapper] + * {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--cg-premium-text) !important;
}

#root [data-cg-calculator] .premium-input::placeholder,
#root [data-cg-calculator] button[role='combobox'] span,
#root [data-cg-calculator] [data-placeholder] {
    color: var(--cg-premium-text-soft) !important;
}

#root [data-cg-calculator] .premium-input:hover,
#root [data-cg-calculator] button[role='combobox']:hover,
#root [data-cg-calculator] .weight-selector-wrapper button:hover {
    border-color: rgba(29, 222, 138, 0.35) !important;
    background: rgba(255, 255, 255, 0.065) !important;
}

#root [data-cg-calculator] .premium-input:focus,
#root [data-cg-calculator] button[role='combobox']:focus,
#root [data-cg-calculator] button[role='combobox']:focus-visible,
#root [data-cg-calculator] .weight-selector-wrapper button:focus-visible {
    border-color: rgba(29, 222, 138, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(29, 222, 138, 0.12) !important;
}

#root [data-cg-calculator] .calculator-preview-card,
#root [data-cg-calculator] .summary-card,
#root [data-cg-calculator] .recommendation-card,
#root [data-cg-calculator] .weight-selector-wrapper {
    background: rgba(10, 14, 22, 0.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.18) !important;
}

#root [data-cg-calculator] .summary-card,
#root [data-cg-calculator] .recommendation-card {
    border-radius: 1rem;
    padding: 1.15rem 1.2rem;
}

#root [data-cg-calculator] .calculator-preview-card,
#root [data-cg-calculator] .weight-selector-wrapper {
    border-radius: 1rem !important;
}

#root [data-cg-calculator='bmi'] button[type='button']:not([role='tab']):not([role='switch']),
#root [data-cg-calculator='calories'] .premium-btn-primary,
#root [data-cg-calculator='hydration'] .premium-btn-primary,
#root [data-cg-calculator='nutrition'] .premium-btn-primary {
    background: linear-gradient(135deg, #1dde8a, #3b82f6) !important;
    color: #0d1117 !important;
    box-shadow: 0 12px 30px rgba(29, 222, 138, 0.28) !important;
}

#root [data-cg-calculator='amino'] .premium-btn-primary,
#root [data-cg-calculator='amino'] .bg-accent-purple,
#root [data-cg-calculator='amino'] .hover\:bg-accent-purple\/90:hover {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6) !important;
    color: #f8fbff !important;
    box-shadow: 0 14px 32px rgba(139, 92, 246, 0.28) !important;
}

#root [data-cg-calculator='amino'] .text-accent-purple,
#root [data-cg-calculator='amino'] .text-accent-purple * {
    color: #c4b5fd !important;
}

#root [data-cg-calculator='amino'] [data-cg-step='3'],
#root [data-cg-calculator='amino'] [data-cg-step='3'] [data-cg-amino-source='true'] {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(255, 255, 255, 0.02)) !important;
    border-color: rgba(139, 92, 246, 0.18) !important;
}

#root [data-cg-calculator='amino'] [data-cg-amino-source='true'] {
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#root [data-cg-calculator='amino'] [data-cg-amino-source='true'] p,
#root [data-cg-calculator='amino'] [data-cg-amino-source='true'] span,
#root [data-cg-calculator='amino'] [data-cg-step='3'] label {
    color: var(--cg-premium-text) !important;
}

#root [data-cg-calculator='amino'] [aria-label='Eliminar fuente'] {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}

#root [data-cg-calculator='amino'] [aria-label='Eliminar fuente']:hover {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fecaca !important;
}

#root [data-cg-calculator] .cg-empty-control-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.25rem;
    color: var(--cg-premium-text) !important;
    font-weight: 600;
}

#root [data-cg-calculator] [role='tablist'].inline-flex.whitespace-nowrap {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 30px rgba(2, 6, 23, 0.16) !important;
}

#root [data-cg-calculator] [role='tab'][data-state='active'] {
    background: rgba(255, 255, 255, 0.08) !important;
}

#root [data-cg-calculator] .recharts-default-tooltip {
    border-radius: 1rem !important;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────*/
@media (max-width: 1024px) {
    [data-cg-hero='true'] h1 { max-width: 13ch; }
    [data-cg-floating-badge='true'] { left: 1rem !important; bottom: 1rem !important; }
}

@media (max-width: 767px) {
    #root > div > header { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }
    [data-cg-hero='true'] { padding-top: 7rem !important; }
    [data-cg-hero='true'] h1 { max-width: none; font-size: clamp(2.2rem, 10vw, 3.4rem) !important; }
    [data-cg-hero-media='true'] img { height: 360px !important; }
    [data-cg-floating-badge='true'] { position: static !important; margin-top: 1rem; width: 100%; justify-content: center; }
    #root > div > main > main > section + section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .cg-footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .cg-footer-legal-links { gap: 0.75rem; }
    .premium-input { min-height: 2.75rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
}