/*  ------------------------------------------------------------------
    main.css · Estilos globales del sitio personal de
    Pablo Salomón de León – v1.4 (jun-2025)
    ------------------------------------------------------------------ */

/*===================== 1. RESET LIGERO =============================*/
*:where(:not(html, iframe, canvas, img, svg, video):not(svg *)) {
    all: unset;
    display: revert;
}

*, *::before, *::after { box-sizing: border-box; }

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

body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd { margin: 0; }

ul[role='list'], ol[role='list'] { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; }

/*===================== 2. VARIABLES GLOBALES =======================*/
:root{
    /* Paleta */
    --color-bg:          #f3f4f6;
    --color-fg:          #1f2937;
    --color-primary:     #327a84;
    --color-primary-700: #26656d;
    --color-secondary:   #ffb703;
    --color-white:       #ffffff;

    /* Tipografías */
    --font-base: 'Poppins', system-ui, -apple-system, sans-serif;
    --step-0: 16px;
    --step-1: 20px;
    --step-2: 28px;
    --step-3: 34px;

    /* Forma & sombras */
    --radius:  .75rem;
    --shadow:  0 6px 18px rgba(0,0,0,.08);

    /* Z-index */
    --z-overlay: 900;
    --z-menu:    950;
}

/*===================== 3. BODY & TEXTO =============================*/
body{
    font-family: var(--font-base);
    font-size: var(--step-0);
    color: var(--color-fg);
    background: var(--color-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3{ font-weight:600; color:var(--color-primary); }
h1{ font-size:var(--step-3); }
h2{ font-size:var(--step-2); margin-bottom:.5em; }
h3{ font-size:var(--step-1); margin-bottom:.35em; }

p, li{ line-height:1.6; }

a{
    color:var(--color-primary);
    text-decoration:none;
    transition:color .2s ease;
}
a:hover,a:focus{ color:var(--color-primary-700); }

/*===================== 4. LAYOUT BÁSICO ============================*/
/* Margen fijo de 2 cm a la izquierda en todo el contenido */
.wrapper{
    width:100%;
    max-width:1200px;
    margin-inline:auto;
    padding-left:2cm;        /* ← 2 centímetros */
    padding-right:1rem;      /* respiración normal al otro lado */
    padding-block:2rem;
}


.card{
    background:var(--color-white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:1.5rem;
    overflow:hidden;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:var(--color-primary);
    color:var(--color-white);
    border-radius:var(--radius);
    padding:.6rem 1.2rem;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
}
.btn:hover,.btn:focus{ background:var(--color-primary-700); }

/*===================== 5. MENÚ “ALFAJOR” ===========================*/
.menu-toggle{
    position:fixed; top:1rem; left:1rem;
    width:42px;height:42px;
    display:flex; justify-content:center; align-items:center;
    background:var(--color-primary);
    border-radius:50%; box-shadow:var(--shadow);
    cursor:pointer; z-index:var(--z-menu);
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after{
    content:''; width:22px; height:2px;
    background:var(--color-white);
    border-radius:2px; position:absolute;
    transition:transform .3s ease,opacity .3s ease;
}
.menu-toggle::before{ transform:translateY(-6px); }
.menu-toggle::after { transform:translateY( 6px); }

.menu-toggle.active span{ opacity:0; }
.menu-toggle.active::before{ transform:rotate(45deg); }
.menu-toggle.active::after { transform:rotate(-45deg); }

nav#menuAlfajor{
    position:fixed; top:0; left:0;
    width:260px; height:100vh;
    background:var(--color-primary); color:var(--color-white);
    padding:4rem 1.25rem;
    transform:translateX(-100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:var(--z-overlay);
}
body.menu-open nav#menuAlfajor{ transform:translateX(0); }

nav#menuAlfajor ul{ list-style:none; margin:0; padding:0; }
nav#menuAlfajor li+li{ margin-top:1.25rem; }
nav#menuAlfajor a{
    color:var(--color-white);
    font-size:var(--step-1);
    font-weight:500;
    text-transform:uppercase;
}

/*===================== 6. UTILIDADES ==============================*/
.text-center{ text-align:center; }
.visually-hide{
    position:absolute!important; width:1px; height:1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media(min-width:768px){   .desktop-hidden{ display:none!important; } }
@media(max-width:767.98px){ .mobile-hidden{ display:none!important; } }

/*===================== 7. ANIMACIONES =============================*/
@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
}
.card{ animation:fadeInUp .4s ease both; }

/*===================== 8. FORMULARIOS =============================*/
label{
    display:block;
    margin:.75rem 0 .25rem;
    font-weight:500;
}
input, select{
    width:100%;
    padding:.55rem .75rem;
    border:1px solid #cbd5e1;           /* “frame” visible */
    border-radius:var(--radius);
    background:#fff;
    font-size:1rem;
}
input:focus, select:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 2px rgba(50,122,132,.25);
}

/*===================== 9. HERO – título responsive ===============*/
.hero__title{
    font-size:clamp(2rem, 2.5vw + 1rem, 3rem); /* 32 px → 64 px máx. */
    line-height:1.1;
    word-break:break-word;
}
/* ====== HERO – ajustar tamaño del título “By-SALOMON” ============ */
/* 32 px en móviles, crece suave, tope 56 px en pantallas grandes   */
.hero__title{
    font-size:clamp(2rem, 2.5vw + 1rem, 3.5rem); /* 32 ↔ 56 px */
    line-height:1.1;
    word-break:break-word;
    margin:0;                                    /* quita espacio extra */
}
/* Oculta por completo la primera columna (ID) de la tabla de urgencias */
.urg-table th:first-child,
.urg-table td:first-child{
    display:none;
}