/* ==========================================================================
   CREATIVIDAD & CIENCIA | REVISTA DIGITAL
   CSS PRINCIPAL
   Compatible con el HTML de la revista
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES Y PALETA DE COLORES
   ========================================================================== */

:root {
    /* Colores principales */
    --purple-dark: #4a148c;
    --purple-primary: #6a1b9a;
    --purple-medium: #8e24aa;
    --purple-light: #ab47bc;
    --purple-pastel: #ce93d8;
    --purple-soft: #e1bee7;
    --purple-extralight: #f3e5f5;

    /* Fondos */
    --bg-principal: #faf5ff;
    --bg-card: #ffffff;
    --bg-dark: #1e0f33;

    /* Textos */
    --texto-oscuro: #2c1a3e;
    --texto-suave: #5a3d6b;
    --texto-claro: #7a5a8b;
    --blanco: #ffffff;

    --bg-gradient: linear-gradient(135deg, #1e0533 0%, #3b0764 50%, #111827 100%);
  --card-gradient: linear-gradient(145deg, rgba(88, 28, 135, 0.85), rgba(46, 16, 101, 0.95));
  --card-border: rgba(192, 132, 252, 0.25);
  
  --primary-gradient: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  --primary-hover: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
  
  --input-bg: rgba(24, 9, 43, 0.6);
  --input-border: rgba(168, 85, 247, 0.3);
  --input-focus-border: #c084fc;
  --input-focus-glow: rgba(192, 132, 252, 0.35);
  
  --text-main: #f3e8ff;
  --text-muted: #d8b4fe;
  --text-placeholder: #a855f7;
  
  --error-color: #f87171;
  --error-bg: rgba(127, 29, 29, 0.5);
  --success-color: #4ade80;
  --success-bg: rgba(20, 83, 45, 0.5);

    /* Degradados */
    --gradient-hero:
        linear-gradient(135deg,
            #e1bee7 0%,
            #ce93d8 50%,
            #ab47bc 100%);

    --gradient-header:
        linear-gradient(135deg,
            #4a148c 0%,
            #6a1b9a 50%,
            #8e24aa 100%);

    --gradient-button:
        linear-gradient(135deg,
            #8e24aa 0%,
            #ab47bc 100%);

    /* Tipografías */
    --fuente-titulos:
        Georgia,
        "Times New Roman",
        serif;

    --fuente-cuerpo:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    /* Sombras */
    --shadow-soft:
        0 4px 20px rgba(106, 27, 154, 0.08);

    --shadow-medium:
        0 8px 30px rgba(106, 27, 154, 0.15);

    --shadow-strong:
        0 12px 40px rgba(106, 27, 154, 0.22);
}


/* ==========================================================================
   2. RESET GENERAL
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--bg-principal);
    color: var(--texto-oscuro);
    font-family: var(--fuente-cuerpo);
    line-height: 1.7;
    overflow-x: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit;
}


/* ==========================================================================
   3. HEADER
   ========================================================================== */

header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        linear-gradient(145deg,
            #2b1a4a 0%,
            #1e0f33 100%);

    border-bottom: 2px solid rgba(160, 80, 255, 0.2);
    box-shadow: 0 4px 30px rgba(90, 30, 150, 0.45);
}

.nav-container {
    width: 100%;
    max-width: 1400px;
    height: 65px;
    margin: 0 auto;
    padding: 0 2rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ==========================================================================
   4. LOGO
   ========================================================================== */

.logo {
    display: inline-flex;
    align-items: center;

    color: #d4b0ff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;

    background:
        linear-gradient(135deg,
            #c084fc,
            #a855f7);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    transition: transform 0.3s ease;
}

.logo span {
    font-weight: 800;

    background:
        linear-gradient(135deg,
            #f0abfc,
            #d946ef);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo:hover {
    transform: scale(1.04);
}


/* ==========================================================================
   5. MENÚ DE ESCRITORIO
   ========================================================================== */

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    list-style: none;
}

.nav-link li a {
    position: relative;

    display: block;

    padding: 0.6rem 1rem;

    color: #d9c9f0;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    white-space: nowrap;

    border-radius: 40px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.nav-link li a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    background:
        linear-gradient(90deg,
            #c084fc,
            #a855f7,
            #d946ef);

    border-radius: 5px;

    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-link li a:hover {
    color: var(--blanco);

    background: rgba(168, 85, 247, 0.2);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(90, 30, 150, 0.3);
}

.nav-link li a:hover::after {
    width: 70%;
}


/* ==========================================================================
   6. BOTÓN HAMBURGUESA
   ========================================================================== */

.menu-btn {
    display: none;

    width: 34px;
    height: 28px;

    padding: 0;

    flex-direction: column;
    justify-content: space-between;

    background: transparent;
    border: none;

    cursor: pointer;

    z-index: 1100;
}

.menu-btn .bar {
    display: block;

    width: 100%;
    height: 3px;

    background: #d4b0ff;

    border-radius: 10px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background 0.3s ease;
}


/* Animación de hamburguesa a X */

.menu-btn.active .bar:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
    background: #f0abfc;
}

.menu-btn.active .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-btn.active .bar:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
    background: #f0abfc;
}


/* ==========================================================================
   7. OVERLAY
   ========================================================================== */

.overlay {
    display: none;
}


/* ==========================================================================
   8. HERO / PORTADA
   ========================================================================== */

.hero {
    position: relative;

    min-height: 65vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4rem 2rem;

    text-align: center;

    background: var(--gradient-hero);

    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;

    top: -50%;
    right: -20%;

    width: 60%;
    height: 200%;

    background: rgba(255, 255, 255, 0.08);

    transform: rotate(25deg);

    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 850px;
}

.hero .category {
    display: inline-block;

    margin-bottom: 1rem;
    padding: 0.4rem 1.5rem;

    color: var(--blanco);

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;

    background: rgba(74, 20, 140, 0.3);

    border-radius: 50px;
}

.hero h1 {
    margin: 1.2rem 0;

    color: var(--blanco);

    font-family: var(--fuente-titulos);
    font-size: 3.2rem;
    line-height: 1.2;

    text-shadow:
        0 2px 20px rgba(74, 20, 140, 0.35);
}

.hero p {
    max-width: 700px;

    margin: 0 auto 2.5rem;

    color: rgba(255, 255, 255, 0.92);

    font-size: 1.2rem;
}


/* ==========================================================================
   9. BOTÓN PRINCIPAL
   ========================================================================== */

.btn-main {
    display: inline-block;

    padding: 0.9rem 2.8rem;

    color: var(--purple-primary);

    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;

    background: var(--blanco);

    border: 2px solid transparent;
    border-radius: 50px;

    box-shadow: var(--shadow-medium);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-main:hover {
    background: var(--purple-extralight);

    transform: translateY(-3px);

    box-shadow: var(--shadow-strong);
}


/* ==========================================================================
   10. CONTENEDOR PRINCIPAL
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1100px;

    margin: 3rem auto;
    padding: 0 1.5rem;
}


/* ==========================================================================
   11. TARJETA PRINCIPAL
   ========================================================================== */

.main-card {
    padding: 3rem;

    background: var(--bg-card);

    border-left: 8px solid var(--purple-pastel);
    border-radius: 20px;

    box-shadow: var(--shadow-soft);

    transition: box-shadow 0.3s ease;
}

.main-card:hover {
    box-shadow: var(--shadow-medium);
}

.card-content {
    width: 100%;
}


/* ==========================================================================
   12. BLOQUES DE AUTORES
   ========================================================================== */

.author-block {
    padding-bottom: 2rem;
    margin-bottom: 2rem;

    border-bottom: 1px solid var(--purple-soft);
}

.author-block:last-child {
    margin-bottom: 0;
    border-bottom: none;
}


/* ==========================================================================
   13. TÍTULOS Y TEXTO
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--fuente-titulos);
    color: var(--purple-dark);
}

h2 {
    position: relative;

    display: inline-block;

    margin-bottom: 1.5rem;

    font-size: 2.2rem;
}

h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -6px;

    width: 60px;
    height: 3px;

    background: var(--gradient-header);

    border-radius: 3px;
}

h3 {
    margin: 2rem 0 1rem;

    color: var(--purple-primary);
    font-size: 1.6rem;
}

h4 {
    margin: 1.5rem 0 0.8rem;

    color: var(--purple-medium);
    font-size: 1.2rem;
}

h5 {
    margin: 1rem 0 0.5rem;

    color: var(--purple-primary);
    font-size: 1.05rem;
}

p {
    margin-bottom: 1.2rem;

    color: var(--texto-suave);
    font-size: 1.05rem;
}

strong {
    color: var(--purple-dark);
}


/* ==========================================================================
   14. CITAS
   ========================================================================== */

blockquote {
    position: relative;

    margin: 2rem 0;
    padding: 1.5rem 2rem;

    color: var(--purple-dark);

    font-family: var(--fuente-titulos);
    font-size: 1.3rem;
    font-style: italic;

    background: var(--purple-extralight);

    border-left: 5px solid var(--purple-pastel);
    border-radius: 0 12px 12px 0;
}

blockquote::before {
    content: '"';

    position: absolute;
    top: -8px;
    left: 12px;

    color: var(--purple-pastel);

    font-size: 3rem;

    opacity: 0.4;
}

.quote-caption {
    margin-top: 1rem;

    color: var(--texto-claro);

    font-family: var(--fuente-titulos);
    font-style: italic;
}


/* ==========================================================================
   15. TEXTOS DESTACADOS
   ========================================================================== */

.highlight {
    padding: 1rem 1.2rem;

    color: var(--purple-dark);

    font-weight: 600;

    background: var(--purple-extralight);

    border-left: 4px solid var(--purple-primary);
    border-radius: 0 10px 10px 0;
}


/* ==========================================================================
   16. LISTAS
   ========================================================================== */

ul,
ol {
    margin: 1rem 0 1.5rem 1.8rem;

    color: var(--texto-suave);
}

ul li,
ol li {
    margin-bottom: 0.6rem;

    line-height: 1.6;
}

ul li::marker {
    color: var(--purple-pastel);
}

ol li::marker {
    color: var(--purple-primary);
    font-weight: bold;
}


/* ==========================================================================
   17. IMÁGENES DE AUTORES
   ========================================================================== */

.foto {
    margin: 1.5rem 0;

    text-align: center;
}

.foto img {
    width: 100%;
    max-width: 350px;

    margin: 0 auto;

    border: 4px solid var(--purple-extralight);
    border-radius: 16px;

    box-shadow: var(--shadow-medium);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.foto img:hover {
    transform: scale(1.02);

    box-shadow: var(--shadow-strong);
}

.foto1 {
    margin: 1.5rem 0;
    text-align: center;
}

.foto1 img {
    width: 100%;
    max-width: 250px;

    margin: 0 auto;

    border: 4px solid var(--purple-extralight);
    border-radius: 16px;

    box-shadow: var(--shadow-medium);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    e;
}

.foto1 img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-strong);
}

/* ==========================================================================
   18. TABLA
   ========================================================================== */

.table-container {
    width: 100%;

    margin: 2rem 0;
    padding: 1.5rem;

    overflow-x: auto;

    background: var(--bg-card);

    border-radius: 16px;

    box-shadow: var(--shadow-soft);
}

table {
    width: 100%;
    min-width: 600px;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid var(--purple-soft);
    border-radius: 12px;
}

thead {
    background: var(--gradient-header);
}

th {
    padding: 16px 20px;

    color: var(--blanco);

    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: left;
    text-transform: uppercase;
}

td {
    padding: 14px 20px;

    color: var(--purple-dark);

    font-size: 0.98rem;

    border-bottom: 1px solid var(--purple-extralight);
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:nth-child(even) {
    background: #faf5ff;
}

tbody tr:hover {
    background: var(--purple-extralight);
}


/* ==========================================================================
   19. ENLACE EXTERNO
   ========================================================================== */

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

    margin-top: 1rem;
    padding: 0.5rem 1.2rem;

    color: var(--purple-primary);

    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    background: var(--purple-extralight);

    border: 2px solid transparent;
    border-radius: 30px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.btn-link:hover {
    color: var(--blanco);

    background: var(--purple-primary);

    transform: translateY(-2px);

    box-shadow: var(--shadow-medium);
}

.btn-link i {
    transition: transform 0.3s ease;
}

.btn-link:hover i {
    transform: translateX(4px);
}


/* ==========================================================================
   20. REFERENCIAS BIBLIOGRÁFICAS
   ========================================================================== */

.references {
    margin-top: 3rem;
    padding-top: 2rem;

    border-top: 2px solid var(--purple-soft);
}

.references h2 {
    font-size: 1.8rem;
}

.references ul {
    padding: 1rem 1.5rem;

    background: var(--purple-extralight);

    border-radius: 12px;
}

.references li {
    color: var(--texto-suave);
}
/* formulario */

.form-container {
  background: var(--card-gradient);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  padding: 36px 32px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.2);
  width: 100%;
  max-width: 460px;
  position: relative;
  overflow: hidden;
}

/* Resplandor decorativo interno */
.form-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.form-container h2 {
  margin-bottom: 24px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(168, 85, 247, 0.5);
}

/* Grupos del formulario */
.form-group {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Inputs y Textarea */
.form-group input,
.form-group textarea {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 0.7;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 15px var(--input-focus-glow);
  background-color: rgba(30, 10, 55, 0.8);
}

.form-group textarea {
  resize: vertical;
  min-height: 110px;
}

/* Mensajes de error por campo */
.error-message {
  color: var(--error-color);
  font-size: 0.8rem;
  margin-top: 6px;
  display: none;
  font-weight: 500;
}

.form-group.error input,
.form-group.error textarea {
  border-color: var(--error-color);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
}

.form-group.error .error-message {
  display: block;
}

/* Botón de Envío con Degradado */
button[type="submit"] {
  width: 100%;
  padding: 14px;
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(126, 34, 206, 0.4);
  transition: all 0.3s ease;
  margin-top: 10px;
}

button[type="submit"]:hover {
  background: var(--primary-hover);
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6);
  transform: translateY(-2px);
}

button[type="submit"]:active {
  transform: translateY(0);
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Mensaje de Estado Global */
.status-message {
  margin-top: 18px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
  font-weight: 600;
  display: none;
}

.status-message.success {
  display: block;
  background-color: var(--success-bg);
  color: var(--success-color);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.status-message.error {
  display: block;
  background-color: var(--error-bg);
  color: var(--error-color);
  border: 1px solid rgba(248, 113, 113, 0.3);
}





/* ==========================================================================
   21. FOOTER
   ========================================================================== */

footer {
    margin-top: 3rem;
    padding: 2rem;

    color: var(--blanco);

    background:
        linear-gradient(145deg,
            #2b1a4a 0%,
            #1e0f33 100%);
}

.footer-content {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.footer-content p {
    margin: 0;

    color: #d9c9f0;

    font-size: 0.9rem;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d9c9f0;

    font-size: 1.1rem;
    text-decoration: none;

    background: rgba(168, 85, 247, 0.18);

    border-radius: 50%;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.social-links a:hover {
    color: var(--blanco);

    background: var(--purple-medium);

    transform: translateY(-3px);
}


/* ==========================================================================
   22. MENÚ RESPONSIVE
   ========================================================================== */

@media (max-width: 850px) {

    .nav-container {
        height: 50px;
        padding: 0 1.2rem;
    }

    .logo {
        font-size: 1.7rem;
    }

    .menu-btn {
        display: flex;
        color: #c084fc;
    }

    .nav-link {
        position: fixed;
        top: 0;
        right: -100%;

        width: 78%;
        max-width: 360px;
        height: 100vh;

        padding: 85px 1.5rem 2rem;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;

        overflow-y: auto;

        background:
            linear-gradient(170deg,
                #2b1a4a 0%,
                #160b26 100%);

        border-left: 2px solid rgba(160, 80, 255, 0.3);

        box-shadow:
            -10px 0 40px rgba(0, 0, 0, 0.7);

        transition: right 0.4s ease;

        z-index: 1050;
    }

    .nav-link.active {
        right: 0;
    }

    .nav-link li a {
        padding: 0.9rem 1.2rem;

        color: #d9c9f0;

        font-size: 1rem;
        white-space: normal;
        text-align: left;

        background: rgba(255, 255, 255, 0.04);

        border-radius: 12px;
    }

    .nav-link li a::after {
        display: none;
    }

    .nav-link li a:hover {
        background: rgba(168, 85, 247, 0.25);

        transform: translateX(6px);
    }

    /* Overlay visible */

    .overlay {
        position: fixed;
        inset: 0;

        display: block;

        background: rgba(0, 0, 0, 0.55);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;

        z-index: 1040;
    }

    .overlay.active {
        opacity: 1;
        visibility: visible;
    }
}


/* ==========================================================================
   23. TABLETAS
   ========================================================================== */

@media (max-width: 1024px) {
    .menu-btn {
        display: flex;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .main-card {
        padding: 2.5rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}


/* ==========================================================================
   24. TABLETAS PEQUEÑAS
   ========================================================================== */

@media (max-width: 850px) {
    .menu-btn {
        display: flex;
    }

    .hero {
        min-height: 60vh;
        padding: 3.5rem 1.5rem;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .main-card {
        padding: 1.5rem;
        border-radius: 18px;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    blockquote {
        padding: 1rem 1.2rem;
        font-size: 1rem;
    }
}


/* ==========================================================================
   25. MÓVILES
   ========================================================================== */

@media (max-width: 600px) {
    .menu-btn {
        display: flex;
    }

    body {
        font-size: 0.95rem;
    }


    .logo {
        font-size: 1.4rem;
    }


    .hero {
        min-height: 58vh;
        padding: 2.5rem 1rem;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero .category {
        padding: 0.3rem 1rem;

        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .container {
        margin: 1.5rem auto;
        padding: 0 0.8rem;
    }

    .main-card {
        padding: 1.2rem;
        border-left-width: 5px;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.05rem;
    }

    .main-card ul,
    .main-card ol {
        margin-left: 1.2rem;
    }

    .foto img {
        max-width: 180px;
    }

    .table-container {
        padding: 0.8rem;
    }

    table {
        min-width: 500px;
        font-size: 0.85rem;
    }

    th,
    td {
        padding: 0.7rem 0.8rem;
    }

    .btn-main {
        padding: 0.7rem 2rem;
        font-size: 0.95rem;
    }

    .btn-link {
        font-size: 0.85rem;
    }

    .footer-content p {
        font-size: 0.8rem;
    }

    .social-links a {
        width: 35px;
        height: 35px;

        font-size: 1rem;
    }
}


/* ==========================================================================
   26. MÓVILES PEQUEÑOS
   ========================================================================== */

@media (max-width: 400px) {

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.85rem;
    }

    .main-card {
        padding: 1rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    table {
        min-width: 430px;
        font-size: 0.75rem;
    }

    th,
    td {
        padding: 0.5rem;
    }
}


/* ==========================================================================
   27. ACCESIBILIDAD
   ========================================================================== */

.menu-btn:focus-visible,
.nav-link a:focus-visible,
.btn-main:focus-visible,
.btn-link:focus-visible,
.social-links a:focus-visible {
    outline: 3px solid #e1bee7;
    outline-offset: 4px;
}


/* ==========================================================================
   28. REDUCCIÓN DE MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}