@font-face {
    font-family: 'Gap Sans';
    src: url('font/gapsans-webfont.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('font/WorkSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Consola Mono';
    src: url('font/consola-mono.book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-heading: 'Gap Sans', 'Work Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --font-body: 'Work Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --font-mono: 'Consola Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;

    /* Paleta de colores */
    --verde-primavera-oscuro: #10784E;
    --rojo-penn: #920000;
    --purpura-byzantium: #8F2B80;
    --naranja-cascara: #FAA019;

    --verde: #009200;
    --cian-turquesa: #19FAA0;
    --rojo-intenso: #D1000B;
    --azul-royal: #1973FA;
    --naranja-fluor: #FF6F00;
    --amarillo-lima: #E4FA19;

    --blanco-calido: #FEFFF8;
    --gris-muy-claro: #EEEEEE;
    --gris-medio: #6D7D80;
    --gris-oscuro: #403E42;
    --casi-negro: #1B0106;
    --negro-profundo: #0A0A0A;
}

html, body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #111;

}

/* asegurar que el layout de columna ocupe toda la altura */
html, body { height: 100%; }

body{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    text-align: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 900;
}

button, .btn, input[type="button"], input[type="submit"], details, summary {
    font-family: var(--font-body);
}

a {
    font-family: var(--font-mono);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
}
a:hover {
    text-decoration: underline;
    color: var(--rojo-penn);
    transition: all 0.2s ease-in-out;

}

code, kbd, pre, .console {
    font-family: var(--font-mono);
    font-size: 0.95rem;
}



video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -100;

}

/* En pantallas pequeñas no ocupar todo el alto para evitar romper el layout */
@media(max-width:720px){
    video{ height: 60vh; margin-top:80px; }
}



.nav{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    box-sizing: border-box;
    background: #ffffffc0;
    z-index: 200;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.logo{
background-image: url('/mavin.png');
width: 250px;
height: 51px;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}

.nv{
    display: flex;
    gap: 20px;
}

.nav-toggle{
    display: none;
    background: #ffffff;
    color: #111;
    border: 2px solid rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 700;
    cursor: pointer;
}
.nav-toggle:focus{ outline: 3px solid rgba(0,0,0,0.35); }

main{
    /* Main ocupa todo el ancho y centra el contenido interno
       .main-inner controla el ancho máximo y el padding interno */
    width: 100%;
    padding-top: 85px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 auto;
}

#instagram{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-image: url('/insta.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}
#instagram:hover{
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}
#instagram:active{
    transform: scale(0.9);
    transition: all 0.1s ease-in-out;
}

/* Contenedor interior: `.main-inner` limita ancho y centra contenido */
.main-inner{ max-width:1200px; margin: 0 auto; padding: 0 20px; text-align: center; width:100%; }
.main-inner p{ max-width:720px; margin:0 auto 16px auto; }

/* Asegurar que el footer siempre quede debajo del contenido */
.site-footer{ flex-shrink: 0; width: 100%; }

/* Uso más pronunciado de la paleta */
button{ background: var(--rojo-penn); }
.nv a:hover{ background: rgba(16,120,78,0.06); color: var(--verde-primavera-oscuro); }
.chip{ background: linear-gradient(90deg, rgba(16,120,78,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(16,120,78,0.12); }

/* Resultado decorado: usar paleta */
.resultado .success{ background: linear-gradient(90deg, rgba(16,120,78,0.06), rgba(255,255,255,0.6)); border-left: 4px solid var(--verde-primavera-oscuro); color: var(--casi-negro); }
.resultado .warning{ background: linear-gradient(90deg, rgba(250,160,25,0.06), rgba(255,255,255,0.6)); border-left: 4px solid var(--naranja-cascara); color: var(--casi-negro); }
.resultado .error{ background: linear-gradient(90deg, rgba(146,0,0,0.06), rgba(255,255,255,0.6)); border-left: 4px solid var(--rojo-penn); color: var(--casi-negro); }

/* Botones secundarios */
.btn-secondary{ background: #f3f3f3; color: #111; border: 1px solid rgba(0,0,0,0.06); }

/* Feed: tarjetas con imagen a toda la altura y texto alineado a la derecha */
.feed-list{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.person-card{ min-width: 260px; max-width: 420px; background: linear-gradient(180deg, var(--blanco-calido), #fff); border-radius:12px; box-shadow: 0 6px 18px rgba(10,10,10,0.06); padding:0; display:flex; gap:0; align-items:stretch; scroll-snap-align: start; overflow:hidden; }
.person-card .avatar{ width: 40%; height: 100%; object-fit: cover; border-radius: 0; flex: 0 0 40%; }
.person-card .person-body{ flex:1; padding:12px; display:flex; flex-direction:column; justify-content:center; text-align:right; }
.person-card .person-head{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; justify-content:flex-end; }
.person-name{ font-weight:800; display:block; }
.person-role{ margin-left:0; display:block; font-weight:100; color:var(--gris-oscuro); font-size: x-small; }
.person-note{ margin:8px 0 0 0; color:var(--gris-oscuro); font-size:0.95rem; text-align:right; }

/* Ajustes visuales para los botones del feed */
.feed-actions button{ background: transparent; color: var(--casi-negro); border:1px solid var(--gris-muy-claro); padding:8px 12px; border-radius:8px; }

/* Cookie popup */
.cookie-popup{ position: fixed; right: 20px; bottom: 20px; width: 340px; max-width: calc(100% - 32px); background: linear-gradient(180deg,#ffffff,#fbfbfb); border-radius:12px; box-shadow: 0 10px 30px rgba(10,10,10,0.15); padding:12px; display:flex; gap:12px; align-items:flex-start; z-index: 99999; }
.cookie-popup img{ width:72px; height:72px; object-fit:cover; border-radius:8px; flex:0 0 72px; }
.cookie-popup .cookie-content{ flex:1; display:flex; flex-direction:column; }
.cookie-popup .cookie-text{ font-size:0.95rem; color:var(--casi-negro); }
.cookie-popup .cookie-actions{ display:flex; gap:8px; margin-top:8px; justify-content:flex-end; }
.cookie-popup .cookie-actions a{ color: var(--azul-royal); text-decoration:underline; }

/* Asegurar que el botón de Instagram quede siempre visible (ajuste z-index) */
#instagram{ z-index: 99998; }

/* Resultado decorado en verificar */
.resultado{ margin-top:16px; }
.resultado .message{ padding:14px; border-radius:10px; display:block; box-shadow: 0 6px 18px rgba(10,10,10,0.04); }
.resultado .success{ background: linear-gradient(90deg, rgba(16,120,78,0.06), rgba(255,255,255,0.6)); border-left: 4px solid var(--verde-primavera-oscuro); color: var(--casi-negro); }
.resultado .warning{ background: linear-gradient(90deg, rgba(250,160,25,0.06), rgba(255,255,255,0.6)); border-left: 4px solid var(--naranja-cascara); color: var(--casi-negro); }
.resultado .error{ background: linear-gradient(90deg, rgba(145,0,0,0.04), rgba(255,255,255,0.6)); border-left: 4px solid var(--rojo-penn); color: var(--casi-negro); }

.card{
    margin: 28px auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,250,0.9));
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(16,24,40,0.08);
    padding: 28px;
    text-align: left;
    backdrop-filter: blur(4px);
}

.card h1{
    margin: 0 0 8px 0;
    font-size: 1.6rem;
}

.help{
    color: #444;
    font-size: 0.95rem;
    margin-bottom: 18px;
}

/* Etiquetas e inputs: estilo común para formularios */
.card label, .card label[for="numSerie"]{ display:block; margin-top:12px; margin-bottom:6px; font-weight:700; text-transform:none; }
.card input[type="text"], .card input[type="email"], .card textarea, #numSerie{
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    margin-top:6px;
}
.card textarea{ resize: vertical; min-height:110px; }

.card .form-actions{ display:flex; gap:10px; align-items:center; margin-top:12px; }
.card .btn-secondary{ background:#f3f3f3; color:#111; border:none; }

button{ /* estilos base para botones */
    background: var(--rojo-penn);
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button:active{ transform: translateY(1px) scale(0.995); }
button:focus{ outline: 3px solid rgba(146,0,0,0.18); }

.resultado{
    margin-top: 16px;
}

.consola{
    margin-top: 12px;
    font-family: var(--font-mono);
    color: #444;
    font-size: 0.9rem;
}

.resultado > div { padding: 12px; border-radius: 8px; }

.tinto{ background: linear-gradient(90deg,#fff5f5,#fff ); border: 1px solid color-mix(in srgb, var(--rojo-penn) 8%, transparent); }
.blanco{ background: linear-gradient(90deg,var(--blanco-calido),#ffffff); border: 1px solid color-mix(in srgb, var(--gris-oscuro) 6%, transparent); }
.extra{ background: linear-gradient(90deg,#fffaf0,#fff); border: 1px solid color-mix(in srgb, var(--naranja-cascara) 8%, transparent); }

.meta-row{ display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.chip{ background:#f3f3f3; padding:6px 10px; border-radius:999px; font-family:var(--font-mono); font-size:0.85rem; }

/* Responsive */
@media (max-width:520px){
    .nav{ padding:14px 18px; }
    .logo{ width:180px; height:38px; }
    .card{ padding:18px; }
    h1{ font-size:1.25rem }
}

@media(max-width:768px){
    .nav{ position: sticky; top:0; flex-wrap:wrap; gap:12px; }
    .nav-toggle{ display:block; }
    .nv{ width:100%; flex-direction:column; align-items:flex-start; display:none; padding-top:10px; }
    .nv.open{ display:flex; }
    .nv a{ width:100%; padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.08); text-align:left; }
}

/* pequeño ajuste visual para los enlaces del nav */
.nv a{ padding:6px 8px; border-radius:6px; color: #111; }
.nv a:hover{ background: rgba(0,0,0,0.04); }

/* Estilos para la sección 'Lo han conseguido' */
.feed{
    margin-top: 18px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 28px 0;
    background: linear-gradient(180deg, rgba(250,250,250,0.02), rgba(250,250,250,0.02));
}
.feed-inner{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.feed-header h2{ margin: 0 0 6px 0; font-size: 1.25rem; }
.feed-sub{ margin: 0 0 12px 0; color: var(--gris-medio); }

@media(min-width:900px){
    .feed-list{ flex-wrap:nowrap; }
}

/* Footer */
.site-footer{ background: var(--negro-profundo); color: var(--blanco-calido); padding: 28px 0 16px 0; margin-top: 28px; }
.footer-inner{ max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; align-items:start; }
.footer-col h3, .footer-col h4{ color: var(--blanco-calido); margin:0 0 8px 0; }
.footer-col p{ color: #dcdcdc; margin:0; font-size:0.95rem; }
.footer-col a{ color: var(--amarillo-lima); text-decoration: none; }
.footer-bottom{ max-width:1200px; margin:10px auto 0 auto; padding:0 20px; color: #bdbdbd; font-size:0.85rem; }

@media(max-width:720px){
    .footer-inner{ grid-template-columns: 1fr; text-align:left; }
    .feed-list{ gap:12px; }
}