/*
Theme Name: Dr. Randall Herrera
Theme URI: https://drrandallherrera.com
Author: Abrochalo Estudio Digital
Author URI: https://abrochalo.com
Description: Tema personalizado para el sitio web del Dr. Randall Herrera - Medicina Estética Avanzada en León, Guanajuato. Diseño elegante, mobile-first, optimizado para conversión de pacientes.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
License URI: https://drrandallherrera.com
Text Domain: drrandall
Tags: medicina-estetica, one-column, custom-logo, featured-images

Dr. Randall Herrera - Medicina Estética Avanzada
Copyright 2026 Abrochalo Estudio Digital
*/

/* Import component styles */
@import url('css/variables.css?v=7');
@import url('css/components.css?v=29');
@import url('css/responsive.css?v=1774');

/* === RESET & BASE === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-gold-light);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
    margin-bottom: 1em;
}

ul, ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

/* === LAYOUT === */
html, body {
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section {
    padding: var(--space-xl) 0;
}

.section--alt {
    background-color: var(--color-beige);
}

.section--dark {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

.section__title {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.section__subtitle {
    text-align: center;
    font-size: var(--fs-lg);
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto var(--space-lg);
}

/* === GRID === */
.grid {
    display: grid;
    gap: var(--space-md);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

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