/* ==========================================================================
   Signia · Cortes selectos de exportación
   Estilos de la página. Mobile primero; los ajustes de escritorio están al final.
   ========================================================================== */

/* ---------- Tipografías ---------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Athelas";
  src: url("../fonts/Athelas-Regular.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Athelas";
  src: url("../fonts/Athelas-Italic.woff") format("woff");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --azul-1: #002152;
  --azul-2: #031a40;
  --azul-3: #010f2b;
  --dorado: #8b7a4f;
  --dorado-pie: #84754e;
  --blanco: #fff;

  --fuente-titulos: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --fuente-textos: "Athelas", Georgia, serif;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background: var(--azul-3);
  scroll-behavior: smooth;
}
body {
  font-family: var(--fuente-textos);
  color: var(--blanco);
  /* un solo fondo para toda la página, sin cortes entre secciones */
  background: linear-gradient(180deg, var(--azul-3) 0%, var(--azul-2) 14%, var(--azul-1) 38%, var(--azul-2) 66%, var(--azul-3) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  display: block;
  line-height: 0; /* el enlace envuelve solo un logo */
}

/* ---------- Estructura ---------- */
.seccion {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 16px;
}
.contenedor {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Estilos de texto reutilizables ---------- */
.titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.01em;
}
.dorado {
  color: var(--dorado);
}
.dorado-bloque {
  display: block;
  color: var(--dorado);
}
.cursiva {
  font-family: var(--fuente-textos);
  font-style: italic;
}
.resaltado {
  font-style: italic;
  font-weight: 700;
  color: var(--dorado);
  -webkit-text-stroke: 0.5px var(--dorado);
}

/* Bordes de la foto difuminados contra el fondo */
.difuminado {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
                      linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
              linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* Pie dorado: texto legal a la izquierda y logo de Rioplatense a la derecha */
.pie {
  padding: 18px 16px;
  background: var(--dorado-pie);
}
.pie__contenido {
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pie img {
  width: 100px;
}
.pie__legal {
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: left;
  color: var(--azul-3);
}

/* ==========================================================================
   1 · HERO — "Llegó Signia"
   ========================================================================== */
.hero__llego {
  font-size: 2.3rem;
  color: var(--blanco);
}
.hero__logo {
  width: 66%;
  margin-top: 4px;
}
.hero__lema {
  margin-top: 4px;
  font-size: 1.2rem;
  letter-spacing: 0.015em;
  color: var(--dorado);
}
.hero__productos {
  width: 84%;
  margin: 12px 0 8px;
}

/* ==========================================================================
   2 · BENEFICIOS — "Mayor terneza / Mejor sabor / Siempre"
   ========================================================================== */
.beneficios__logo {
  width: 47%;
}
.beneficios__intro {
  margin-top: 8px;
  font-size: 1rem;
}
.beneficios__titulo {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: 8px;
  font-size: 2.8rem;
}
.beneficios__bifes {
  width: 78%;
  margin-top: -2px;
}
.beneficios__sellos {
  width: 82%;
  margin-top: 2px;
}

/* ==========================================================================
   3 · PREMIOS — medallas y sello World Steak Challenge
   ========================================================================== */
.premios__intro {
  max-width: 14em;
  font-size: 1.05rem;
  line-height: 1.12;
}
.premios__lista {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.premio {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.premio img {
  width: 68px;
}
.premio h3 {
  margin-top: 2px;
  font-size: 1.45rem;
  color: var(--dorado);
}
.premio p {
  font-size: 0.9rem;
  line-height: 1.22;
}
.premios__lomos {
  position: relative;
  width: 77%;
  margin-top: 8px;
}
.premios__lomos .lomos {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent),
                      linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent),
              linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
  mask-composite: intersect;
}
.premios__lomos .sello {
  position: absolute;
  top: 1.3%;
  left: 0.9%;
  width: 36.2%;
}

/* ==========================================================================
   4 · ¿POR QUÉ SIGNIA?
   ========================================================================== */
.por-que__logo {
  width: 47%;
}
.por-que__titulo {
  margin-top: 18px;
  font-size: 2.25rem;
}
.por-que__texto {
  max-width: 33em;
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.32;
}
.por-que__texto p + p {
  margin-top: 10px;
}

/* Íconos: 3 arriba y 2 centrados abajo */
.iconos {
  width: 100%;
  max-width: 780px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px 6px;
}
.icono {
  grid-column: span 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.icono:nth-child(4) { grid-column: 2 / span 2; }
.icono:nth-child(5) { grid-column: 4 / span 2; }
.icono img {
  width: 60px;
  aspect-ratio: 1;
}
.icono p {
  width: 100%;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  line-height: 1.04;
  text-transform: uppercase;
}
.icono span {
  color: var(--dorado);
}

/* ==========================================================================
   5 · RESULTADO Y DÓNDE COMPRAR
   ========================================================================== */
.resultado__intro {
  max-width: 26em;
  font-size: 0.92rem;
  line-height: 1.3;
}
.atributo {
  margin-top: 18px;
}
.atributo + .atributo {
  margin-top: 12px;
}
.atributo h3 {
  font-size: 1.55rem;
  color: var(--dorado);
}
.atributo p {
  max-width: 26em;
  margin: 4px auto 0;
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  line-height: 1.12;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
.resultado__cierre {
  margin-top: 22px;
  font-size: 1.3rem;
}
.resultado__donde {
  margin-top: 20px;
  font-size: 0.92rem;
}
.logo-pedidosya {
  width: 132px;
  margin-top: 6px;
}
.logo-carrefour {
  width: 140px;
  margin-top: 10px;
}
.resultado__direcciones {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.35;
}
.resultado__direcciones b {
  font-weight: 700;
  -webkit-text-stroke: 0.4px var(--blanco);
}

/* ---------- Animación de entrada del hero ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__llego,
  .hero__logo,
  .hero__lema {
    animation: subir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero__logo { animation-delay: 0.12s; }
  .hero__lema { animation-delay: 0.26s; }
  .hero__productos { animation: aparecer 1.4s 0.35s ease both; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   ESCRITORIO (900px o más)
   ========================================================================== */
@media (min-width: 900px) {
  .seccion { padding: 46px 36px; }
  .contenedor { max-width: 560px; }
  .pie { padding: 22px 36px; }
  .pie img { width: 150px; }
  .pie__legal { font-size: 0.95rem; }

  /* 1 · Hero */
  .hero__llego { margin-top: 10px; font-size: 4.4rem; }
  .hero__logo { width: 450px; margin-top: 10px; }
  .hero__lema { margin-top: 8px; font-size: 2.3rem; }
  .hero__productos { width: 660px; max-width: none; margin: 22px 0 20px; }

  /* 2 · Beneficios */
  .beneficios__logo { width: 248px; }
  .beneficios__intro { margin-top: 12px; font-size: 1.2rem; }
  .beneficios__titulo { margin-top: 12px; font-size: 4.85rem; }
  .beneficios__bifes { width: 380px; margin-top: -4px; }
  .beneficios__sellos { width: 420px; margin-top: 4px; }

  /* 3 · Premios: las tres medallas en fila */
  .premios .contenedor { max-width: 800px; }
  .premios__intro { font-size: 1.4rem; }
  .premios__lista { flex-direction: row; align-items: flex-start; justify-content: center; gap: 20px; margin-top: 6px; }
  .premio { flex: 1 1 0; min-width: 0; margin-top: 16px; }
  .premio img { width: 92px; }
  .premio h3 { margin-top: 4px; font-size: 1.75rem; }
  .premio p { font-size: 1rem; }
  .premios__lomos { width: 400px; margin-top: 12px; }

  /* 4 · ¿Por qué Signia? */
  .por-que__logo { width: 248px; }
  .por-que__titulo { margin-top: 22px; font-size: 3.5rem; }
  .por-que__texto { max-width: 34em; margin-top: 16px; font-size: 1.02rem; }
  .por-que__texto p + p { margin-top: 14px; }
  .iconos { max-width: 460px; margin-top: 22px; gap: 14px 8px; }
  .icono img { width: 84px; }
  .icono p { margin-top: 2px; font-size: 1.2rem; }

  /* 5 · Resultado */
  .resultado__intro { font-size: 1.05rem; }
  .atributo { margin-top: 20px; }
  .atributo + .atributo { margin-top: 16px; }
  .atributo h3 { font-size: 2.05rem; }
  .atributo p { margin-top: 6px; font-size: 1.02rem; }
  .resultado__cierre { margin-top: 30px; font-size: 1.75rem; }
  .resultado__donde { margin-top: 26px; font-size: 1.15rem; }
  .logo-pedidosya { width: 168px; margin-top: 6px; }
  .logo-carrefour { width: 176px; margin-top: 12px; }
  .resultado__direcciones { margin-top: 8px; font-size: 1.02rem; }
}