/* ============================================================
   Amanecer Coffee — Landing
   Identidad segun "Manual de marca.pdf"
   Bagnard (titulares) / Chillax (texto)
   #054922 verde · #C93517 rojo · #F7F7E3 crema · #fea621 ambar
   ============================================================ */

/* ---------- Tipografias ---------- */
@font-face{font-family:'Bagnard';src:url('../fonts/Bagnard.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chillax';src:url('../fonts/Chillax-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Chillax';src:url('../fonts/Chillax-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Chillax';src:url('../fonts/Chillax-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Chillax';src:url('../fonts/Chillax-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Chillax';src:url('../fonts/Chillax-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --verde:#054922;
  --verde-alto:#0a5c2d;
  --verde-hondo:#03361a;
  --rojo:#C93517;
  --crema:#F7F7E3;
  --crema-2:#efeedb;
  --ambar:#fea621;
  --tinta:#12281c;

  --v-10:rgba(5,73,34,.10);
  --v-16:rgba(5,73,34,.16);
  --v-55:rgba(5,73,34,.75);
  --v-70:rgba(5,73,34,.80);
  --c-14:rgba(247,247,227,.14);
  --c-24:rgba(247,247,227,.24);
  --c-60:rgba(247,247,227,.60);
  --c-78:rgba(247,247,227,.86);

  --serif:'Bagnard','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Chillax',ui-rounded,'Avenir Next','Segoe UI',system-ui,sans-serif;

  --pad:clamp(1.15rem,5vw,4.5rem);
  --maxw:1280px;
  --sec:clamp(4.5rem,9vw,8.5rem);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;background:var(--crema);color:var(--verde);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;line-height:1.03}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ambar);color:var(--verde)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.serif{font-family:var(--serif)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--verde);color:var(--crema);padding:.7rem 1.1rem}
.skip:focus{left:.6rem;top:.6rem}
:focus-visible{outline:2.5px solid var(--ambar);outline-offset:3px;border-radius:4px}

/* ---------- Tipografia de bloque ---------- */
.h2{font-size:clamp(2rem,1.35rem + 2.1vw,3.35rem);letter-spacing:-.012em;text-wrap:balance}
.sec__head .h2{font-size:clamp(2.1rem,1.25rem + 3.3vw,4.05rem)}
.hero__h1{font-size:clamp(2.35rem,1.5rem + 3vw,3.95rem);letter-spacing:-.016em}

.eyebrow{
  font-size:.735rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--v-55);margin-bottom:1.15rem;
}
.eyebrow--light{color:var(--c-60)}

.lead{font-size:clamp(1.06rem,1rem + .32vw,1.22rem);color:var(--v-70);max-width:52ch;font-weight:300}
.lead--light{color:var(--c-78)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.6rem;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:.95rem;letter-spacing:.005em;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--amb{background:var(--ambar);color:var(--verde)}
.btn--amb:hover{background:#ffb845}
.btn--verde{background:var(--verde);color:var(--crema)}
.btn--verde:hover{background:var(--verde-alto)}
.btn--ghost{border-color:var(--v-16);color:var(--verde)}
.btn--ghost:hover{border-color:var(--verde);background:var(--verde);color:var(--crema)}
.btn--sm{padding:.6rem 1.1rem;font-size:.86rem}
.btn--full{width:100%;padding-block:1.05rem}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(247,247,227,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--v-10)}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--verde)}
.brand__mark{flex:none}
.brand__txt{font-size:1.16rem;letter-spacing:.005em}

.menu{display:flex;align-items:center;gap:1.7rem}
.menu a:not(.btn){
  font-size:.94rem;font-weight:500;color:var(--v-70);position:relative;padding-block:.2rem;
}
.menu a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--verde);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.menu a:not(.btn):hover{color:var(--verde)}
.menu a:not(.btn):hover::after{transform:scaleX(1)}

.burger{display:none;background:none;border:0;padding:.55rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--verde);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{
  display:grid;grid-template-columns:1fr 43%;align-items:center;gap:clamp(2rem,4vw,4.5rem);
  max-width:var(--maxw);margin-inline:auto;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,5vw,5rem);
  padding-left:var(--pad);
}
.hero__txt{max-width:38rem;padding-block:1rem}
.hero__lead{
  margin-top:1.5rem;font-size:clamp(1.06rem,1rem + .4vw,1.26rem);
  color:var(--v-70);font-weight:300;max-width:44ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}

.hero__facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  margin-top:2.8rem;padding-top:1.7rem;border-top:1px solid var(--v-16);
}
.hero__facts li{display:flex;flex-direction:column;gap:.15rem}
.hero__facts strong{font-family:var(--serif);font-weight:400;font-size:1.16rem}
.hero__facts span{font-size:.815rem;line-height:1.4;color:var(--v-55)}

.hero__img{position:relative;align-self:stretch;min-height:min(78vh,660px)}
.hero__img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%;
  border-radius:var(--r) 0 0 var(--r);
}

/* ============ FRANJA ============ */
.strip{
  background:var(--verde);color:var(--crema);overflow:hidden;
  padding:.85rem 0;user-select:none;
}
.strip__run{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:desliza 46s linear infinite;
}
.strip__run span{
  font-size:.78rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
}
.strip__run i{width:5px;height:5px;border-radius:50%;background:var(--ambar);flex:none}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SECCIONES ============ */
.sec{padding-block:var(--sec);position:relative}
.sec--dark{background:var(--verde);color:var(--crema)}
.sec--dark .h2{color:var(--crema)}
.sec--gal{padding-bottom:calc(var(--sec) * .55)}

.sec__head{max-width:44rem;margin-bottom:clamp(2.5rem,4vw,3.8rem)}
.sec__head--center{margin-inline:auto;text-align:center}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.grid2--gap{gap:clamp(1.2rem,2.4vw,2rem);align-items:stretch}
.grid2--flip .col-txt{order:2}
.grid2--flip .col-img{order:1}
.grid2--form{align-items:start;gap:clamp(2rem,5vw,4.5rem)}
.col-txt{max-width:36rem}

/* listas con marca */
.ticks{display:grid;gap:1.05rem;margin-top:2rem}
.ticks li{position:relative;padding-left:1.85rem;font-size:1rem;color:var(--v-70);font-weight:300}
.ticks li b{font-weight:600;color:var(--verde)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--ambar);
}
.ticks--light li{color:var(--c-78)}
.ticks--light li b{color:var(--crema)}

/* figuras */
.fig{margin:0;overflow:hidden;border-radius:var(--r);background:var(--v-10)}
.fig img{width:100%;height:100%;object-fit:cover}
.col-img{display:grid;gap:1rem;grid-template-columns:1.25fr 1fr;align-items:end}
.fig--tall{aspect-ratio:3/4.1}
.fig--wide{aspect-ratio:1/1}

.bleed{margin:clamp(3rem,5vw,4.5rem) 0 0;border-radius:var(--r);overflow:hidden}
.bleed img{width:100%;aspect-ratio:16/8;object-fit:cover}
.bleed--full{margin-top:var(--sec);border-radius:0}
.bleed--full img{aspect-ratio:16/6.6}

/* tarjetas de autonomia */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.card{
  background:var(--c-14);border:1px solid var(--c-24);border-radius:var(--r);
  padding:clamp(1.5rem,2.4vw,2.2rem);display:flex;flex-direction:column;gap:.85rem;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.card:hover{transform:translateY(-4px);background:rgba(247,247,227,.19)}
.card__n{font-family:var(--serif);font-size:.95rem;color:var(--ambar);letter-spacing:.08em}
.card__h{font-size:clamp(1.45rem,1.2rem + .7vw,1.85rem)}
.card p{color:var(--c-78);font-size:.985rem;font-weight:300}

/* paneles de eventos */
.paneles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch}
.panel{border-radius:var(--r);padding:clamp(1.7rem,3vw,2.6rem)}
.panel--crema{background:var(--crema-2);border:1px solid var(--v-10)}
.panel--verde{background:var(--verde);color:var(--crema)}
.panel__h{font-size:clamp(1.4rem,1.2rem + .6vw,1.75rem)}
.panel .ticks{margin-top:1.5rem}

/* condiciones */
.terms{
  margin-top:clamp(1.2rem,2.4vw,2rem);padding:clamp(1.7rem,3vw,2.6rem);
  border:1px solid var(--v-16);border-radius:var(--r);
  display:grid;gap:1.6rem;
}
.terms__h{
  margin:0;font-size:.735rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--v-55);
}
.terms__list{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.35rem}
.terms__list div{display:grid;gap:.28rem}
.terms__list dt{font-weight:600;font-size:.9rem}
.terms__list dd{margin:0;font-size:.93rem;color:var(--v-70);font-weight:300;line-height:1.5}
.terms__cierre{max-width:52ch;color:var(--v-70);font-weight:300}
.terms .btn{justify-self:start}

/* galeria */
.gal{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(8.5rem,14.5vw,15rem);gap:.75rem;
  padding-inline:clamp(.75rem,2vw,1.5rem);
}
.gal figure{margin:0;height:100%;overflow:hidden;border-radius:10px;background:var(--v-10)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.045)}
/* la vertical ocupa dos filas; las horizontales, una. Asi no queda ningun hueco. */
.gal figure:nth-child(1){grid-column:1;grid-row:1 / span 2}
.gal figure:nth-child(6){grid-column:1 / span 2;grid-row:3}
.gal figure:nth-child(7){grid-column:3;grid-row:3}

/* franja de reparto */
.banda{background:var(--crema-2);border-top:1px solid var(--v-10);padding-block:clamp(3rem,5vw,4.5rem)}
.banda__in{display:grid;grid-template-columns:1fr .8fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.banda__h{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);letter-spacing:-.01em;text-wrap:balance}
.banda__p{margin:1rem 0 1.8rem;color:var(--v-70);font-weight:300;max-width:46ch}
.banda__foto{margin:0;border-radius:var(--r);overflow:hidden}
.banda__foto img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* testimonio */
.sec--quote{padding-block:clamp(3.5rem,6vw,6rem);text-align:center;background:var(--crema-2)}
.quote__mark{margin:0 auto 1.4rem;color:var(--verde)}
.quote{
  margin:0 auto;max-width:22ch;
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem);line-height:1.16;letter-spacing:-.01em;
}
.quote__by{margin-top:1.3rem;font-size:.85rem;color:var(--v-55);letter-spacing:.04em}

/* contacto */
.contact{display:grid;gap:1.15rem;margin-top:2.3rem;padding-top:1.9rem;border-top:1px solid var(--v-16)}
.contact li{display:grid;gap:.15rem}
.contact__k{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v-55)}
.contact a{border-bottom:1px solid var(--v-16);width:fit-content;transition:border-color .25s}
.contact a:hover{border-bottom-color:var(--verde)}
.contact li span:not(.contact__k){color:var(--v-70);font-weight:300;font-size:.95rem}

.form{
  background:var(--crema-2);border:1px solid var(--v-10);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.4rem);display:grid;gap:1.1rem;
}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.f3{display:grid;grid-template-columns:1.1fr 1.2fr .7fr;gap:1.1rem}
.field{display:grid;gap:.42rem;margin:0}
.field label{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--v-55)}
.field label span{color:var(--rojo)}
.field input,.field select,.field textarea{
  width:100%;background:var(--crema);border:1.5px solid var(--v-16);border-radius:9px;
  padding:.78rem .9rem;font-size:.97rem;font-family:inherit;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.field textarea{resize:vertical;min-height:6.5rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--v-55)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--verde);outline:none;background:#fff}
.field input::placeholder,.field textarea::placeholder{color:rgba(5,73,34,.36)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23054922' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:12px;padding-right:2.4rem}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--rojo)}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__msg{font-size:.93rem;font-weight:500;min-height:1.2em}
.form__msg.ok{color:var(--verde)}
.form__msg.bad{color:var(--rojo)}
.form__fine{font-size:.8rem;color:var(--v-55);line-height:1.5;font-weight:300}
.form__fine a{border-bottom:1px solid var(--v-16)}
#enviar[disabled]{opacity:.6;cursor:progress;transform:none}

/* ============ FOOTER ============ */
.foot{background:var(--verde-hondo);color:var(--crema);padding-block:clamp(3rem,5vw,4.5rem)}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;align-items:start}
.foot__mark{color:var(--crema);margin-bottom:1rem}
.foot__name{font-size:1.5rem}
.foot__claim{margin-top:.5rem;color:var(--c-60);font-size:.93rem;font-weight:300;max-width:26ch}
.foot__nav{display:grid;gap:.65rem;align-content:start}
.foot__nav a{font-size:.94rem;color:var(--c-78);width:fit-content;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.foot__nav a:hover{color:var(--crema);border-bottom-color:var(--ambar)}
.foot__legal{display:grid;gap:.45rem;font-size:.86rem;color:var(--c-60);font-weight:300}
.foot__legal a{border-bottom:1px solid var(--c-24)}

/* ============ REVELADO ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.vis{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .cards{grid-template-columns:1fr;gap:1rem}
  .paneles{grid-template-columns:1fr}
  .f3{grid-template-columns:1fr 1fr}
  .foot__in{grid-template-columns:1fr 1fr;gap:2rem}
  .foot__brand{grid-column:1 / -1}
}

@media (max-width:900px){
  .nav__in{padding-block:.7rem}
  .burger{display:block}
  .menu{
    position:absolute;inset:100% 0 auto;background:var(--crema);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad) 1.4rem;
    border-bottom:1px solid var(--v-10);
    display:none;
  }
  .menu.open{display:flex}
  .menu a:not(.btn){padding:.85rem 0;border-bottom:1px solid var(--v-10);font-size:1.02rem}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{margin-top:1rem;justify-content:center}

  .hero{
    grid-template-columns:1fr;padding-right:var(--pad);gap:2.4rem;
    padding-top:2rem;
  }
  .hero__txt{order:2;max-width:none;padding-block:0}
  .hero__img{order:1;min-height:clamp(20rem,62vh,30rem)}
  .hero__img img{border-radius:var(--r);object-position:50% 42%}
  .hero__facts{grid-template-columns:1fr;gap:.9rem;margin-top:2.2rem;padding-top:1.4rem}
  .hero__facts li{flex-direction:row;align-items:baseline;gap:.6rem}
  .hero__facts strong{flex:none;min-width:7.4rem}
  .hero__facts span{font-size:.86rem}

  .grid2,.grid2--gap,.grid2--form{grid-template-columns:1fr;gap:2.6rem}
  .banda__in{grid-template-columns:1fr;gap:2rem}
  .banda__foto{order:-1}
  .grid2--flip .col-txt{order:1}
  .grid2--flip .col-img{order:2}
  .col-txt{max-width:none}
  .col-img{grid-template-columns:1fr 1fr;align-items:stretch}
  .fig--tall,.fig--wide{aspect-ratio:3/4}

  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(8rem,22vw,11rem)}
  .gal figure:nth-child(1){grid-column:1;grid-row:1 / span 2}
  .gal figure:nth-child(6){grid-column:1 / span 2;grid-row:auto}
  .gal figure:nth-child(7){grid-column:1 / span 2;grid-row:auto}

    .bleed--full img{aspect-ratio:16/9}
}

@media (max-width:620px){
  .f2,.f3{grid-template-columns:1fr}
  .hero__cta .btn{flex:1 1 100%}
  .col-img{grid-template-columns:1fr}
  .fig--wide{aspect-ratio:16/10}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(6.5rem,25vw,9rem)}
  .gal figure{grid-row:auto;grid-column:auto;height:100%}
  .gal figure:nth-child(1){grid-column:1;grid-row:1 / span 2}
  .gal figure:nth-child(6),.gal figure:nth-child(7){grid-column:1 / span 2;grid-row:auto}
  .foot__in{grid-template-columns:1fr}
  .quote{max-width:none}
}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .strip__run{animation:none}
}

/* ============ IMPRESION ============ */
@media print{
  .nav,.strip,.hero__cta,.form,.burger{display:none}
  body{background:#fff}
  .sec--dark,.panel--verde,.foot{background:#fff;color:#000}
}