/* ============================================================================
   Landing de Comercial Fratelli
   ========================================================================== */

.saltar {
  position: absolute; top: -100px; left: 1rem; z-index: 100;
  padding: .6em 1.2em; background: var(--tinta); color: #fff;
  border-radius: 0 0 var(--radio) var(--radio); font-weight: 700;
}
.saltar:focus { top: 0; }

/* -------------------------------------------------------------- navbar */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .9);
  backdrop-filter: blur(12px);
  transition: box-shadow var(--sal-media), background var(--sal-media);
}
.nav--pegado { box-shadow: 0 1px 0 var(--linea), var(--sombra-1); background: rgb(255 255 255 / .96); }
.nav__fila { display: flex; align-items: center; gap: var(--e-3); min-height: 68px; }
.nav__marca { flex: 0 0 auto; }
.nav__marca img { width: auto; height: 46px; }
.nav__menu { display: flex; gap: var(--e-3); margin-left: auto; }
.nav__menu a {
  font-size: var(--t-sm); font-weight: 650; text-decoration: none;
  padding: .4em 0; position: relative;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--verde); transition: right var(--sal-media);
}
.nav__menu a:hover::after { right: 0; }
.nav__wa { flex: 0 0 auto; min-height: 42px; padding: .5em 1.2em; }

.nav__hamburguesa { display: none; width: 44px; height: 44px; flex-direction: column;
  gap: 5px; align-items: center; justify-content: center; margin-left: auto; }
.nav__hamburguesa span { display: block; width: 22px; height: 2px; background: var(--tinta); border-radius: 2px; }

/* ---------------------------------------------------------------- hero */
/* Una frase y el objeto. Sin antetítulo, sin párrafo y sin botón: lo que hay
   que tocar es la tapa, y una tapa de catálogo no necesita que se lo expliquen.
   El aire de arriba y de abajo es lo que la vuelve el centro de la página. */
.hero {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(70% 90% at 50% 0%, var(--verde-niebla) 0%, transparent 65%),
    linear-gradient(180deg, #fff 0%, var(--crema) 100%);
  overflow: hidden;
}
.hero__centro {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
}
.hero__titular {
  font-size: var(--t-2xl);
  max-width: 18ch;          /* la frase parte donde tiene que partir, no donde cae */
  margin-inline: auto;
  text-wrap: balance;
}
.hero__titular em {
  display: block;
  margin-top: .25em;
  font-style: normal;
  font-size: .62em;
  letter-spacing: -.01em;
  color: var(--verde-hondo);
}

/* tapa del catálogo en 3D */
.tapa {
  --giro: -9deg;
  position: relative;
  display: block;
  /* Se mide también contra el ALTO de la ventana: la tapa es lo único que se
     toca en la portada, así que tiene que caber entera junto al título sin
     obligar a bajar. 33vh de ancho son 46vh de alto con esta proporción. */
  width: min(340px, 80vw, 33vh);
  aspect-ratio: .707;
  transform: perspective(1400px) rotateY(var(--giro)) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform var(--sal-lenta), filter var(--sal-lenta);
  text-decoration: none;
  filter: drop-shadow(0 26px 40px rgb(18 35 46 / .28));
  border-radius: 4px 12px 12px 4px;
}
/* al acercarse, el libro se endereza y se levanta: es la única invitación que
   hay en la portada, así que tiene que notarse sin decir nada */
.tapa:hover, .tapa:focus-visible {
  --giro: -2deg;
  transform: perspective(1400px) rotateY(var(--giro)) rotateX(0deg) translateY(-6px) scale(1.02);
  filter: drop-shadow(0 34px 52px rgb(18 35 46 / .34));
}
.tapa:focus-visible { outline: 3px solid var(--verde-hondo); outline-offset: 10px; }
.tapa__cara {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; padding: 1.5rem 1rem;
  background: linear-gradient(165deg, var(--verde) 0%, #7FA818 100%);
  border-radius: 4px 12px 12px 4px;
  text-align: center;
  color: var(--tinta);
}
.tapa__cara img { width: 56%; height: auto; }
.tapa__lomo {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(90deg, #3E5C0C, #6C9114);
  border-radius: 4px 0 0 4px;
}
.tapa__anio { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; line-height: .9; color: #fff; }
.tapa__tit { font-size: var(--t-md); font-weight: 800; line-height: 1.1; }
.tapa__lugar { font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }

/* ----------------------------------------------------------- confianza */
.confianza { background: var(--tinta); color: #fff; padding-block: var(--e-3); }
.confianza__fila {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-2) var(--e-4);
}
.confianza p { display: flex; flex-direction: column; font-size: var(--t-sm); }
.confianza strong { font-weight: 800; }
.confianza span { color: #A9B4BA; }

/* ------------------------------------------------------ bloque catálogo */
/* Centrado y sin ilustración: después del héroe, lo único que tiene que hacer
   este bloque es dar las tres cifras que justifican abrir el catálogo. */
.bloque-cat__centro { max-width: 46rem; margin-inline: auto; text-align: center; }
.bloque-cat__centro .antetitulo { justify-content: center; }
.bloque-cat__centro .plomo { margin-inline: auto; }

.cifras {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--e-3) clamp(2rem, 6vw, 4.5rem);
  margin: var(--e-6) 0;
}
.cifras > div { display: flex; flex-direction: column; gap: .15rem; }
.cifras dt {
  font-size: var(--t-lg); font-weight: 900; line-height: 1;
  color: var(--verde-hondo);
  /* cifras tabulares: al cambiar de idioma o de catálogo no bailan */
  font-variant-numeric: tabular-nums;
}
.cifras dd { margin: 0; font-size: var(--t-sm); color: var(--tinta-media); }

/* -------------------------------------------------------------- marcas */
/* Franja oscura, y no por gusto: de los nueve logotipos oficiales, dos vienen
   en blanco (Agrosuper, La Crianza) y sobre papel desaparecerían. Sobre tinta
   se leen los nueve sin retocar ninguno, que es lo que exige usar marca ajena. */
.marcas { background: var(--tinta); color: #fff; }
.marcas h2 { color: #fff; text-align: center; }

.marcas__tira {
  list-style: none; padding: 0; margin: var(--e-6) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.marcas__tira li { display: grid; place-items: center; }
.marcas__tira img {
  height: clamp(30px, 4.5vw, 42px); width: auto; max-width: 100%;
  object-fit: contain;
  opacity: .92;
  transition: opacity var(--sal-rapida), transform var(--sal-rapida);
}
.marcas__tira li:hover img { opacity: 1; transform: scale(1.04); }

/* ------------------------------------------------------------ nosotros */
.nosotros__fila {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.nosotros__foto {
  /* el recuadro manda la proporción, no la foto: así el bloque no cambia de
     alto si mañana llega otra foto con otras medidas */
  aspect-ratio: 4/3;
  margin: 0;
  overflow: hidden;
  background: var(--verde-niebla);
  border-radius: var(--radio-lg);
}
.nosotros__foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------------------- comprar */
.comprar {
  list-style: none; padding: 0; margin-top: var(--e-4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-3);
}
.comprar li {
  padding: var(--e-3); background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.comprar__n {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  background: var(--verde); color: var(--tinta);
  font-weight: 900; border-radius: 50%; margin-bottom: .7rem;
}
.comprar h3 { font-size: var(--t-base); margin-bottom: .3rem; }
.comprar p { font-size: var(--t-sm); color: var(--tinta-media); }

/* ------------------------------------------------------------ contacto */
.contacto__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.contacto__datos { margin-top: var(--e-3); display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; }
.contacto__datos dt { font-weight: 800; font-size: var(--t-sm); color: var(--verde-hondo); }
.contacto__datos dd { margin: 0; font-size: var(--t-sm); }
.contacto__datos dd span { display: block; margin-top: .3rem; color: var(--tinta-suave); position: relative; }
.contacto__mapa {
  position: relative; aspect-ratio: 4/3; min-height: 300px; overflow: hidden;
  border-radius: var(--radio-lg); background: var(--crema);
  box-shadow: 0 0 0 1px var(--linea);
}
/* El iframe va ANCLADO a las cuatro esquinas, no con height: 100%. Safari de iPhone
   y algunos navegadores Android no le pasan al iframe el alto que sale de
   aspect-ratio: con height: 100% el mapa quedaba en sus 150 px por defecto,
   más chico que su recuadro. */
.contacto__mapa iframe {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; border: 0;
}
/* navegadores sin aspect-ratio: el truco clásico del padding */
@supports not (aspect-ratio: 1) {
  .contacto__mapa { height: 0; min-height: 0; padding-top: 75%; }
}
/* en el teléfono, cuadrado: a lo ancho de una pantalla chica 4:3 deja muy
   poco mapa a la vista */
@media (max-width: 560px) {
  .contacto__mapa { aspect-ratio: 1 / 1; }
  @supports not (aspect-ratio: 1) { .contacto__mapa { padding-top: 100%; } }
}
/* el mapa embebido no abre la navegación en el teléfono: este botón sí */
.contacto__llegar {
  position: absolute; right: .75rem; bottom: .75rem;
  padding: .55rem 1rem; border-radius: 999px;
  background: var(--verde-hondo); color: #fff; font-weight: 800; font-size: var(--t-sm);
  text-decoration: none; box-shadow: 0 4px 14px rgba(18, 35, 46, .25);
}
.contacto__llegar:hover { filter: brightness(1.08); }
.contacto__llegar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* ----------------------------------------------------------------- faq */
.faq { margin-top: var(--e-4); display: flex; flex-direction: column; gap: .5rem; }
.faq details {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .9rem 1.1rem;
}
.faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--verde-hondo); font-weight: 900; font-size: 1.3em; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: .6rem; font-size: var(--t-sm); color: var(--tinta-media); }

/* ----------------------------------------------------------------- pie */
.pie { background: var(--tinta); color: #C3CDD3; padding-block: var(--e-6) var(--e-3); }
.pie__fila {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-4); align-items: start;
}
.pie__logo { width: auto; height: 62px; }
.pie__lema { margin-top: .8rem; font-size: var(--t-sm); }
.pie__menu { display: flex; flex-direction: column; gap: .5rem; }
.pie__menu a { font-size: var(--t-sm); text-decoration: none; }
.pie__menu a:hover { color: var(--verde); }
.pie__dir { font-style: normal; font-size: var(--t-sm); line-height: 1.7; }
.pie__dir a { color: var(--verde); }
.pie__base {
  margin-top: var(--e-4); padding-top: var(--e-2);
  border-top: 1px solid rgb(255 255 255 / .12);
  display: flex; flex-wrap: wrap; gap: .35rem var(--e-2);
  align-items: baseline;
  /* Las dos líneas van a la izquierda y no repartidas a los lados: la esquina
     derecha de abajo es del botón flotante de WhatsApp, que es fijo y taparía
     lo que se ponga ahí. */
  padding-right: 4.5rem;
}
.pie__base > * + *::before {
  content: "·"; margin-right: var(--e-2); color: #4A5A63;
}
.pie__legal { font-size: var(--t-xs); color: #7D8C94; }
/* Firma de la agencia. Va en el gris más apagado del pie, no en verde: acompaña
   al aviso legal, no compite con los enlaces del cliente. */
.pie__credito {
  font-size: var(--t-xs); color: #7D8C94; text-decoration: none;
  transition: color var(--sal-rapida);
}
.pie__credito:hover, .pie__credito:focus-visible { color: var(--verde); }

/* ------------------------------------------------------ wa flotante */
.wa-flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 45;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: #25D366; color: #08341A; border-radius: 50%;
  box-shadow: var(--sombra-2);
  transition: transform var(--sal-rapida);
}
.wa-flotante:hover { transform: scale(1.08); }

/* -------------------------------------------------------------- móvil */
@media (max-width: 900px) {
  .nosotros__fila, .contacto__fila {
    grid-template-columns: 1fr;
  }
  .nosotros__foto { order: 1; }
}
@media (max-width: 760px) {
  .nav__menu {
    position: absolute; inset: 100% 0 auto;
    flex-direction: column; gap: 0;
    background: var(--papel);
    box-shadow: var(--sombra-2);
    padding: .5rem var(--gutter) 1rem;
    display: none;
  }
  .nav--abierto .nav__menu { display: flex; }
  .nav__menu a { padding: .8em 0; border-bottom: 1px solid var(--linea); }
  .nav__wa { display: none; }
  .nav__hamburguesa { display: flex; margin-left: .5rem; }
  .idioma { margin-left: auto; }
  .nav__fila { position: relative; }
  .wa-flotante { bottom: 1rem; }
}