/**
Theme Name: vivegreenchild
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vivegreenchild
Template: astra
*/
/* =====================================
   VIVEGREEN CUSTOM CSS - ALTA CONVERSIÓN
   Paleta científicamente probada
   ===================================== */

/* =====================================
   VIVEGREEN CUSTOM CSS - ALTA CONVERSIÓN
   Paleta científicamente probada
   ===================================== */

/* ===== VARIABLES GLOBALES - NUEVA PALETA ===== */
:root {
    --background: oklch(0.9711 0.0074 80.7211);
    --foreground: oklch(0.3000 0.0358 30.2042);
    --card: oklch(0.9711 0.0074 80.7211);
    --card-foreground: oklch(0.3000 0.0358 30.2042);
    --popover: oklch(0.9711 0.0074 80.7211);
    --popover-foreground: oklch(0.3000 0.0358 30.2042);
    --primary: oklch(0.5234 0.1347 144.1672);
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: oklch(0.9571 0.0210 147.6360);
    --secondary-foreground: oklch(0.4254 0.1159 144.3078);
    --muted: oklch(0.9370 0.0142 74.4218);
    --muted-foreground: oklch(0.4495 0.0486 39.2110);
    --accent: oklch(0.8952 0.0504 146.0366);
    --accent-foreground: oklch(0.4254 0.1159 144.3078);
    --destructive: oklch(0.5386 0.1937 26.7249);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: oklch(0.8805 0.0208 74.6428);
    --input: oklch(0.8805 0.0208 74.6428);
    --ring: oklch(0.5234 0.1347 144.1672);
    --chart-1: oklch(0.6731 0.1624 144.2083);
    --chart-2: oklch(0.5752 0.1446 144.1813);
    --chart-3: oklch(0.5234 0.1347 144.1672);
    --chart-4: oklch(0.4254 0.1159 144.3078);
    --chart-5: oklch(0.2157 0.0453 145.7256);
    --sidebar: oklch(0.9370 0.0142 74.4218);
    --sidebar-foreground: oklch(0.3000 0.0358 30.2042);
    --sidebar-primary: oklch(0.5234 0.1347 144.1672);
    --sidebar-primary-foreground: oklch(1.0000 0 0);
    --sidebar-accent: oklch(0.8952 0.0504 146.0366);
    --sidebar-accent-foreground: oklch(0.4254 0.1159 144.3078);
    --sidebar-border: oklch(0.8805 0.0208 74.6428);
    --sidebar-ring: oklch(0.5234 0.1347 144.1672);
    --font-sans: Montserrat, sans-serif;
    --font-serif: Merriweather, serif;
    --font-mono: Source Code Pro, monospace;
    --radius: 0.5rem;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

.dark {
    --background: oklch(0.2683 0.0279 150.7681);
    --foreground: oklch(0.9423 0.0097 72.6595);
    --card: oklch(0.3327 0.0271 146.9867);
    --card-foreground: oklch(0.9423 0.0097 72.6595);
    --popover: oklch(0.3327 0.0271 146.9867);
    --popover-foreground: oklch(0.9423 0.0097 72.6595);
    --primary: oklch(0.6731 0.1624 144.2083);
    --primary-foreground: oklch(0.2157 0.0453 145.7256);
    --secondary: oklch(0.3942 0.0265 142.9926);
    --secondary-foreground: oklch(0.8970 0.0166 142.5518);
    --muted: oklch(0.3327 0.0271 146.9867);
    --muted-foreground: oklch(0.8579 0.0174 76.0955);
    --accent: oklch(0.5752 0.1446 144.1813);
    --accent-foreground: oklch(0.9423 0.0097 72.6595);
    --destructive: oklch(0.5386 0.1937 26.7249);
    --destructive-foreground: oklch(0.9423 0.0097 72.6595);
    --border: oklch(0.3942 0.0265 142.9926);
    --input: oklch(0.3942 0.0265 142.9926);
    --ring: oklch(0.6731 0.1624 144.2083);
    --chart-1: oklch(0.7660 0.1179 145.2950);
    --chart-2: oklch(0.7185 0.1417 144.8887);
    --chart-3: oklch(0.6731 0.1624 144.2083);
    --chart-4: oklch(0.6291 0.1543 144.2031);
    --chart-5: oklch(0.5752 0.1446 144.1813);
    --sidebar: oklch(0.2683 0.0279 150.7681);
    --sidebar-foreground: oklch(0.9423 0.0097 72.6595);
    --sidebar-primary: oklch(0.6731 0.1624 144.2083);
    --sidebar-primary-foreground: oklch(0.2157 0.0453 145.7256);
    --sidebar-accent: oklch(0.5752 0.1446 144.1813);
    --sidebar-accent-foreground: oklch(0.9423 0.0097 72.6595);
    --sidebar-border: oklch(0.3942 0.0265 142.9926);
    --sidebar-ring: oklch(0.6731 0.1624 144.2083);
    --font-sans: Montserrat, sans-serif;
    --font-serif: Merriweather, serif;
    --font-mono: Source Code Pro, monospace;
    --radius: 0.5rem;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --font-serif: var(--font-serif);

    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);

    --shadow-2xs: var(--shadow-2xs);
    --shadow-xs: var(--shadow-xs);
    --shadow-sm: var(--shadow-sm);
    --shadow: var(--shadow);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --shadow-xl: var(--shadow-xl);
    --shadow-2xl: var(--shadow-2xl);
}

/* Compatibilidad con variables anteriores */
:root {
    --color-primary-old: var(--primary);        /* Verde primario moderno */
    --color-secondary-old: var(--secondary);    /* Verde secondary */  
    --color-accent-old: var(--destructive);     /* Rojo urgencia */
    --color-text: var(--foreground);            /* Texto principal */
    --color-white: var(--background);           /* Fondo claro */
    --color-light-bg: var(--muted);             /* Fondo suave */
    --font-primary: var(--font-sans);
}

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

body {
    font-family: var(--font-primary);
    color: var(--foreground);
    line-height: 1.6;
    background: var(--background);
}

/* ===== HEADER PERSONALIZADO ===== */
.site-header {
    background: var(--background);
    border-bottom: 3px solid var(--primary);
    box-shadow: var(--shadow-md);
}

/* Barra superior promocional */
.top-bar {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 8px 0;
    font-size: 0.9rem;
    text-align: center;
}

/* Logo personalizado */
.site-branding .site-title {
    color: var(--primary) !important;
    font-weight: bold;
    font-size: 2.2rem;
}

.site-branding .site-title:hover {
    color: var(--chart-1) !important;
}

/* Navegación principal */
.main-header-menu a {
    color: var(--primary) !important;
    font-weight: 600;
    transition: color 0.3s ease;
}

.main-header-menu a:hover {
    color: var(--chart-1) !important;
}

/* ===== BOTONES CTA - ALTA CONVERSIÓN ===== */
.cta-button, 
.ast-button,
.button,
.wp-block-button__link,
input[type="submit"],
.woocommerce button.button,
.woocommerce .single_add_to_cart_button {
    background: var(--destructive) !important;
    color: var(--destructive-foreground) !important;
    padding: 16px 35px !important;
    font-size: 1.1rem !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-lg) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    font-family: var(--font-sans) !important;
}

.cta-button:hover,
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background: oklch(0.4386 0.1937 26.7249) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-xl) !important;
}

/* ===== PRECIOS - PSICOLOGÍA ROJA ===== */
.woocommerce .price,
.woocommerce .amount,
.price-display {
    color: var(--destructive) !important;
    font-size: 1.8rem !important;
    font-weight: bold !important;
    font-family: var(--font-sans) !important;
}

.woocommerce .price del {
    color: #999 !important;
    font-size: 1.4rem !important;
}

/* ===== CATEGORÍAS DE PRODUCTOS ===== */
.product-categories .category-item {
    background: linear-gradient(135deg, var(--primary), var(--chart-1));
    color: var(--primary-foreground);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.3s ease;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.product-categories .category-item:hover {
    background: linear-gradient(135deg, var(--chart-1), var(--primary));
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--destructive);
}

/* ===== PRODUCTOS DESTACADOS ===== */
.woocommerce ul.products li.product {
    background: var(--card);
    color: var(--card-foreground);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
    border: 1px solid var(--border);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

/* ===== TESTIMONIOS ===== */
.testimonials {
    background: var(--muted);
    padding: 4rem 0;
}

.testimonial-item {
    background: var(--card);
    color: var(--card-foreground);
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.testimonial-stars {
    color: #ffd700;
    font-size: 1.2rem;
    margin: 1rem 0;
}

/* ===== SECCIÓN DISTRIBUIDOR ===== */
.distributor-section {
    background: linear-gradient(135deg, var(--primary), var(--chart-1));
    color: var(--primary-foreground);
    padding: 4rem 0;
    text-align: center;
}

.distributor-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.benefit-item {
    background: var(--accent);
    color: var(--accent-foreground);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.benefit-item h4 {
    color: var(--accent-foreground);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
}

/* ===== FORMULARIOS ===== */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
    border: 2px solid var(--border);
    background: var(--input);
    color: var(--foreground);
    border-radius: var(--radius);
    padding: 12px 15px;
    font-size: 1rem;
    font-family: var(--font-sans);
    transition: border-color 0.3s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: var(--ring);
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
}

/* ===== TÍTULOS Y TEXTOS ===== */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
    font-weight: bold;
    font-family: var(--font-sans);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 3rem;
    font-weight: bold;
    font-family: var(--font-sans);
}

/* ===== HERO SECTION ===== */
.hero-section {
    background: linear-gradient(135deg, var(--background) 0%, var(--muted) 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
    color: var(--primary);
    padding: 2rem 0;
}

.hero-content {
    text-align: center;
    background: var(--card);
    color: var(--card-foreground);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}

.hero-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--primary);
    font-family: var(--font-sans);
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: var(--chart-1);
    font-family: var(--font-sans);
}

/* ===== WOOCOMMERCE PERSONALIZACIONES ===== */
.woocommerce .star-rating span {
    color: #ffd700;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    border-top-color: var(--color-primary);
}

.woocommerce .woocommerce-error {
    border-top-color: var(--color-accent);
}

/* ===== FOOTER ===== */
.site-footer {
    background: var(--card);
    color: var(--card-foreground);
    padding: 3rem 0 1rem;
    border-top: 1px solid var(--border);
}

.footer-section h3 {
    color: var(--destructive);
    margin-bottom: 1rem;
    font-family: var(--font-sans);
}

.footer-section a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--destructive);
}

/* ===== ESTILOS ESPECÍFICOS PARA FRONT-PAGE ===== */
.section-padding {
    padding: 4rem 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tratamientos */
.tratamientos {
    background: var(--muted);
}

.tratamientos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.tratamiento-card {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
    border: 1px solid var(--border);
}

.tratamiento-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

.tratamiento-card .price {
    font-size: 2rem;
    color: var(--destructive);
    font-weight: bold;
    margin: 1rem 0;
}

.product-image img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

/* Categorías */
.categorias {
    background: var(--background);
}

.categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.categoria-card {
    background: linear-gradient(135deg, var(--primary), var(--chart-1));
    color: var(--primary-foreground);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-shadow: var(--shadow-md);
}

.categoria-card:hover {
    background: linear-gradient(135deg, var(--chart-1), var(--primary));
    border: 2px solid var(--destructive);
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.categoria-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.categoria-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.categoria-card h3 {
    color: var(--primary-foreground) !important;
    font-weight: bold;
}

/* Productos */
.productos-destacados {
    background: var(--muted);
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.producto-card {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 1px solid var(--border);
    transition: transform 0.3s ease;
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2xl);
}

.producto-card .price {
    font-size: 1.8rem;
    color: var(--destructive);
    font-weight: bold;
    margin: 1rem 0;
}

.producto-card h3 {
    color: var(--primary) !important;
    margin-bottom: 1rem;
}

.stars {
    color: #ffd700;
    margin: 0.5rem 0;
    font-size: 1.2rem;
}

/* Testimonios */
.testimonios {
    background: var(--background);
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonio-card {
    background: var(--card);
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 1px solid var(--border);
}

.testimonio-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--muted);
    margin: 0 auto 1rem;
    border: 3px solid var(--primary);
}

/* Distribuidor */
.distribuidor {
    background: linear-gradient(135deg, var(--primary), var(--chart-1));
    color: var(--primary-foreground);
    text-align: center;
}

.distribuidor h2 {
    color: var(--primary-foreground) !important;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.beneficio-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.beneficio-item h4 {
    color: var(--primary-foreground) !important;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .cta-button,
    .ast-button,
    .woocommerce .single_add_to_cart_button {
        padding: 14px 25px !important;
        font-size: 1rem !important;
    }
    
    .tratamientos-grid,
    .categorias-grid {
        grid-template-columns: 1fr;
    }
    
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .categorias-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== ANIMACIONES ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    animation: fadeInUp 0.8s ease-out;
}

/* ===== UTILIDADES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* ===== ACCESIBILIDAD ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible para navegación por teclado */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}