/* ============================================================================
   Comercial Fratelli — sistema de diseño
   Los tokens salen de docs/MANUAL-MARCA.md. El verde se midió sobre el logotipo
   oficial; no se toca.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- color de marca ------------------------------------------------- */
  --verde:        #93C01F;
  --verde-hover:  #84AE18;
  --verde-hondo:  #4F7510;   /* el único verde que admite texto blanco encima */
  --verde-suave:  #EAF4D6;
  --verde-niebla: #F5FAEC;

  /* rojo y amarillo: urgencia y destacado. Nunca decorativos. */
  --rojo:        #E1121D;
  --rojo-hondo:  #A50E16;
  --amarillo:    #FFD400;
  --ambar:       #E8A317;
  --frio:        #2E7FB8;    /* sello "congelado" */

  --tinta:       #12232E;
  --tinta-media: #54626B;
  --tinta-suave: #8C979E;
  --papel:       #FFFFFF;
  --crema:       #F7F5EF;
  --linea:       #E4E7E2;

  --fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* escala fluida, razón 1.25 */
  --t-xs:   clamp(.75rem, .73rem + .1vw, .8125rem);
  --t-sm:   clamp(.8125rem, .79rem + .12vw, .875rem);
  --t-base: clamp(.9375rem, .91rem + .16vw, 1.0625rem);
  --t-md:   clamp(1.125rem, 1.04rem + .38vw, 1.375rem);
  --t-lg:   clamp(1.4rem, 1.22rem + .85vw, 2.05rem);
  --t-xl:   clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
  --t-2xl:  clamp(2.25rem, 1.65rem + 2.7vw, 4.125rem);

  --e-1: .5rem;  --e-2: 1rem;  --e-3: 1.5rem;  --e-4: 2rem;
  --e-6: 3rem;   --e-8: 4rem;  --e-12: 6rem;   --e-16: 8rem;

  --radio: 14px;  --radio-sm: 8px;  --radio-lg: 24px;  --radio-pill: 999px;

  --sombra-1: 0 1px 2px rgb(18 35 46 / .05), 0 2px 8px rgb(18 35 46 / .05);
  --sombra-2: 0 4px 12px rgb(18 35 46 / .07), 0 14px 38px rgb(18 35 46 / .09);
  --sombra-3: 0 10px 28px rgb(18 35 46 / .10), 0 30px 70px rgb(18 35 46 / .14);

  --sal-rapida: 180ms cubic-bezier(.32, .72, 0, 1);
  --sal-media:  320ms cubic-bezier(.32, .72, 0, 1);
  --sal-lenta:  560ms cubic-bezier(.32, .72, 0, 1);

  --ancho: 1220px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
  :root { --sal-rapida: 1ms; --sal-media: 1ms; --sal-lenta: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* el atributo hidden pierde contra cualquier display propio (.abtn, .pedido__cuenta):
   se vuelve a imponer para todo el sitio */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: 450;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); letter-spacing: -.01em; }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--verde-hondo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- utilidades ------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: clamp(3rem, 8vw, 6.5rem); }
.seccion--crema { background: var(--crema); }
.seccion--niebla { background: var(--verde-niebla); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde-hondo);
  margin-bottom: var(--e-2);
}
.antetitulo::before {
  content: "";
  width: 1.75em; height: 3px;
  background: var(--verde);
  border-radius: 2px;
}

.plomo {
  font-size: var(--t-md);
  color: var(--tinta-media);
  max-width: 62ch;
  font-weight: 400;
}

/* --- botones ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--verde);
  --btn-fg: var(--tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .75em 1.6em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: .01em;
  border-radius: var(--radio-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--sal-rapida), box-shadow var(--sal-rapida),
              background-color var(--sal-rapida);
}
.btn:hover { background: var(--btn-hover, var(--verde-hover)); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.btn:active { transform: translateY(0); }

.btn--fantasma {
  --btn-bg: transparent;
  --btn-fg: var(--tinta);
  box-shadow: inset 0 0 0 2px var(--tinta);
}
.btn--fantasma:hover { --btn-bg: var(--tinta); --btn-fg: var(--papel); box-shadow: inset 0 0 0 2px var(--tinta); }

.btn--wa { --btn-bg: #25D366; --btn-fg: #0A2F18; --btn-hover: #1FBA59; }
.btn--grande { min-height: 56px; padding: .85em 2em; font-size: var(--t-base); }

/* --- el botón del catálogo -------------------------------------------- */
/* La landing tiene un solo trabajo: que el visitante abra el catálogo. Este es
   el único botón de la página con este peso; todo lo demás queda por debajo a
   propósito. El halo verde lo separa del fondo sin necesidad de gritar. */
.btn--catalogo {
  min-height: 62px;
  padding: 1em 2.4em;
  font-size: clamp(1rem, .95rem + .25vw, 1.15rem);
  letter-spacing: .005em;
  box-shadow: 0 0 0 6px var(--verde-suave);
}
.btn--catalogo:hover,
.btn--catalogo:focus-visible {
  box-shadow: 0 0 0 9px var(--verde-suave), var(--sombra-2);
}
.btn__flecha { flex: none; transition: transform var(--sal-rapida); }
.btn--catalogo:hover .btn__flecha { transform: translateX(4px); }

@media (max-width: 560px) {
  /* en el teléfono el botón ocupa el ancho: es el destino de la página */
  .btn--catalogo { width: 100%; }
}

/* --- sellos de atributo ----------------------------------------------- */
.sello {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .28em .7em;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--radio-pill);
  background: var(--verde-suave);
  color: var(--verde-hondo);
  white-space: nowrap;
}
.sello--congelado { background: #E3F0F8; color: #1C5C87; }
.sello--fresco    { background: var(--verde-suave); color: var(--verde-hondo); }
.sello--food-service { background: #EDEAF6; color: #4A3D7A; }
.sello--nuevo     { background: var(--amarillo); color: var(--tinta); }
.sello--sin-gluten{ background: #FBEFE0; color: #8A5A16; }

/* ----------------------------------------------------------------- ficha */
.ficha {
  display: flex;
  flex-direction: column;
  gap: .4em;
  padding: .6em;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.ficha__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #FBFBF9;
  border-radius: 6px;
  overflow: hidden;
}
.ficha__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.ficha__media--vacia { background: var(--verde-niebla); }
.ficha__placeholder { width: 46% !important; height: auto !important; opacity: .3; padding: 0 !important; }
.ficha__sellos {
  position: absolute;
  top: .35em; left: .35em;
  display: flex; flex-wrap: wrap; gap: .2em;
}
.ficha__sellos .sello { font-size: .72em; padding: .18em .5em; }

.ficha__cuerpo { display: flex; flex-direction: column; gap: .2em; min-width: 0; flex: 0 0 auto; }
.ficha__nombre {
  font-size: 1.12em;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.ficha__formato {
  display: block;
  font-size: .82em;
  font-weight: 700;
  color: var(--verde-hondo);
  letter-spacing: 0;
}
.ficha__marca { font-size: .85em; color: var(--tinta-media); font-weight: 600; }
.ficha__descripcion { font-size: .85em; color: var(--tinta-media); }
.ficha__bulto { font-size: .8em; color: var(--tinta-suave); }

/* El código ocupa el lugar que en sus piezas ocupaba el precio. */
.ficha__codigo { margin-top: .15em; }
.ficha__codigo code {
  display: inline-block;
  font-family: var(--mono);
  font-size: .86em;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .3em .6em;
  background: var(--verde-suave);
  color: var(--verde-hondo);
  border-radius: 5px;
}
.ficha__cta {
  margin-top: auto;
  align-self: start;
  padding: .4em .9em;
  font-size: .82em;
  font-weight: 700;
  text-decoration: none;
  color: var(--tinta);
  background: var(--verde);
  border-radius: var(--radio-pill);
  transition: background var(--sal-rapida);
}
.ficha__cta:hover { background: var(--verde-hover); }
button.ficha__cta { font: inherit; font-size: .82em; font-weight: 700; line-height: inherit; }
.ficha__cta--listo { background: var(--verde-hondo); color: #fff; }
.ficha__cta--listo:hover { background: var(--verde-hondo); filter: brightness(1.12); }
.ficha__cta--pulso { animation: ficha-pulso 320ms cubic-bezier(.32, .72, 0, 1); }
@keyframes ficha-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ficha__cta--pulso { animation: none; } }

/* --- contenido provisional -------------------------------------------- */
/* Todo lo que no es definitivo se ve, pero SOLO en modo revisión (?revision=1, que
   pone .en-revision en <html>). Lo publicado no lleva cintas de «pendiente». */
.en-revision [data-provisional]{ position: relative; }

/* En elementos en línea (el código de producto) la cinta taparía el texto de al
   lado. Ahí se marca con subrayado punteado y color de aviso. */
.en-revision code[data-provisional], .en-revision span[data-provisional]{
  background: #FFF3CD !important;
  color: #7A5A00 !important;
  box-shadow: inset 0 0 0 1px #E8C86A;
  text-decoration: underline dotted #C9A227 2px;
  text-underline-offset: 3px;
}
.en-revision code[data-provisional]::after, .en-revision span[data-provisional]::after{ content: none; }
.en-revision [data-provisional]::after{
  content: attr(data-provisional);
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: .2em .5em;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: #7A5A00;
  background: repeating-linear-gradient(
    -45deg, rgb(255 212 0 / .85) 0 10px, rgb(255 226 90 / .85) 10px 20px);
  pointer-events: none;
  z-index: 2;
}

/* --- animación de entrada --------------------------------------------- */
.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--sal-lenta), transform var(--sal-lenta);
  transition-delay: var(--retardo, 0ms);
}
.revela.dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; }
}

/* --- selector de idioma ------------------------------------------------ */
.idioma {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  gap: 2px;
  background: var(--verde-suave);
  border-radius: var(--radio-pill);
  box-shadow: inset 0 0 0 1px rgb(18 35 46 / .06);
}
.idioma__op {
  min-width: 38px;
  min-height: 34px;
  padding: 0 .55em;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--verde-hondo);
  border-radius: var(--radio-pill);
  transition: background var(--sal-rapida), color var(--sal-rapida);
}
.idioma__op:hover { background: rgb(255 255 255 / .7); }
.idioma__op--activa {
  background: var(--verde);
  color: var(--tinta);
  box-shadow: var(--sombra-1);
}
.idioma__op--activa:hover { background: var(--verde); }

/* en la barra del visor va sobre crema, no sobre blanco */
.idioma--visor { background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }