/* ─── Copa Culinaria Carozzi 2026 — base styles ─── */

/* Fuente Montserrat Black (900) para los títulos grandes h2 y h3 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

@font-face{
  font-family:'Gotham Rounded';
  src:url('assets/fonts/GothamRounded-Light.otf') format('opentype');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gotham Rounded';
  src:url('assets/fonts/GothamRounded-Book.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gotham Rounded';
  src:url('assets/fonts/GothamRounded-BookItalic.otf') format('opentype');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Gotham Rounded';
  src:url('assets/fonts/GothamRounded-Medium.otf') format('opentype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gotham Rounded';
  src:url('assets/fonts/GothamRounded-Bold.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gotham Rounded';
  src:url('assets/fonts/GothamRounded-BoldItalic.otf') format('opentype');
  font-weight:700;font-style:italic;font-display:swap;
}

:root{
  --c-red: #E2231A;
  --c-red-deep: #B71B12;
  --c-navy: #2E2A6B;
  --c-navy-deep: #1F1C4B;
  --c-black: #0B0B0B;
  --c-carbon: #141414;
  --c-coal: #1C1C1E;
  --c-line: #2A2A2C;
  --c-cream: #F4EFE3;       /* warm cream — bloques con respiro */
  --c-cream-2: #EDE6D2;     /* cream un poco más cargado */
  --c-bone: #FBF8F1;        /* fondo principal claro */
  --c-paper: #FFFFFF;
  --c-ink: #1A1A1A;         /* texto principal en claro */
  --c-silver: #B5B5BA;
  --c-muted: #8A8A92;
  --c-warm: #B8924A;        /* dorado cálido tenue — herencia editorial, no 10 años */
  --c-warm-soft: #D9BA7C;

  --f-display: "Gotham Rounded", "Manrope", ui-sans-serif, sans-serif;
  --f-body: "Gotham Rounded", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-script: "Caveat", "Pacifico", cursive;
  --f-serif: "Fraunces", "Playfair Display", Georgia, serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-black);color:#fff}
body{
  font-family:var(--f-body);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

/* Type system */
.display{
  font-family:var(--f-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.92;
}
.script{
  font-family:var(--f-script);
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  line-height:1;
}
.eyebrow{
  font-family:var(--f-body);
  font-weight:700;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.kicker{
  font-family:var(--f-display);
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Layout */
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 28px}
@media (max-width:720px){.wrap{padding:0 18px}}

section{position:relative}
.pad-y{padding:120px 0}
.pad-y-sm{padding:80px 0}
@media (max-width:720px){
  .pad-y{padding:72px 0}
  .pad-y-sm{padding:52px 0}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;border-radius:8px;
  font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  border:none;transition:transform .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--c-red);color:#fff}
.btn-primary:hover{background:var(--c-red-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.btn-dark{background:#fff;color:var(--c-black)}
.btn-dark:hover{background:var(--c-cream)}
.btn-lg{padding:20px 32px;font-size:15px}
.btn .arrow{width:14px;height:14px;flex-shrink:0}

/* Pills / chips */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid rgba(255,255,255,.2);
  border-radius:999px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.85);
  font-weight:600;
}
.pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-red);display:inline-block}

/* Section labels */
.section-label{
  display:flex;align-items:center;gap:14px;
  color:var(--c-red);font-weight:700;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;
}
.section-label::before{
  content:"";width:32px;height:1px;background:var(--c-red);
}
.section-label.on-dark{color:var(--c-red)}
.section-label.on-light{color:var(--c-red)}

/* Headline scale */
.h-mega{font-size:clamp(40px, 9vw, 144px)}
.h-xl{font-size:clamp(34px, 6.5vw, 96px)}
.h-lg{font-size:clamp(28px, 4.5vw, 64px)}
.h-md{font-size:clamp(22px, 3vw, 44px)}
.h-sm{font-size:clamp(20px, 2.2vw, 32px)}

/* Surface tones */
.bg-black{background:var(--c-black);color:#fff}
.bg-carbon{background:var(--c-carbon);color:#fff}
.bg-navy{background:var(--c-navy);color:#fff}
.bg-cream{background:var(--c-cream);color:var(--c-black)}
.bg-bone{background:var(--c-bone);color:var(--c-black)}

/* Decorative chile-silhouette divider (subtle) */
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);width:100%;margin:0}
.rule.dark{background:linear-gradient(90deg,transparent,rgba(0,0,0,.15),transparent)}

/* Focus */
:focus-visible{outline:2px solid var(--c-red);outline-offset:2px;border-radius:6px}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}

/* Animations */
@keyframes flicker{
  0%,100%{opacity:.9}
  50%{opacity:.6}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-up{animation:fadeUp .8s ease both}

@keyframes spin{ to { transform: rotate(360deg); } }

/* ─── Scroll reveal system ─────────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="scale"]{ transform:scale(.96); }
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Smooth root scrolling */
html{ scroll-behavior:smooth; }

/* ─── Mobile harmonization ─────────────────────────────── */
@media (max-width: 720px){
  body{ font-size:15px; }
  .pad-y{ padding:56px 0 !important; }
  .pad-y-sm{ padding:40px 0 !important; }
  .wrap{ padding:0 16px !important; }
  /* Wrap long uppercase display words on tiny screens */
  .display{ overflow-wrap:break-word; word-break:normal; hyphens:none; }
  /* Buttons */
  .btn{ padding:14px 18px; font-size:13px; }
  .btn-lg{ padding:16px 22px; font-size:14px; }
  /* Script accent slightly smaller proportionally on mobile */
  .script{ font-size:1em !important; }
  /* Section headers should never feel cramped — give breathing room */
  section h1, section h2{ text-wrap:balance; }
  /* Ensure inputs don't trigger iOS zoom */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:16px !important; }
}
@media (max-width: 540px){
  .h-mega{ font-size:36px; }
  .h-xl{ font-size:30px; }
  .h-lg{ font-size:26px; }
  .h-md{ font-size:22px; }
  .pad-y{ padding:44px 0 !important; }
  .wrap{ padding:0 14px !important; }
  .btn{ padding:13px 16px; font-size:12.5px; letter-spacing:.05em; }
  .btn-lg{ padding:15px 20px; font-size:13px; }
}

/* ═══════════════════════════════════════════════════════════
   CORRECCIÓN RESPONSIVE MÓVIL — añadido para evitar
   scroll horizontal y descuadres en pantallas pequeñas.
   ═══════════════════════════════════════════════════════════ */

/* 1. Candado global: nada puede ser más ancho que la pantalla.
   Esto contiene cualquier elemento que intente sobresalir. */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
*{
  /* evita que textos largos sin espacios ensanchen la página */
  min-width:0;
}

@media (max-width: 720px){
  /* 2. El badge "XI" de la sección Nosotros sobresale con
     right:-22 / bottom:-32 — en móvil lo traemos hacia adentro
     para que no empuje el ancho de la página. */
  .about-badge{
    right:0 !important;
    bottom:-20px !important;
    padding:16px 18px !important;
    max-width:180px !important;
  }

  /* 3. Imágenes y fondos nunca exceden el contenedor */
  img, video{ max-width:100% !important; height:auto; }

  /* 4. Las grillas de 2 columnas pasan a 1 sola en móvil
     (refuerzo por si alguna quedó sin su media query) */
  .premios-grid{ grid-template-columns:1fr !important; }
}

@media (max-width: 560px){
  /* 5. El "Podium" de premios tiene padding lateral muy grande;
     lo reducimos para que las tarjetas quepan bien */
  .premios-grid > div > div{
    padding:28px 16px 32px !important;
  }
  /* 6. Tarjetas de premio: tipografía y alturas más contenidas */
  .podium-grid{ gap:12px !important; }

  /* 7. Cabeceras muy grandes: un punto más de control fino */
  .h-mega{ font-size:32px !important; }
  .h-xl{ font-size:27px !important; }
}

/* ── Corrección específica de la sección PREMIOS ──
   La tarjeta ganadora tiene scale(1.03) que la hace más ancha
   que la pantalla en móvil y corre toda la sección hacia el lado.
   Aquí anulamos ese agrandado en todas las pantallas pequeñas. */
@media (max-width: 860px){
  .podium-grid{ grid-template-columns:1fr !important; }
  .podium-grid > div{
    transform:none !important;   /* anula translateY + scale */
    min-height:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  /* El podium y la grilla de premios nunca exceden el ancho */
  .premios-grid, .premios-grid > div, .premios-grid > div > div{
    max-width:100% !important;
    overflow:hidden;
  }
}

/* ── Títulos que se cortan feo en móvil ("PROFESIONAL") ──
   Corrección quirúrgica: solo los títulos que de verdad
   se parten en 2 líneas. No afecta al resto del sitio.
     · #categorias  → tarjetas JUNIOR / PROFESIONAL (inline 48px)
     · #clasificatorias → FINAL JUNIOR / FINAL PROFESIONAL (inline 64px)
     · #premios     → títulos JUNIOR / PROFESIONAL (inline 54px)
*/
@media (max-width: 720px){
  #categorias h3.display{
    font-size:34px !important;
    line-height:1 !important;
  }
  #clasificatorias h3.display{
    font-size:34px !important;
    line-height:1.02 !important;
  }
  #premios h3.display{
    font-size:34px !important;
    line-height:1 !important;
  }
}
@media (max-width: 400px){
  #categorias h3.display,
  #clasificatorias h3.display,
  #premios h3.display{
    font-size:29px !important;
  }
}

/* ── PORTADA (HERO): imagen distinta para escritorio y móvil ──
   Escritorio usa la imagen horizontal (logo-portada.png).
   Móvil usa la imagen vertical (logo-portada-movil.png), que ya
   incluye el título, el logo, el XI Edición y las ciudades.
   No se modifica nada de la versión de escritorio. */

/* Por defecto (escritorio): se ve la horizontal, se oculta la vertical */
.hero-title-desktop{ display:block; }
.hero-title-mobile{ display:none; }

@media (max-width: 720px){
  /* En móvil: se oculta la horizontal, se muestra la vertical */
  .hero-title-desktop{ display:none !important; }
  .hero-title-mobile{ display:block !important; }

  /* La imagen vertical ya trae las ciudades → ocultamos la franja
     de ciudades separada para que no aparezca repetida */
  .hero-cities-strip{ display:none !important; }

  /* El contenido del hero arranca más arriba y mejor repartido */
  .hero-content{
    justify-content:flex-start !important;
    padding:110px 20px 30px !important;
    transform:none !important;
  }
  /* Los botones van debajo de la imagen vertical */
  .hero-buttons{
    margin-top:30px !important;
  }
}
@media (max-width: 400px){
  .hero-content{
    padding:96px 16px 24px !important;
  }
  .hero-title-mobile{ max-width:340px !important; }
  /* Botones apilados a ancho completo en pantallas chicas */
  .hero-buttons{
    flex-direction:column !important;
    width:100%;
  }
  .btn-hero{
    width:100% !important;
    min-width:0 !important;
  }
}

/* ── Checkbox de términos y condiciones ──
   La regla global "min-width:0" (usada para evitar scroll
   horizontal) encogía el checkbox. Aquí le devolvemos su
   tamaño fijo para que se vea bien en el formulario. */
input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  flex-shrink:0;
  accent-color:var(--c-red);
}

/* ── Títulos grandes h2 / h3 en fuente Black ──
   El cliente pidió que los títulos de sección se vean más
   gruesos y black, para distinguirse de los textos y subtítulos.
   Se aplica Montserrat 900 a los h2 y h3 que usan la clase .display.
   El resto del sitio mantiene la fuente Gotham Rounded. */
h2.display,
h3.display{
  font-family:'Montserrat', 'Gotham Rounded', sans-serif !important;
  font-weight:900 !important;
}