/* ============================================================
   Avocado Country Colombia — caso de estudio
   Ballestastudio · 2026
   La paleta sale del propio empaque: blanco de fondo, verde del
   sello, y nada mas. Es la misma decision de diseno del proyecto.
   ============================================================ */

:root{
  --verde:        #3f6b23;
  --verde-claro:  #6d9a3f;
  --verde-oscuro: #244014;
  --tinta:        #1c1c1a;
  --tinta-suave:  #5f5f58;
  --papel:        #ffffff;
  --papel-tibio:  #f7f6f2;
  --linea:        #e4e2da;

  --ancho:        1180px;
  --ancho-texto:  62ch;
  --radio:        14px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* El aire entre secciones. Contenido, no generoso: la pagina ya es
     blanca, y el blanco de mas se lee como vacio, no como respiro. */
  --paso: clamp(3rem, 5.5vw, 5rem);

  /* ---- Contrato que consume base.css. Mismos valores, nombres compartidos. */
  --papel-alt:     var(--papel-tibio);
  --texto:         var(--tinta-suave);
  --texto-tenue:   var(--tinta-suave);
  --acento:        var(--verde);
  --acento-fuerte: var(--verde-oscuro);
  --borde:         var(--linea);
  --borde-fuerte:  var(--linea);
  --ui:            var(--sans);
  --label:         var(--sans);
  --paso-1: .5rem;
  --paso-2: 1rem;
  --paso-3: 1.6rem;
  --paso-4: clamp(2.2rem, 4vw, 3rem);
  --paso-5: var(--paso);
  --r-sm: 8px;
  --r-md: var(--radio);
  --curva: cubic-bezier(.16, 1, .3, 1);
}



body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height:1.65;
  overflow-x:hidden;
}


a{ color:var(--verde); text-underline-offset:.22em; text-decoration-thickness:1px; }
a:hover{ color:var(--verde-oscuro); }


.saltar{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--verde); color:#fff; padding:.7rem 1.2rem;
  border-radius:0 0 var(--radio) 0; text-decoration:none;
}
.saltar:focus{ left:0; color:#fff; }

/* ── tipografia ─────────────────────────────────────────── */

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.015em; margin:0; }

h1{ font-size:clamp(2.9rem, 8vw, 5.6rem); font-style:italic; }

/* La palabra clave de cada titulo va en verde. Es <em> por semantica
   —enfasis real, no adorno— y se le quita la italica heredada para que
   solo cambie el color y no la forma de la letra. */
.acento{ color:var(--verde); font-style:inherit; }

h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); margin-bottom:1.1rem; }

h3{ font-family:var(--sans); font-size:1rem; font-weight:650;
    letter-spacing:.04em; text-transform:uppercase; margin-bottom:.5rem; }

p{ margin:0 0 1.15rem; max-width:var(--ancho-texto); }
p:last-child{ margin-bottom:0; }

strong{ font-weight:640; color:var(--verde-oscuro); }

/* Va en --verde y no en --verde-claro: el claro da 3,31:1 sobre blanco y
   esto es texto chico, que necesita 4,5:1. El verde oscuro da 6,29:1. */
.sobretitulo{
  font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin-bottom:1.4rem;
}

/* ── hero ───────────────────────────────────────────────── */

.hero{
  max-width:var(--ancho); margin-inline:auto;
  padding:clamp(1.1rem,2vw,1.5rem) 1.5rem clamp(2.5rem,4vw,3.5rem);
  display:grid;
  /* Separado en dos: la columna necesita aire entre texto e imagen, pero
     la fila del logo no: ese hueco es el que bajaba todo el bloque. */
  column-gap:clamp(1.5rem,3vw,3rem);
  row-gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero{
    grid-template-columns:1.15fr .85fr;
    padding-top:clamp(1.4rem,2.5vw,2rem);
    padding-bottom:clamp(2.5rem,4.5vw,4.5rem);
  }
}

/* La marca ocupa la fila completa arriba del hero. Va aqui y no en un
   <header> aparte para aprovechar el aire que ya tenia el padding: la
   altura total de la portada practicamente no cambia. */
.marca{
  grid-column:1 / -1; justify-self:start;
  display:block; line-height:0;
  opacity:.9; transition:opacity .25s ease;
}
.marca:hover{ opacity:1; }
/* Es firma, no titular: se queda chico a proposito. */
.marca img{ width:clamp(98px,10vw,124px); height:auto; }

.entrada{
  font-size:clamp(1.06rem,1.4vw,1.22rem); line-height:1.55;
  color:var(--tinta-suave); margin-top:1.3rem;
}

.hero__imagen{ margin:0; will-change:transform; }
/* El aceite es vertical: se le pone techo para que no empuje el hero
   a dos pantallas de alto en escritorio. */
.hero__imagen img{
  margin-inline:auto; width:auto;
  max-height:clamp(320px,52vh,480px); object-fit:contain;
}

/* Las cuatro columnas van FIJAS, no auto-fit: con auto-fit «Entregables»
   se caia a una segunda fila apenas el hero se angostaba. minmax(0,1fr)
   deja que el texto largo se parta dentro de su celda en vez de empujar
   la reticula. */
.ficha{
  margin:1.9rem 0 0; padding-top:1.3rem; border-top:1px solid var(--linea);
  display:grid; gap:1.1rem 1.4rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:560px){
  .ficha{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.ficha div{ margin:0; min-width:0; }
.ficha dt{
  font-size:.68rem; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  color:var(--verde); margin-bottom:.3rem;   /* contraste, ver .sobretitulo */
}
.ficha dd{ margin:0; font-size:.86rem; line-height:1.4; overflow-wrap:break-word; }

/* ── secciones ──────────────────────────────────────────── */

.seccion{
  max-width:var(--ancho); margin-inline:auto;
  padding:var(--paso) 1.5rem;
  border-top:1px solid var(--linea);
}

.seccion__cabeza{ margin-bottom:clamp(1.8rem,3vw,2.6rem); }

/* Sabores: texto a la izquierda, el trio de envases a la derecha. */
.sabores__cabeza{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1fr; align-items:center;
  margin-bottom:clamp(1.5rem,3vw,2.4rem);
}
@media (min-width:900px){
  /* La columna de la imagen se estrecha: el trio de envases se veia
     desproporcionado frente al texto. */
  .sabores__cabeza{ grid-template-columns:1.15fr .85fr; }
}
.sabores__texto p{
  font-size:clamp(1.08rem,1.5vw,1.22rem); line-height:1.6;
  color:var(--tinta-suave); margin-top:1.2rem;
}

.sabores__apertura{
  margin:0 0 0 auto;
  background:var(--papel-tibio); border-radius:var(--radio);
  padding:clamp(.9rem,1.6vw,1.2rem);
  display:flex; justify-content:center;
  max-width:460px; width:100%;
}
.sabores__apertura img{ width:100%; height:auto; }

/* La decision: titulo y primer parrafo a un lado, el segundo al otro. */
.decision__cabeza{
  display:grid; gap:clamp(1.2rem,3vw,3rem);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:900px){
  .decision__cabeza{ grid-template-columns:1fr 1fr; }
  /* El segundo bloque baja a la altura del primer parrafo, no del titulo */
  .decision__der{ padding-top:.4rem; }
}
.decision__izq p,
.decision__der p{ max-width:46ch; }
.decision__der p{ color:var(--tinta-suave); }
.seccion__cabeza p{ font-size:1.08rem; color:var(--tinta-suave); }

.col-texto{ max-width:var(--ancho-texto); }

.pie-seccion{
  margin-top:1.6rem; font-size:.95rem; color:var(--tinta-suave);
  max-width:var(--ancho-texto);
}

/* encargo: texto + nota al costado */
@media (min-width:900px){
  .seccion--texto{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
}
.nota{
  background:var(--papel-tibio); border-left:3px solid var(--verde-claro);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:1.6rem 1.7rem; margin-top:2rem;
}
@media (min-width:900px){ .nota{ margin-top:.6rem; } }
.nota h3{ color:var(--verde); }
.nota p{ font-size:.97rem; color:var(--tinta-suave); }

/* tarjetas de decision */
.tarjetas{
  margin-top:clamp(1.8rem,3vw,2.4rem);
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.tarjeta{
  padding:1.4rem 1.35rem; border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--papel);
  transition:border-color .35s ease, transform .35s ease;
}
.tarjeta:hover{ border-color:var(--verde-claro); }
.tarjeta h3{ color:var(--verde); }
.tarjeta p{ font-size:.95rem; color:var(--tinta-suave); margin:0; }

/* ── rejilla de productos ───────────────────────────────── */

/* Son NUEVE productos. Con auto-fit quedaban 4+4+1 y el ultimo se veia
   huerfano en una fila vacia. Fijar las columnas en 2 y luego 3 da
   filas exactas: 3+3+3 en escritorio. */
.rejilla-productos{
  display:grid; gap:clamp(1.1rem,2vw,1.6rem);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){
  .rejilla-productos{ grid-template-columns:repeat(3,1fr); }
}

.producto{
  margin:0; padding:1.5rem 1.1rem 1.2rem;
  background:var(--papel-tibio); border-radius:var(--radio);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:background .4s ease;
}
.producto:hover{ background:#f1efe8; }

.producto img{
  height:clamp(160px,20vw,215px); width:auto; object-fit:contain;
  margin-bottom:1rem;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.producto:hover img{ transform:translateY(-4px); }

.producto figcaption{ display:flex; flex-direction:column; gap:.25rem; }
.producto figcaption b{ font-size:1.02rem; font-weight:640; }
.producto figcaption span{ font-size:.83rem; color:var(--tinta-suave); }

/* ── tira de sabores ────────────────────────────────────── */

/* ── carrusel de sabores ────────────────────────────────── */

.carrusel{
  overflow-x:auto; padding:.5rem 0 1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--linea) transparent;
  /* mascara: los envases se desvanecen en los bordes en vez de cortarse
     de golpe, que es lo que delata que hay un bucle detras */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* Con JS el bucle es continuo y no hace falta barra de scroll */
.js .carrusel{ overflow:hidden; }

.carrusel__pista{
  display:flex; gap:clamp(1.2rem,3vw,2.4rem); align-items:flex-end;
  width:max-content;
}
.js .carrusel__pista{ animation:desfilar var(--dur,45s) linear infinite; }

/* El bucle mueve exactamente la mitad de la pista, que es una copia
   idéntica de la otra mitad: al llegar al 50% el salto es invisible. */
@keyframes desfilar{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* Se detiene al pasar el cursor o al llegar con el teclado: nadie
   deberia tener que perseguir una imagen para verla. */
.js .carrusel:hover .carrusel__pista,
.js .carrusel:focus-within .carrusel__pista{ animation-play-state:paused; }

.carrusel__pieza{ margin:0; flex:0 0 auto; text-align:center; }
.carrusel__pieza img{
  height:clamp(200px,24vw,290px); width:auto; object-fit:contain;
  margin-inline:auto; margin-bottom:.8rem;
}
.carrusel__pieza figcaption{ font-size:.82rem; color:var(--tinta-suave); }

/* Movimiento reducido: el carrusel se queda quieto y vuelve a ser una
   fila que el usuario recorre a su ritmo. */
@media (prefers-reduced-motion:reduce){
  .js .carrusel{ overflow-x:auto; }
  .js .carrusel__pista{ animation:none; }
}

/* ── etiquetas ──────────────────────────────────────────── */

@media (min-width:900px){
  .seccion--etiquetas{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
}
/* ── visor de etiquetas ─────────────────────────────────── */

.visor{
  margin-top:2rem;
  display:grid; gap:1rem;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:760px){
  .visor{ grid-template-columns:1fr auto; gap:1.4rem; margin-top:0; }
}

.visor__marco{
  position:relative;
  background:var(--papel-tibio); border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(1rem,2.5vw,1.8rem);
}
/* La altura fija solo aplica con JS: evita que la casilla salte de tamano
   al cambiar de etiqueta, porque los troqueles no son del mismo formato. */
.js .visor__marco{
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(300px,40vw,420px);
}

/* Sin JS las diez laminas se ven una debajo de otra: peor, pero completo.
   Solo cuando hay JS se colapsan a una sola casilla. La clase .js la pone
   un script inline antes de pintar, asi que no hay parpadeo. */
.visor__lamina{ margin:0; text-align:center; }
.js .visor__lamina{ display:none; }
.js .visor__lamina.activa{ display:block; }
.visor__lamina + .visor__lamina{ margin-top:1.5rem; }
.js .visor__lamina + .visor__lamina{ margin-top:0; }
.visor__lamina img{
  max-height:clamp(220px,34vw,340px); width:auto; margin-inline:auto;
  background:#fff; border:1px solid var(--linea); border-radius:6px;
}
.visor__lamina figcaption{
  margin-top:.85rem; font-size:.82rem; color:var(--tinta-suave);
}

/* Al cambiar de lamina solo se funde la opacidad. Mover o escalar aqui
   distrae de lo unico que importa, que es comparar los artes. */
.js .visor__lamina.entrando img{ animation:fundir .35s ease both; }
@keyframes fundir{ from{ opacity:0 } to{ opacity:1 } }

.visor__pestanas{
  display:flex; flex-wrap:wrap; gap:.4rem;
  align-content:flex-start;
}
@media (min-width:760px){
  .visor__pestanas{ flex-direction:column; flex-wrap:nowrap; width:11.5rem; }
}
.visor__pestanas button{
  font:inherit; font-size:.82rem; text-align:left;
  padding:.5rem .8rem; cursor:pointer;
  background:transparent; color:var(--tinta-suave);
  border:1px solid var(--linea); border-radius:999px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
@media (min-width:760px){
  .visor__pestanas button{ border-radius:8px; }
}
.visor__pestanas button:hover{ border-color:var(--verde-claro); color:var(--verde-oscuro); }
.visor__pestanas button[aria-current="true"]{
  background:var(--verde); border-color:var(--verde); color:#fff; font-weight:600;
}

/* ── catalogo ───────────────────────────────────────────── */

.portadas{
  display:grid; gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.portadas figure{ margin:0; }
.portadas img{
  border-radius:var(--radio); border:1px solid var(--linea);
  margin-bottom:.7rem;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.portadas figure:hover img{
  transform:translateY(-3px);
  box-shadow:0 12px 28px -18px rgba(28,28,26,.42);
}
.portadas figcaption{
  font-size:.85rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--verde);
}

.paginas{
  margin-top:clamp(1.5rem,3vw,2.4rem);
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
}
@media (min-width:820px){ .paginas{ grid-template-columns:1fr 1fr; } }
.paginas figure{ margin:0; }
.paginas img{ border-radius:var(--radio); border:1px solid var(--linea); margin-bottom:.8rem; }
.paginas figcaption{ font-size:.9rem; color:var(--tinta-suave); }

/* ── cierre ─────────────────────────────────────────────── */

@media (min-width:900px){
  .seccion--cierre{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
}
.cierre__imagen{ margin:2.5rem 0 0; }
@media (min-width:900px){ .cierre__imagen{ margin:0; } }

/* ── pie ────────────────────────────────────────────────── */

/* ── llamado a la accion ────────────────────────────────── */

.cierre{
  background:var(--papel-tibio); border-top:1px solid var(--linea);
  padding:clamp(3rem,6vw,5rem) 1.5rem;
}
.cierre__caja{ max-width:var(--ancho); margin-inline:auto; text-align:center; }
.cierre__caja .sobretitulo{ margin-bottom:.9rem; }
.cierre__texto{
  margin:1rem auto 0; max-width:56ch;
  font-size:1.04rem; color:var(--tinta-suave);
}
.cierre__acciones{
  margin-top:2rem; display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
}
.cierre__pie{
  margin:1.6rem auto 0; font-size:.86rem; color:var(--tinta-suave); max-width:none;
}

/* ── botones ────────────────────────────────────────────── */

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem; border:1px solid transparent; border-radius:999px;
  font-size:.95rem; font-weight:640; text-decoration:none; cursor:pointer;
  transition:background-color .25s ease, color .25s ease,
             border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.boton .ico{ flex:0 0 auto; }

.boton--solido{
  background:var(--verde); color:#fff;
  box-shadow:0 4px 14px rgba(63,107,35,.26);
}
.boton--solido:hover{
  background:var(--verde-oscuro); color:#fff;
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(63,107,35,.32);
}
.boton--linea{
  background:var(--papel); border-color:var(--linea); color:var(--tinta);
}
.boton--linea:hover{
  border-color:var(--verde); color:var(--verde-oscuro); transform:translateY(-2px);
}

/* ── pie ────────────────────────────────────────────────── */



/* Filete con la marca partiendo la linea */



/* ── animaciones de entrada ─────────────────────────────── */

/* Ojo con el selector: se esconde SOLO si .js esta en <html>, que lo pone
   un script inline en el head. Si el JS falla o esta bloqueado, nada se
   oculta y la pagina se lee entera. Una animacion no puede ser el motivo
   por el que alguien vea una pantalla en blanco. */
/* Minimalista de verdad: 10 px de recorrido, curva sin rebote y escalona
   corto. La entrada tiene que sentirse como que el contenido "asienta",
   no como que entra volando. */
.js [data-anim]{
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease,
             transform .6s cubic-bezier(.33,.1,.25,1);
  transition-delay:calc(var(--retraso,0) * 65ms);
}
.js [data-anim].visible{ opacity:1; transform:none; }

/* Quien pidio menos movimiento lo ve todo, quieto y de una. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-anim]{ opacity:1; transform:none; }
}