/* -----------------------------
   style.css (global)
   Contiene: fuentes, variables, keyframes, reset y utilidades globales
   ----------------------------- */

/* Tipografía Adelle */
@font-face {
    font-family: 'Adelle';
    src: url('../Adelle Font/Adelle Reg.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Italic.otf') format('opentype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle light.otf') format('opentype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Light Italic.otf') format('opentype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Semi bold.otf') format('opentype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Semi Bold Italic.otf') format('opentype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Bold Italic.otf') format('opentype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Extra Bold.otf') format('opentype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Extra Bold Italic.otf') format('opentype'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Heavy.otf') format('opentype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Adelle'; src: url('../Adelle Font/Adelle Heavy Italic.otf') format('opentype'); font-weight: 900; font-style: italic; }

:root {
    --primary-red: #70191C;
    --secondary-red: #871f1b;
    --accent-gold: #ac8a00;
    --dark-gray: #2b2b2b;
    --medium-gray: #9d9d9c;
    --white: #fff;
    --black: #000000;
}

/* ==================== KEYFRAMES ==================== */
@keyframes fadeInBody { to { opacity: 1; } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(40px) } to { opacity:1; transform:none } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-40px) } to { opacity:1; transform:none } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(40px) } to { opacity:1; transform:none } }
@keyframes scaleIn { from { opacity:0; transform:scale(.8) } to { opacity:1; transform:scale(1) } }
@keyframes pulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
@keyframes bounceIn { 0%{ opacity:0; transform:scale(.3) translateY(-50px) } 50%{ opacity:1; transform:scale(1.05) } 70%{ transform:scale(.95) } 100%{ transform:scale(1) } }
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes shine { 0%{ background-position:-200% center } 100%{ background-position:200% center } }
@keyframes shimmer { 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-20px,-20px) } }

/* ==================== RESET Y BASE ==================== */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{ font-family: 'Adelle', serif; color:var(--dark-gray); line-height:1.6; overflow-x:hidden; opacity:0; animation:fadeInBody .45s ease-in forwards }
body.loaded{ opacity:1 }

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

/* Global utilities */
.animate-element{ opacity:0; transform:translateY(30px); transition:opacity .6s, transform .6s }
.animate-element.animate-in{ opacity:1; transform:none }

/* Images fluid */
img{ max-width:100%; height:auto; display:block; transition: transform .3s ease, filter .3s ease }
img:hover{ transform:scale(1.02) }
img.lazy{ opacity:0; transition:opacity .3s }
img.lazy.loaded{ opacity:1 }

/* Small helpers */
.wrap-word{ overflow-wrap:anywhere; word-break:break-word }


/* Keep generic components here (buttons used site-wide) */
.btn-examen{ position:relative; overflow:hidden; transition:all .3s }
.btn-examen::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition:left .5s }
.btn-examen:hover::before{ left:100% }
.btn-examen:hover{ transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.12) }

/* ==================== RESPONSIVE UTILITIES (agregar al final de style.css) ==================== */

/* Prevenir scroll horizontal en mobile */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

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

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

/* Asegurar que las imágenes sean responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Text utilities para mobile */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 1rem; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.35rem; }
    h4 { font-size: 1.15rem; }
}

/* Prevent text overflow */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Smooth scrolling en todos los dispositivos */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Touch targets mínimos para móviles (44x44px recomendado) */
@media (max-width: 768px) {
    a, button, input, select, textarea {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}