/* ===================================================================
   QUÉ COME MI GATO — Hoja de estilos común
   Este archivo lo usan TODAS las páginas de la web.
   Si cambias un color aquí, cambia en toda la web de golpe.
   =================================================================== */

:root{
  --fondo:#F8F4EF;
  --blanco:#FFFDFA;
  --tinta:#2B2028;
  --tinta-suave:rgba(43,32,40,.68);
  --tinta-tenue:rgba(43,32,40,.42);
  --linea:rgba(43,32,40,.13);

  --mostaza:#E0A02F;
  --salvia:#3E7C6A;
  --rojo:#C4483C;

  --p-proteina:#C4483C;
  --p-grasa:#E0A02F;
  --p-hidratos:#8B7BA8;
  --p-minerales:#7E9186;
  --p-agua:#A9C0CE;

  --titulo:"Gabarito",system-ui,sans-serif;
  --texto:"Lora",Georgia,serif;
  --numeros:"IBM Plex Mono",monospace;

  --ancho:1080px;
  --radio:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--texto);font-size:18px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.caja{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 22px}

h1,h2,h3{font-family:var(--titulo);font-weight:900;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(34px,5.6vw,60px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:clamp(20px,2.2vw,25px);font-weight:700}
p{margin:0 0 1.1em}

.etiqueta{
  font-family:var(--numeros);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-tenue);
}

/* --- Aviso superior. Bórralo del HTML cuando la web esté completa --- */
.aviso-demo{
  background:var(--tinta);color:var(--fondo);text-align:center;
  font-family:var(--numeros);font-size:12px;padding:9px 20px;
}

/* --- Cabecera --- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(248,244,239,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.cabecera .fila{display:flex;align-items:center;height:66px;gap:26px}
.logo{
  font-family:var(--titulo);font-weight:900;font-size:20px;
  letter-spacing:-.03em;text-decoration:none;color:var(--tinta);white-space:nowrap;
}
.logo b{color:var(--mostaza)}
.nav{display:flex;gap:24px;margin-left:auto;font-family:var(--titulo);font-weight:500;font-size:15px}
.nav a{text-decoration:none;color:var(--tinta-suave);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--tinta);border-bottom-color:var(--mostaza)}
@media(max-width:760px){.nav{display:none}}

/* --- Huecos de foto --- */
.foto{position:relative;overflow:hidden;border-radius:var(--radio);background:#E9E3DC}
.foto img{width:100%;height:100%;object-fit:cover}

/* Fotos de producto: los sacos suelen ser verticales, así que se muestran
   enteros dentro del hueco en vez de recortarse. */
.foto.producto{background:#F2EDE6}
.foto.producto img{object-fit:contain;padding:12px}
.resena .foto.producto{aspect-ratio:4/3}
@media(max-width:600px){
  .resena .foto.producto{aspect-ratio:3/4}
}
.foto .falta{
  display:none;position:absolute;inset:0;
  align-items:center;justify-content:center;flex-direction:column;gap:8px;
  border:2px dashed var(--tinta-tenue);border-radius:var(--radio);
  font-family:var(--numeros);font-size:12px;color:var(--tinta-suave);
  text-align:center;padding:16px;
}
.foto.vacia .falta{display:flex}

/* --- Portada --- */
.portada{padding:60px 0 66px}
.portada .rejilla{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
@media(max-width:880px){.portada .rejilla{grid-template-columns:1fr;gap:34px}}
.portada h1{margin:14px 0 20px}
.portada h1 em{font-style:normal;color:var(--rojo)}
.portada .intro{font-size:20px;color:var(--tinta-suave);max-width:46ch}
.portada .foto{aspect-ratio:4/3}

.botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.boton{
  display:inline-block;text-decoration:none;font-family:var(--titulo);font-weight:700;font-size:16px;
  padding:13px 24px;border-radius:99px;transition:.18s;
}
.boton-lleno{background:var(--tinta);color:var(--fondo)}
.boton-lleno:hover,.boton-lleno:focus-visible{background:var(--rojo)}
.boton-vacio{border:2px solid var(--linea);color:var(--tinta)}
.boton-vacio:hover,.boton-vacio:focus-visible{border-color:var(--tinta)}

/* --- Barra de composición (elemento de marca) --- */
.barra{display:flex;width:100%;height:46px;border-radius:6px;overflow:hidden;border:1px solid var(--linea)}
.barra.pequena{height:13px}
.trozo{position:relative;flex-grow:0;flex-shrink:0}
.t-proteina{background:var(--p-proteina)}
.t-grasa{background:var(--p-grasa)}
.t-hidratos{background:var(--p-hidratos);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.35) 0 4px,transparent 4px 9px)}
.t-minerales{background:var(--p-minerales);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 2px,transparent 2px 6px)}
.t-agua{background:var(--p-agua);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.45) 0 2px,transparent 2px 7px)}
.trozo .num{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--numeros);font-size:12px;font-weight:600;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.32);
}
.barra.pequena .num{display:none}

ul.clave{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px}
.clave li{display:flex;align-items:center;gap:7px;font-family:var(--numeros);font-size:11.5px;color:var(--tinta-suave)}
.clave .cuadro{width:13px;height:13px;border-radius:3px;border:1px solid var(--linea);flex:none}

/* --- Secciones --- */
.seccion{padding:72px 0;border-top:1px solid var(--linea)}
.seccion .titulo{max-width:56ch;margin-bottom:40px}
.seccion .titulo h2{margin:10px 0 14px}
.seccion .titulo p{color:var(--tinta-suave);margin:0}

.explica{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:32px 30px}
.explica .barra{margin-bottom:18px}
.pie-barra{font-family:var(--numeros);font-size:12px;color:var(--tinta-tenue);margin:14px 0 0}
.puntos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:32px}
@media(max-width:820px){.puntos{grid-template-columns:1fr;gap:22px}}
.punto h3{margin-bottom:8px}
.punto p{color:var(--tinta-suave);font-size:16.5px;margin:0}
.punto .icono{font-size:26px;margin-bottom:10px;display:block}

.formula{
  margin-top:26px;padding:20px 22px;border-radius:var(--radio);
  background:var(--fondo);border:1px solid var(--linea);
  font-family:var(--numeros);font-size:14.5px;line-height:1.75;
}
.formula strong{color:var(--rojo)}
.formula em{display:block;font-style:normal;margin-top:10px;font-size:12.5px;color:var(--tinta-suave)}

/* --- Tarjetas de pienso --- */
.tarjetas{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:800px){.tarjetas{grid-template-columns:1fr}}
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.2s;
}
.tarjeta:hover,.tarjeta:focus-visible{transform:translateY(-3px);border-color:var(--tinta-tenue)}
.tarjeta .foto{border-radius:0;aspect-ratio:16/10}
.tarjeta .dentro{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.tarjeta-cabeza{display:flex;align-items:flex-start;gap:14px;margin-bottom:4px}
.tarjeta h3{flex:1;font-size:20px}
.nota{
  flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  font-family:var(--titulo);font-weight:900;font-size:19px;color:#fff;
}
.nota-a{background:var(--salvia)}
.nota-b{background:#7B9A5C}
.nota-c{background:var(--mostaza)}
.nota-d{background:var(--rojo)}
.nota-e{background:var(--tinta)}
.nota-especial{background:var(--tinta)}
.tipo{font-family:var(--numeros);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-tenue);margin-bottom:16px}
.tarjeta .resumen{font-size:16px;color:var(--tinta-suave);margin:16px 0 0}
.datos{display:flex;gap:22px;margin-top:14px;font-family:var(--numeros);font-size:11.5px;color:var(--tinta-suave)}
.datos b{display:block;font-size:20px;color:var(--tinta);letter-spacing:-.02em}

.proximos{
  margin-top:22px;padding:22px 24px;border:2px dashed var(--linea);border-radius:var(--radio);
  color:var(--tinta-suave);font-size:16.5px;
}
.proximos strong{font-family:var(--titulo);color:var(--tinta)}

/* --- Página de reseña --- */
.migas{
  font-family:var(--numeros);font-size:12px;color:var(--tinta-tenue);
  padding:22px 0 0;
}
.migas a{color:var(--tinta-suave)}
.migas span{margin:0 7px}

.cabeza-resena{padding:14px 0 34px}
.cabeza-resena h1{margin:12px 0 16px}
.cabeza-resena .sumario{font-size:19px;color:var(--tinta-suave);max-width:58ch;margin:0}

.resena{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start;padding-bottom:70px}
@media(max-width:900px){.resena{grid-template-columns:1fr;gap:34px}}
.resena .foto{aspect-ratio:16/9;margin-bottom:28px}

.tabla{width:100%;border-collapse:collapse;font-family:var(--numeros);font-size:14px;margin:24px 0 30px;background:var(--blanco);border-radius:var(--radio);overflow:hidden}
.tabla th,.tabla td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linea)}
.tabla thead th{background:var(--fondo);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave)}
.tabla td:last-child,.tabla th:last-child{text-align:right}
.tabla tr.marcada td{background:rgba(196,72,60,.08);font-weight:600}

.lista{list-style:none;padding:0;margin:0 0 26px}
.lista li{position:relative;padding-left:28px;margin-bottom:9px;font-size:16.5px}
.lista li::before{position:absolute;left:0;top:-1px;font-family:var(--titulo);font-weight:900;font-size:17px}
.buenas li::before{content:"+";color:var(--salvia)}
.malas li::before{content:"–";color:var(--rojo)}

.destacado{
  margin:30px 0;padding:24px 26px;border-radius:var(--radio);
  background:var(--blanco);border-left:5px solid var(--mostaza);
}
.destacado h3{margin-bottom:10px}
.destacado p:last-child{margin-bottom:0}

.ingredientes{
  font-family:var(--numeros);font-size:13.5px;line-height:1.8;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:20px 22px;margin:22px 0 28px;
}
.ingredientes mark{background:rgba(139,123,168,.34);padding:1px 3px;border-radius:3px}

.lateral{position:sticky;top:88px}
.compra{background:var(--blanco);border:2px solid var(--tinta);border-radius:var(--radio);overflow:hidden}
.compra .arriba{background:var(--tinta);color:var(--fondo);padding:16px 20px}
.compra .arriba .etiqueta{color:rgba(248,244,239,.6)}
.compra .arriba strong{display:block;font-family:var(--titulo);font-weight:700;font-size:20px;margin-top:3px}
.compra .abajo{padding:20px}
.compra .boton{display:block;text-align:center;background:var(--mostaza);color:var(--tinta);font-size:17px}
.compra .boton:hover,.compra .boton:focus-visible{background:var(--rojo);color:#fff}
.mini-datos{font-family:var(--numeros);font-size:12.5px;line-height:1.7;color:var(--tinta-suave);margin:0 0 18px;padding:0;list-style:none}
.mini-datos li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--linea);padding:6px 0}
.mini-datos b{color:var(--tinta)}
.transparencia{
  font-family:var(--numeros);font-size:11.5px;line-height:1.65;color:var(--tinta-tenue);
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--linea);
}

/* --- Pie --- */
.pie{background:var(--tinta);color:rgba(248,244,239,.7);padding:52px 0 40px;font-size:16px}
.pie a{color:rgba(248,244,239,.7)}
.pie .logo{color:var(--fondo);font-size:22px}
.pie-fila{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:32px}
.pie-nav{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--titulo);font-weight:500;font-size:15px}
.legal{font-family:var(--numeros);font-size:12px;line-height:1.75;padding-top:22px;border-top:1px solid rgba(248,244,239,.16);max-width:82ch}

:focus-visible{outline:3px solid var(--mostaza);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}