/*
Theme Name: Goujon
Theme URI: https://goujon.cl
Author: Cervecería Goujon
Description: Tema a medida para Cervecería Goujon, cervecería artesanal del Cajón del Maipo.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: goujon
*/

/* ==========================================================================
   Los colores de la marca están en :root. Para cambiar un color en TODO el
   sitio, edita solo esa línea. Ver goujon-backend/04-textos-y-datos.md
   ========================================================================== */

  :root{
    /* ---- Colores tomados de las etiquetas reales ---- */
    --golden:#C3CC33;
    --ipa:#2F6B34;
    --stout:#1F1F1F;
    --scottish:#C4441F;

    /* ---- Sistema derivado ---- */
    --verde-profundo:#14251A;
    --verde-medio:#1D3524;
    --crema:#F5F2E6;
    --crema-dim:#E8E3D1;
    --texto-claro:#FFFFFF;
    --texto-suave:#D9D6C6;
    --texto-oscuro:#1A1F1A;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--crema);color:var(--texto-oscuro);
    font-family:'Work Sans',sans-serif;line-height:1.65;overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;line-height:1.12;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  .eyebrow{
    font-family:'Space Mono',monospace;font-size:0.7rem;letter-spacing:0.2em;
    text-transform:uppercase;color:var(--golden);
  }
  .wrap{max-width:1180px;margin:0 auto;}

  /* ================= HEADER ================= */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:0.55rem clamp(1rem,4vw,2.6rem);
    background:rgba(20,37,26,0.94);backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(195,204,51,0.18);
  }
  .logo img{height:62px;width:auto;}
  .nav-toggle{
    display:none;background:none;border:0;color:var(--texto-claro);
    font-size:1.5rem;line-height:1;cursor:pointer;padding:.2rem .4rem;
  }
  nav ul{display:flex;gap:clamp(.9rem,2vw,1.9rem);list-style:none;align-items:center;}
  nav a{
    color:var(--texto-claro);font-size:0.87rem;letter-spacing:0.02em;
    position:relative;padding-bottom:4px;
  }
  nav a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
    background:var(--golden);transition:width .28s ease;
  }
  nav a:hover::after,nav a:focus-visible::after{width:100%;}
  nav a.nav-cta{
    background:var(--golden);color:var(--verde-profundo);font-weight:600;
    padding:.5rem .95rem;border-radius:999px;
  }
  nav a.nav-cta::after{display:none;}
  nav a.nav-cta:hover{background:#D3DC45;}

  @media (max-width:900px){
    .nav-toggle{display:block;}
    nav ul{
      position:fixed;top:60px;left:0;right:0;flex-direction:column;align-items:flex-start;
      background:var(--verde-profundo);padding:1.3rem 1.6rem 1.8rem;gap:1rem;
      transform:translateY(-150%);transition:transform .35s ease;
      border-bottom:1px solid rgba(195,204,51,0.2);
    }
    nav ul.open{transform:translateY(0);}
  }

  /* ================= BOTONES ================= */
  .btn{
    display:inline-flex;align-items:center;gap:.5rem;
    background:var(--golden);color:var(--verde-profundo);
    font-weight:600;font-size:0.92rem;letter-spacing:.01em;
    padding:.85rem 1.7rem;border-radius:999px;border:2px solid var(--golden);
    cursor:pointer;transition:transform .25s ease,background .25s ease,border-color .25s ease;
  }
  .btn:hover{transform:translateY(-2px);background:#D3DC45;border-color:#D3DC45;}
  .btn.ghost{background:transparent;color:var(--texto-claro);border-color:rgba(255,255,255,.5);}
  .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
  .btn.scottish{background:var(--scottish);border-color:var(--scottish);color:#fff;}
  .btn.scottish:hover{background:#D64F27;border-color:#D64F27;}

  /* ================= HERO ================= */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    padding:7rem clamp(1.2rem,6vw,4rem) 5rem;
    background:linear-gradient(178deg,#0F1D14 0%,var(--verde-profundo) 50%,var(--ipa) 140%);
    color:var(--texto-claro);overflow:hidden;
  }
  .hero .mountains{position:absolute;bottom:0;left:0;width:100%;opacity:.95;pointer-events:none;}
  .hero .condor{position:absolute;top:0;left:0;width:86px;opacity:.8;animation:fly 38s linear infinite;pointer-events:none;}
  @keyframes fly{
    0%{transform:translate(-12vw,22vh) scale(.7);}
    50%{transform:translate(52vw,8vh) scale(1);}
    100%{transform:translate(116vw,18vh) scale(.8);}
  }
  @media (prefers-reduced-motion:reduce){.hero .condor{animation:none;left:62%;top:14%;}}
  .hero-inner{
    position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
    gap:3rem;width:100%;max-width:1180px;margin:0 auto;
  }
  .hero h1{font-size:clamp(2.5rem,5.6vw,4.1rem);margin:.7rem 0 1.1rem;}
  .hero h1 em{font-style:italic;color:var(--golden);}
  .hero p{max-width:470px;font-size:1.05rem;color:var(--texto-suave);margin-bottom:2rem;}
  .hero-kicker{
    font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--golden);
    margin:0 0 1.1rem;display:inline-flex;align-items:center;gap:.6rem;
  }
  .hero-kicker::before{content:"";width:26px;height:2px;background:var(--golden);}

  .hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;}
  .hero-stamp{
    flex-shrink:0;width:clamp(210px,24vw,320px);transform:rotate(6deg);
    filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
  }
  @media (max-width:900px){.hero-stamp{display:none;}}
  .scroll-hint{
    position:absolute;bottom:1.9rem;left:clamp(1.2rem,6vw,4rem);z-index:2;
    display:flex;align-items:center;gap:.6rem;font-family:'Space Mono',monospace;
    font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#A8B6A6;
  }
  .scroll-hint .line{width:34px;height:1px;background:#A8B6A6;}

  /* ================= SECCIONES ================= */
  section{padding:clamp(3.6rem,8vw,6.8rem) clamp(1.2rem,6vw,4rem);}
  .section-head{max-width:640px;margin:0 auto 2.8rem;}
  .section-head.center{text-align:center;}
  .section-head h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-top:.4rem;}
  .section-head p{margin-top:.9rem;color:inherit;opacity:.85;}

  /* ---- Quiénes somos ---- */
  #somos{background:var(--crema);}
  .somos-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start;max-width:1180px;margin:0 auto;}
  .somos-grid.somos-simple{grid-template-columns:1fr;max-width:1040px;}
  .somos-text strong{color:var(--ipa);font-weight:600;}
  @media (max-width:880px){.somos-grid{grid-template-columns:1fr;}}
  .somos-text p{margin-bottom:.95rem;max-width:none;color:#3B4238;}
  #somos .eyebrow{color:var(--ipa);}
  .seal{
    margin-top:2.2rem;display:flex;align-items:center;gap:1.1rem;
    padding:1.05rem 1.25rem;border:1px dashed var(--ipa);max-width:430px;border-radius:6px;
  }
  .seal img{flex-shrink:0;width:58px;height:auto;}
  .seal p{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.03em;color:#3B4238;line-height:1.55;}

  /* ---- Nuestras cervezas ---- */
  #cervezas{background:var(--verde-profundo);color:var(--texto-claro);}
  #cervezas .section-head p{color:var(--texto-suave);}
  .beer-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
    gap:1.4rem;max-width:1180px;margin:0 auto;
  }
  .beer-card{
    --accent:var(--golden);
    position:relative;border-radius:14px;overflow:hidden;
    background:var(--verde-medio);
    border:1px solid rgba(255,255,255,.09);
    border-top:4px solid var(--accent);
    padding:1.5rem 1.3rem 1.4rem;
    text-align:center;cursor:pointer;
    transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s ease,border-color .3s ease;
  }
  .beer-card.golden{--accent:var(--golden);}
  .beer-card.ipa{--accent:#4E9455;}
  .beer-card.stout{--accent:#8C8C8C;}
  .beer-card.scottish{--accent:var(--scottish);}
  .beer-card::before{
    content:"";position:absolute;inset:0;z-index:0;opacity:.16;pointer-events:none;
    background:radial-gradient(circle at 50% 78%,var(--accent),transparent 62%);
    transition:opacity .35s ease;
  }
  .beer-card:hover,.beer-card:focus-within{
    transform:translateY(-8px);
    box-shadow:0 20px 38px rgba(0,0,0,.42);
    border-color:var(--accent);
  }
  .beer-card:hover::before,.beer-card:focus-within::before{opacity:.3;}

  .bottle-stage{
    position:relative;z-index:1;
    height:210px;                      /* respaldo para navegadores sin clamp() */
    height:clamp(180px,26vw,230px);
    max-height:240px;
    display:flex;align-items:flex-end;justify-content:center;margin-bottom:.9rem;
  }
  .bottle{
    height:100%;width:auto;max-height:100%;object-fit:contain;
    transition:transform .45s cubic-bezier(.34,1.45,.64,1),filter .45s ease;
    transform-origin:50% 92%;
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));
  }
  .beer-card:hover .bottle,
  .beer-card:focus-within .bottle{
    transform:scale(1.13) translateY(-10px) rotate(-2.5deg);
    filter:drop-shadow(0 26px 26px rgba(0,0,0,.55));
  }
  @media (prefers-reduced-motion:reduce){
    .bottle,.beer-card{transition:none;}
    .beer-card:hover .bottle,.beer-card:focus-within .bottle{transform:none;}
  }
  .cat-badge{
    position:absolute;left:50%;top:2px;transform:translate(-50%,-8px);
    background:var(--accent);color:#0E1A12;font-family:'Space Mono',monospace;
    font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    padding:.34rem .78rem;border-radius:999px;white-space:nowrap;z-index:3;
    opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;
  }
  .beer-card.stout .cat-badge{color:#fff;}
  .beer-card:hover .cat-badge,.beer-card:focus-within .cat-badge{opacity:1;transform:translate(-50%,0);}

  .beer-card h3{position:relative;z-index:1;font-size:1.22rem;margin-bottom:.4rem;}
  .beer-card p{position:relative;z-index:1;font-size:.85rem;color:var(--texto-suave);margin-bottom:.9rem;}
  .beer-meta{
    position:relative;z-index:1;display:flex;justify-content:center;gap:1rem;
    font-family:'Space Mono',monospace;font-size:.7rem;color:var(--accent);
  }

  /* ---- Carrusel de fotos ---- */
  #fotos{background:var(--crema-dim);}
  #fotos .eyebrow{color:var(--scottish);}
  .carrusel{
    position:relative;overflow:hidden;max-width:1180px;margin:0 auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .carrusel .pista{
    display:flex;gap:1.2rem;width:max-content;
    animation:desliza 42s linear infinite;
  }
  .carrusel:hover .pista,
  .carrusel:focus-within .pista{animation-play-state:paused;}
  @keyframes desliza{
    from{transform:translateX(0);}
    to{transform:translateX(calc(-50% - 0.6rem));}
  }
  .slide{
    flex:0 0 auto;
    width:calc((1180px - 2.4rem) / 3);
    max-width:34vw;
    aspect-ratio:1 / 1;
    border-radius:14px;overflow:hidden;margin:0;
    background:var(--verde-medio);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
  }
  .slide img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .5s ease;}
  .slide:hover img{transform:scale(1.06);}
  @media (max-width:768px){
    .slide{width:44vw;max-width:44vw;}
    .carrusel .pista{gap:.8rem;animation-duration:34s;}
  }
  @media (max-width:520px){
    .slide{width:68vw;max-width:68vw;}
  }
  @media (prefers-reduced-motion:reduce){
    .carrusel{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .carrusel .pista{animation:none;}
    .slide img{transition:none;}
  }

  /* ---- Eventos ---- */
  #eventos{background:var(--scottish);color:#fff;}
  #eventos .eyebrow{color:#F7E6C4;}
  .ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);max-width:1180px;margin:0 auto;align-items:start;}
  @media (max-width:880px){.ev-grid{grid-template-columns:1fr;}}
  .ev-list{list-style:none;display:flex;flex-direction:column;gap:1.15rem;margin-top:1.4rem;}
  .ev-list li{display:flex;gap:.85rem;font-size:.95rem;}
  .ev-list li strong{display:block;font-family:'Fraunces',serif;font-size:1.03rem;margin-bottom:.1rem;}
  .ev-list .dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--golden);margin-top:.5rem;}
  .ev-form{
    background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.28);
    border-radius:14px;padding:clamp(1.3rem,3vw,2rem);
  }
  .ev-form h3{font-size:1.25rem;margin-bottom:.35rem;}
  .ev-form .mail{
    font-family:'Space Mono',monospace;font-size:.78rem;color:#F7E6C4;margin-bottom:1.2rem;display:block;
  }

  /* ---- Campos de formulario ---- */
  .field{margin-bottom:1rem;}
  .field label{
    display:block;font-family:'Space Mono',monospace;font-size:.67rem;letter-spacing:.11em;
    text-transform:uppercase;margin-bottom:.35rem;
  }
  .field input,.field textarea,.field select{
    width:100%;padding:.8rem .85rem;font-family:'Work Sans',sans-serif;font-size:.94rem;
    border-radius:8px;border:1px solid rgba(0,0,0,.18);background:#fff;color:var(--texto-oscuro);
  }
  .ev-form .field input,.ev-form .field textarea,.ev-form .field select{
    background:rgba(255,255,255,.95);border-color:transparent;
  }
  .field input:focus,.field textarea:focus,.field select:focus{
    outline:3px solid var(--golden);outline-offset:1px;
  }
  .form-note{font-size:.76rem;opacity:.8;margin-top:.7rem;}

  /* ---- Visítanos ---- */
  #visitanos{background:var(--crema-dim);}
  #visitanos .eyebrow{color:var(--ipa);}
  .map-wrap{
    display:grid;grid-template-columns:.85fr 1.15fr;
    max-width:1180px;margin:0 auto;border-radius:14px;overflow:hidden;
    box-shadow:0 16px 36px rgba(0,0,0,.13);
  }
  @media (max-width:880px){.map-wrap{grid-template-columns:1fr;}}
  .map-info{background:var(--ipa);color:#fff;padding:clamp(1.6rem,3vw,2.4rem);}
  .map-info h3{font-size:1.28rem;margin-bottom:.7rem;}
  .map-info ul{list-style:none;margin:1.1rem 0 1.5rem;}
  .map-info li{font-size:.9rem;color:#E4EEE4;margin-bottom:.65rem;padding-left:1.15rem;position:relative;}
  .map-info li::before{content:"—";position:absolute;left:0;color:var(--golden);}
  iframe{width:100%;height:100%;min-height:390px;border:0;display:block;}

  /* ---- Contacto ---- */
  #contacto{background:var(--crema);}
  #contacto .eyebrow{color:var(--scottish);}
  .contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);max-width:1180px;margin:0 auto;}
  @media (max-width:880px){.contacto-grid{grid-template-columns:1fr;}}
  .contacto-info .item{display:flex;gap:.95rem;margin-bottom:1.5rem;}
  .contacto-info .item svg{width:24px;height:24px;flex-shrink:0;color:var(--ipa);}
  .contacto-info h3{font-size:.99rem;margin-bottom:.12rem;}
  .contacto-info p{font-size:.9rem;color:#4C5349;}
  .contacto-info a:hover{color:var(--scottish);text-decoration:underline;}

  /* ---- Footer ---- */
  footer{background:var(--stout);color:var(--texto-claro);padding:2.8rem clamp(1.2rem,6vw,4rem) 1.6rem;}
  .footer-grid{
    display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem;
    max-width:1180px;margin:0 auto;padding-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.15);
  }
  .footer-logo{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
  .footer-logo img{height:74px;width:auto;}
  .footer-logo .logo-sep{width:1px;height:52px;background:rgba(255,255,255,.22);}
  .footer-logo .aliado img{transition:opacity .25s ease,transform .25s ease;opacity:.9;}
  .footer-logo .aliado:hover img{opacity:1;transform:translateY(-2px);}
  .footer-links{display:flex;gap:clamp(1.6rem,4vw,3rem);flex-wrap:wrap;}
  .footer-links h4{
    font-family:'Space Mono',monospace;font-size:.67rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--golden);margin-bottom:.6rem;
  }
  .footer-links a,.footer-links p{display:block;font-size:.86rem;color:#CFCCC0;margin-bottom:.35rem;}
  .footer-links a:hover{color:var(--golden);}
  .footer-bottom{
    max-width:1180px;margin:0 auto;padding-top:1.3rem;display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:.5rem;font-size:.74rem;color:#8F8C82;font-family:'Space Mono',monospace;
  }
  .legal{font-size:.72rem;color:#8F8C82;margin-top:.7rem;}


  /* ================= RESPONSIVE ================= */
  img,svg,iframe{max-width:100%;}
  body{overflow-x:hidden;}

  /* Tablet */
  @media (max-width:1024px){
    .hero-inner{gap:2rem;}
    .beer-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem;}
  }

  /* Móvil grande / tablet vertical */
  @media (max-width:768px){
    header{padding:.5rem 1rem;}
    .logo img{height:50px;}
    .hero{padding:6rem 1.2rem 4rem;min-height:auto;}
    .hero-inner{flex-direction:column;text-align:center;align-items:center;}
    .hero p{margin-left:auto;margin-right:auto;}
    .hero-ctas{justify-content:center;}
    .scroll-hint{display:none;}
    section{padding:3rem 1.2rem;}
    .section-head{margin-bottom:2rem;}
    .beer-grid{grid-template-columns:repeat(2,1fr);gap:1rem;}
    .beer-card{padding:1.2rem .9rem 1.1rem;}
    .beer-card h3{font-size:1.08rem;}
    .beer-card p{font-size:.8rem;}
    .map-info{padding:1.5rem 1.3rem;}
    iframe{min-height:300px;}
    .footer-grid{flex-direction:column;align-items:flex-start;gap:1.5rem;}
    .footer-logo img{height:58px;}
    .footer-logo{gap:1rem;}
    .footer-bottom{flex-direction:column;gap:.35rem;}
  }

  /* Móvil */
  @media (max-width:520px){
    .beer-grid{grid-template-columns:1fr;max-width:300px;}
    .bottle-stage{height:220px;}
    .hero h1{font-size:2.05rem;}
    .hero p{font-size:.97rem;}
    .btn{width:100%;justify-content:center;padding:.85rem 1.2rem;}
    .hero-ctas{width:100%;flex-direction:column;}
    .seal{flex-direction:column;text-align:center;gap:.7rem;}
    .ev-list li{font-size:.9rem;}
    .footer-links{gap:1.6rem;}
  }

  /* Móvil chico (320px) */
  @media (max-width:360px){
    section{padding:2.4rem 1rem;}
    .hero{padding:5.5rem 1rem 3rem;}
    .hero h1{font-size:1.8rem;}
    .logo img{height:44px;}
    .beer-card{padding:1rem .8rem;}
  }

  /* Pantallas grandes */
  @media (min-width:1600px){
    .wrap,.somos-grid,.beer-grid,.ev-grid,.map-wrap,.contacto-grid,
    .footer-grid,.footer-bottom,.hero-inner{max-width:1320px;}
  }

  /* Áreas táctiles mínimas */
  @media (pointer:coarse){
    nav a,.footer-links a,.contacto-info a{display:inline-block;min-height:44px;line-height:2.6;}
    .btn{min-height:48px;}
    /* en táctil no hay hover: la categoría se muestra siempre */
    .cat-badge{opacity:1;transform:translate(-50%,0);}
  }

  /* ---- Accesibilidad ---- */
  .skip{
    position:absolute;left:-9999px;top:0;background:var(--golden);color:#000;
    padding:.7rem 1.1rem;z-index:200;border-radius:0 0 8px 0;
  }
  .skip:focus{left:0;}
  :focus-visible{outline:3px solid var(--golden);outline-offset:2px;}