/* Gud Boi · Home de muestra
   Colores y tipografías del Manual Gud Boi. Títulos en Boldonse; Nority Display es solo el logo (SVG). */

:root {
  --bosque: #0A3630;
  --bosque-2: #07261F;
  --lima: #CCF545;
  --hueso: #FAFAFA;
  --menta: #87E0CE;
  --lavanda: #9C9AF8;
  --durazno: #FEB3A2;
  --mantequilla: #FBF499;
  --mostaza: #FFCA27;
  --tinta-2: #4A635D;
  --linea: #DDE5E0;
  --tinte: #EEF3EF;

  --f-titulo: "Boldonse", "Archivo Black", system-ui, sans-serif;
  --f-acento: "Boldonse", "Archivo Black", system-ui, sans-serif;
  --f-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 18px;
  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--bosque);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.45; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid #55AFFF; outline-offset: 3px; }

.container { max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }
.center { text-align: center; margin-top: 36px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-texto); font-weight: 800; font-size: 15px; text-decoration: none;
  border-radius: 999px; padding: 13px 24px; border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(10, 54, 48, .6); }
.btn-lime { background: var(--lima); color: var(--bosque); }
.btn-dark { background: var(--bosque); color: var(--lima); }
.btn-lg { font-size: 17px; padding: 16px 28px; }
.btn-blanco { background: #fff; color: var(--bosque); }
.btn-borde { background: transparent; color: var(--bosque); border-color: var(--bosque); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Aviso de muestra y anuncio */
.sample-bar {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  background: var(--mantequilla); font-size: 13px; font-weight: 600; padding: 6px 44px; position: relative; text-align: center;
}
.sample-bar button {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--bosque);
}
.announce {
  background: var(--bosque); color: var(--lima); text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 8px 16px;
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--lima); border-bottom: 1px solid rgba(10, 54, 48, .12); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 20px; }
.brand img { width: 84px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 15px; }
.main-nav a:not(.btn) { text-decoration: none; }
.main-nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav-cta { padding: 10px 20px; font-size: 14px; }
.main-nav .nav-cta { background: #fff; color: var(--bosque); }
.main-nav a { white-space: nowrap; }
/* Pantallas medianas: los 8 elementos del menú en una sola línea */
@media (max-width: 1140px) { .main-nav { gap: 18px; font-size: 14.5px; } }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after {
  position: absolute; left: 10px; right: 10px; height: 2.5px; background: var(--bosque); border-radius: 2px; content: ""; transition: transform .2s;
}
.burger span { top: 21px; }
.burger span::before { left: 0; right: 0; top: -7px; }
.burger span::after { left: 0; right: 0; top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
/* Menú móvil (botón ☰) */
@media (max-width: 960px) {
  .burger { display: block; }
  .main-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--hueso);
    border-bottom: 1px solid rgba(10, 54, 48, .15); padding: 8px 20px 20px; background: var(--lima);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid rgba(10, 54, 48, .15); }
  .nav-cta { margin-top: 16px; }
}

/* Secciones */
.section { padding-block: 88px; }
.section-tint { background: var(--tinte); }
.section-lime { background: var(--lima); }
.section-dark { background: var(--bosque); color: var(--hueso); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; display: grid; gap: 14px; }
.section-head.left { text-align: left; margin: 0; }
.section-head h2, .plan-inner h2, .final h2 { font-size: clamp(22px, 2.8vw, 34px); }
.section-head p { color: var(--tinta-2); font-size: 17px; }
.section-lime .section-head p { color: var(--bosque); }

/* Grillas */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: #fff; border-radius: var(--radio); padding: 24px; display: grid; gap: 10px; align-content: start; }
.feature h3 { font-size: 15px; }
.feature p { color: var(--tinta-2); font-size: 15px; }
.iso-dot {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 6px;
  background: var(--c) url("../img/nariz.svg") center / 100% no-repeat;
}

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--tinta-2); max-width: 62ch; }

/* Cierre */
/* Cierre: menta (el color de la tarjeta de Res) con texto verde bosque, alto contraste */
.final { position: relative; overflow: hidden; background: var(--menta); color: var(--bosque); padding-block: 96px; text-align: center; }
.final::before, .final::after { content: ""; position: absolute; pointer-events: none; background: center / contain no-repeat; }
.final::before { width: 240px; height: 240px; left: -70px; top: -60px; background-image: url("../img/home/mancha-lima.svg"); }
.final::after { width: 260px; height: 260px; right: -80px; bottom: -90px; background-image: url("../img/home/mancha-lavanda.svg"); }
.final-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; }
.final h2 { color: var(--bosque); }
.final p { color: var(--bosque); font-size: 18px; max-width: 46ch; }
.final .btn { background: var(--bosque); color: var(--lima); font-family: var(--f-titulo); font-weight: 400; font-size: 15px; padding: 16px 30px; }
.final img { filter: drop-shadow(0 8px 14px rgba(10, 54, 48, .25)); }
@media (max-width: 560px) { .final::before { width: 150px; height: 150px; left: -60px; top: -50px; } .final::after { width: 170px; height: 170px; right: -70px; bottom: -70px; } }
.final .final-note { font-size: 14px; color: var(--mantequilla); }

/* Botón flotante "Inquietudes" (WhatsApp), en todas las páginas */
.inquietudes {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; height: 56px; border-radius: 999px; padding: 0 20px 0 14px;
  background: #25D366; color: #fff; display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 800; font-size: 16px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
}
.inquietudes svg { width: 28px; height: 28px; flex: none; }
.inquietudes:hover { background: #1EBE5A; }
/* Respaldo sin JavaScript: en la calculadora, encima de la barra fija de Atrás / Continuar */
body:has(.calc-footer:not([hidden])) .inquietudes { bottom: 96px; }
.inquietudes:focus-visible { outline: 3px solid var(--bosque); outline-offset: 3px; }
/* Espacio al final para que el botón no tape lo último de la página */
body { padding-bottom: 84px; }
@media (max-width: 520px) { .inquietudes { right: 14px; bottom: 14px; height: 50px; padding: 0 16px 0 12px; font-size: 15px; } }

/* Responsive */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .grid-3, .faq-wrap { grid-template-columns: 1fr; }
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 36px; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; font-size: 16px; }
  .sample-bar { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Aviso de cookies (assets/js/cookies.js), en todas las páginas */
.aviso-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--radio);
  background: var(--bosque); color: var(--hueso); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); font-size: 14px; line-height: 1.45;
}
.aviso-cookies p { margin: 0; flex: 1; }
.aviso-cookies a { color: var(--lima); }
.aviso-cookies-btns { display: flex; gap: 8px; flex: none; }
.aviso-cookies .btn { padding: 10px 16px; font-size: 14px; cursor: pointer; }
.aviso-cookies .btn-back { color: var(--hueso); background: transparent; border: 2px solid var(--hueso); }
body.con-aviso-cookies .inquietudes { display: none; }
@media (max-width: 640px) {
  .aviso-cookies { flex-direction: column; align-items: stretch; left: 10px; right: 10px; bottom: 10px; }
  .aviso-cookies-btns .btn { flex: 1; }
}

/* ==========================================================================
   Home (diseño "Gud Boi website layout desktop", oct. 2026)
   ========================================================================== */
/* Botones de la Home con la tipografía de títulos, como el diseño */
.portada .btn, .ingredientes .btn, #menu .center .btn { font-family: var(--f-titulo); font-weight: 400; font-size: 15px; padding: 16px 30px; }

/* Manchas de color (fondo de números, ingredientes y fotos) */
.m-mantequilla { background-image: url("../img/home/mancha-mantequilla.svg"); }
.m-menta { background-image: url("../img/home/mancha-menta.svg"); }
.m-durazno { background-image: url("../img/home/mancha-durazno.svg"); }
.m-amarilla { background-image: url("../img/home/mancha-amarilla.svg"); }
.m-lima { background-image: url("../img/home/mancha-lima.svg"); }
.m-turquesa { background-image: url("../img/home/mancha-turquesa.svg"); }
.m-lavanda { background-image: url("../img/home/mancha-lavanda.svg"); }

/* Portada con video */
.portada { position: relative; overflow: hidden; background: #E9E9EB; min-height: clamp(480px, 46vw, 660px); display: grid; align-items: center; }
.portada-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.portada-inner { position: relative; width: 100%; padding-block: 64px; }
.portada h1 { font-size: clamp(27px, 3.3vw, 46px); line-height: 1.55; color: var(--bosque); }
.portada-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* Cómo funciona */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; }
.paso-num {
  font-family: var(--f-titulo); font-size: clamp(30px, 3vw, 42px); line-height: 1; width: 1.9em; height: 1.65em;
  display: grid; place-items: center; background-position: center; background-size: contain; background-repeat: no-repeat; padding-top: .18em;
}
.pasos h3 { font-family: var(--f-texto); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.01em; }
.pasos p { margin-top: 14px; font-size: 16px; max-width: 26ch; }

/* Mejor para ellos */
.mejor { position: relative; background: #EEEEEE; margin-top: 140px; }
.mejor-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 28px; align-items: center; }
.mejor-texto { display: grid; gap: 26px; align-self: center; padding-block: 40px; }
.mejor-texto h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.55; }
.mejor-texto p { font-size: 16px; max-width: 30ch; }
.mejor-foto { align-self: end; width: 100%; max-width: 440px; margin: -130px auto 0; }
.mejor-lista { list-style: none; padding: 40px 0; margin: 0; display: grid; gap: 22px; }
.mejor-lista li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.mejor-lista img { width: 64px; height: auto; }
.mejor-lista strong { display: block; font-size: 20px; line-height: 1.15; }
.mejor-lista span { font-size: 16px; line-height: 1.4; }
.mejor-mancha { position: absolute; z-index: 0; pointer-events: none; }
.mejor-mancha-1 { width: 230px; left: -70px; top: -110px; }
.mejor-mancha-2 { width: 250px; right: 26%; bottom: -90px; }

/* Ingredientes */
.ingredientes { padding-bottom: 88px; }
.ing-grid {
  position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1fr;
  grid-template-areas: "proteina plato grasos" "vitaminas carbohidrato zanahoria"; gap: 40px 48px;
}
.ing-plato { grid-area: plato; width: 100%; max-width: 540px; margin: -120px auto 0; position: relative; z-index: 2; filter: drop-shadow(0 22px 26px rgba(10, 54, 48, .18)); }
.ing { display: grid; gap: 8px; align-content: start; max-width: 300px; position: relative; z-index: 2; }
.ing-proteina { grid-area: proteina; align-self: end; }
.ing-grasos { grid-area: grasos; align-self: end; justify-self: end; }
.ing-vitaminas { grid-area: vitaminas; }
.ing-carbohidrato { grid-area: carbohidrato; justify-self: center; margin-top: 70px; }
.ing-zanahoria { grid-area: zanahoria; justify-self: end; margin-top: 70px; }
.ing-img { width: 170px; height: 130px; display: grid; place-items: center; background-position: 45% 40%; background-size: 70%; background-repeat: no-repeat; margin-bottom: 6px; }
.ing-img img { width: 150px; height: auto; max-height: 120px; object-fit: contain; }
.ing h3 { font-size: 22px; line-height: 1.3; }
.ing p { font-size: 16px; line-height: 1.4; }
.ing-flecha { display: none; position: absolute; z-index: 3; pointer-events: none; height: auto; }
/* En computador y tablet el contenedor del carrusel no existe como caja: cada ingrediente va en su lugar */
.ing-carrusel { display: contents; }
.ing-controles { display: none; }

/* Escritorio: la misma composición del diseño (Artboard 5): el plato al centro y cada flecha sale de su borde
   hacia su ingrediente. Todo se ubica en % de un recuadro con la proporción del diseño (1067 × 973). */
@media (min-width: 1100px) {
  .ing-grid { display: block; aspect-ratio: 1067 / 973; margin-top: -110px; }
  .ing-plato { position: absolute; left: 27.5%; top: 5%; width: 44.5%; max-width: none; margin: 0; }
  .ing { position: absolute; margin: 0; max-width: none; }
  .ing-proteina { left: 0; top: 17.7%; width: 20.5%; }
  .ing-grasos { left: 78.3%; top: 18.9%; width: 21.7%; }
  .ing-vitaminas { left: 0; top: 61.5%; width: 20%; }
  .ing-carbohidrato { left: 39.4%; top: 62.7%; width: 20%; }
  .ing-zanahoria { left: 78.9%; top: 59.1%; width: 21.1%; }
  .ing-flecha { display: block; }
  .ing-flecha-1 { left: 20.5%; top: 15.6%; width: 13%; }
  .ing-flecha-2 { left: 63.8%; top: 24.3%; width: 14.2%; }
  .ing-flecha-3 { left: 21.5%; top: 41%; width: 17.5%; }
  .ing-flecha-4 { left: 48.7%; top: 43%; width: 4%; }
  .ing-flecha-5 { left: 63.5%; top: 44.4%; width: 15.5%; }
}

/* Beneficios: la sección tiene la proporción de la foto (1280 × 729) y todo se ubica en % de ella,
   así las flechas abrazan al perro y los beneficios las siguen a cualquier ancho de pantalla */
.beneficios { position: relative; aspect-ratio: 1280 / 729; color: #fff; overflow: hidden;
  background: #D9A190 url("../img/home/beneficios.webp") center / cover no-repeat; }
.beneficios > .container { max-width: none; }
.beneficios h2 { text-align: center; color: #fff; font-size: clamp(24px, 3.2vw, 72px); padding-top: 4.2vw; white-space: nowrap; }
.ben-arcos { position: absolute; left: 28.7%; top: 28.3%; width: 34.6%; height: auto; }
.ben-arcos-movil { display: none; }
.ben-lista { list-style: none; padding: 0; margin: 0; font-weight: 600; font-size: clamp(14px, 1.45vw, 26px); line-height: 1.12; }
.ben-lista li { position: absolute; top: var(--y); display: flex; align-items: center; gap: .55em; transform: translateY(-50%); }
.ben-izq li { right: calc(100% - var(--x)); text-align: right; }
.ben-der li { left: var(--x); }
.ben-lista span { max-width: 9.5em; }
.ben-lista img { width: 2.6em; height: auto; flex: none; }
.ben-nota { position: absolute; left: 0; right: 0; bottom: 3.2%; text-align: center; font-size: clamp(12px, 1.05vw, 18px); padding-inline: 20px; }

/* Nuestro menú */
.recetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.receta { border-radius: 40px; overflow: hidden; background: var(--c); display: flex; flex-direction: column; }
.receta-foto { border: 0; padding: 0; margin: 0; cursor: pointer; background: #F0F2ED; aspect-ratio: 820 / 674; display: block; width: 100%; }
.receta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.receta-foto:hover img { transform: scale(1.04); }
.receta-foto:focus-visible { outline: 3px solid var(--bosque); outline-offset: -3px; }
.receta-cuerpo { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.receta h3 { font-family: var(--f-texto); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.receta p { font-size: 16px; line-height: 1.4; flex: 1; }
.receta-ver { width: 100%; margin-top: 6px; cursor: pointer; font-weight: 700; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { border: 1.5px solid var(--bosque); border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 500; }
.composicion { margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: center; max-width: 1060px; }
.composicion div { padding: 0 clamp(18px, 3vw, 40px); text-align: center; border-right: 1.5px solid var(--lavanda); }
.composicion div:last-child { border-right: 0; }
.composicion dt { font-weight: 600; font-size: 19px; }
.composicion dd { margin: 0; font-weight: 600; font-stretch: 70%; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.2; color: var(--lavanda); letter-spacing: -.02em; white-space: nowrap; }
.composicion small { font-size: .55em; margin-left: 3px; }
.composicion-nota { text-align: center; font-size: 16px; margin-top: 14px; }

/* Ficha del producto (al tocar la foto o "Ver producto") */
.ficha { border: 0; padding: 0; border-radius: 34px; width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); color: var(--bosque); background: var(--c); overflow: auto; }
.ficha::backdrop { background: rgba(7, 38, 31, .62); }
.ficha-inner { display: grid; grid-template-columns: 46% 54%; min-height: 560px; }
.ficha-foto { background: #EEE; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-info { position: relative; padding: 44px 48px 40px; display: flex; flex-direction: column; gap: 14px; }
.ficha-info form { position: absolute; top: 26px; right: 28px; }
.ficha-cerrar { width: 52px; height: 52px; border: 0; background: none; cursor: pointer; padding: 6px; color: var(--bosque); }
.ficha-cerrar svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ficha .chips { padding-right: 70px; }
.ficha h3 { font-family: var(--f-texto); font-weight: 500; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; margin-top: 20px; }
.ficha-ing { font-size: clamp(16px, 1.6vw, 21px); line-height: 1.4; }
.ficha h4 { font-size: 20px; font-weight: 600; margin: 14px 0 0; }
.ficha-macros { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); max-width: 420px; border: 1.5px solid rgba(10, 54, 48, .35); border-radius: 28px; overflow: hidden; }
.ficha-macros div { padding: 16px 22px; }
.ficha-macros div + div { border-left: 1.5px solid rgba(10, 54, 48, .35); }
.ficha-macros dt { font-size: 16px; }
.ficha-macros dd { margin: 0; font-weight: 600; font-stretch: 70%; font-size: 40px; line-height: 1.15; letter-spacing: -.02em; }
.ficha-macros small { font-size: .6em; }
/* Ficha con composición completa: cinco recuadros separados, el de las kcal en lavanda */
.ficha-macros-5 { max-width: none; grid-template-columns: repeat(5, 1fr); gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.ficha-macros-5 div { border: 1.5px solid rgba(10, 54, 48, .35); border-radius: 18px; padding: 10px 8px; text-align: center; background: rgba(255, 255, 255, .35); }
.ficha-macros-5 div + div { border-left: 1.5px solid rgba(10, 54, 48, .35); }
.ficha-macros-5 dt { font-size: 13.5px; line-height: 1.2; min-height: 2.4em; display: grid; place-items: center; }
.ficha-macros-5 dd { font-size: clamp(22px, 2.2vw, 30px); margin-top: 4px; }
.ficha-macros-5 .ficha-kcal { background: var(--lavanda); border-color: var(--lavanda); color: #fff; }
.ficha-macros-5 .ficha-kcal-amarillo { background: var(--mantequilla); border-color: var(--mantequilla); color: var(--bosque); }
.ficha-nota { font-size: 15px; }
.ficha-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 20px; }
.ficha-btns .btn { font-family: var(--f-titulo); font-weight: 400; font-size: 15px; padding: 15px 30px; border-width: 2.5px; }

/* Opiniones */
.opiniones { background: var(--mantequilla); }
.opiniones .section-head p { color: var(--bosque); }
.opiniones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.opinion {
  margin: 0; min-height: 250px; padding: 46px 28px 46px 16px; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center;
  background: url("../img/home/tarjeta-opinion.svg") center / 100% 100% no-repeat;
}
.opinion-foto { width: 112px; height: 124px; display: grid; place-items: center; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.opinion-foto img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.opinion-estrellas { width: 132px; height: auto; margin-bottom: 10px; }
.opinion blockquote { margin: 0; font-size: 15.5px; line-height: 1.3; font-weight: 500; padding-bottom: 12px; border-bottom: 1.5px solid var(--bosque); }
.opinion figcaption { margin-top: 10px; font-size: 14px; }
.opinion .avatar { width: 92px; height: 92px; border-radius: 50%; background: var(--c) url("../img/nariz.svg") center / 100% no-repeat; }

/* Footer */
.site-footer { position: relative; overflow: hidden; background: var(--lima); color: var(--bosque); font-size: 15px; padding-block: 48px 104px; }
/* En la Home el pie llega hasta abajo (el espacio para el botón Inquietudes queda dentro del pie) */
body:has(.site-footer) { padding-bottom: 0; }
.footer-inner { display: grid; gap: 22px; justify-items: center; text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-perro { position: absolute; left: max(16px, calc(50% - 610px)); bottom: 28px; width: 140px; }

/* Home en tablet y celular */
@media (max-width: 1000px) {
  .mejor-inner { grid-template-columns: 1fr 1fr; }
  .mejor-foto { grid-row: span 2; order: 2; }
  .mejor-lista { grid-column: 1; }
}
@media (max-width: 1180px) {
  .site-footer { padding-bottom: 176px; }
  .footer-perro { left: 50%; transform: translateX(-50%); width: 120px; }
}
@media (max-width: 860px) {
  .pasos { grid-template-columns: 1fr; gap: 26px; max-width: 420px; margin-inline: auto; }
  .pasos p { margin-top: 8px; max-width: none; }
  .mejor { margin-top: 56px; }
  .mejor-inner { grid-template-columns: 1fr; text-align: left; padding-block: 0 48px; min-height: 0; gap: 8px; }
  .mejor-foto { order: 0; max-width: 300px; margin: 0 auto; grid-row: auto; }
  .mejor-lista { grid-column: auto; }
  .mejor-mancha-1 { width: 150px; left: -60px; top: -70px; }
  .mejor-mancha-2 { width: 200px; right: -50px; bottom: auto; top: 40%; }
  .ingredientes { padding-top: 0; }
  /* Celular: el plato arriba y debajo un carrusel con un ingrediente a la vez (se desliza o con las flechas) */
  .ing-grid { display: block; }
  .ing-plato { margin-left: auto; margin-right: auto; }
  .ing-carrusel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 16px; margin-top: 28px; }
  .ing-carrusel::-webkit-scrollbar { display: none; }
  .ing-carrusel .ing { flex: 0 0 100%; scroll-snap-align: center; justify-items: center; text-align: center; padding: 0 8px; }
  .ing-carrusel .ing-img { width: 230px; height: 170px; margin: 0 auto 8px; }
  .ing-carrusel .ing-img img { width: 200px; max-height: 150px; }
  .ing-carrusel .ing h3 { font-size: 26px; }
  .ing-carrusel .ing p { font-size: 17px; line-height: 1.5; max-width: 34ch; }
  .ing-controles { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
  .ing-ant, .ing-sig { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--bosque); background: #fff; color: var(--bosque);
    font-size: 26px; line-height: 1; padding-bottom: 4px; cursor: pointer; }
  .ing-ant:disabled, .ing-sig:disabled { opacity: .3; cursor: default; }
  .ing-puntos { display: flex; gap: 8px; }
  .ing-puntos button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: rgba(10, 54, 48, .25); cursor: pointer; }
  .ing-puntos button[aria-current="true"] { background: var(--bosque); width: 26px; border-radius: 999px; }
  .ing-plato { max-width: 360px; margin-top: -40px; }
  .ing, .ing-grasos, .ing-carbohidrato, .ing-zanahoria { justify-self: start; margin-top: 0; align-self: start; max-width: none; }
  .ing-flecha { display: none; }
  .ing-img { width: 130px; height: 100px; }
  .ing-img img { width: 112px; max-height: 92px; }
  /* Celular: composición vertical del diseño móvil (359 × 689): el perro al centro con sus flechas,
     tres beneficios arriba, dos a cada lado y dos abajo. Cada uno se ubica con --mx / --my. */
  .beneficios { aspect-ratio: 359 / 689; max-width: 560px; margin-inline: auto; padding: 0;
    background: #D7A08F url("../img/home/beneficios-movil.webp") center / cover no-repeat;
    /* en tablet la composición queda al centro y los costados siguen el degradado del fondo */
    border-image: linear-gradient(#C48575, #C68C7C 17%, #D79F8C 33%, #DDA897 50%, #D9A292 58%, #C8927F 67%, #D8A79B 75%, #DEB8AB 83%, #D7B3A6) 0 1 / 0 100vmax / 0 100vmax; }
  .beneficios h2 { padding: 15% 24px 0; white-space: normal; font-size: clamp(26px, 8vw, 40px); line-height: 1.35; }
  .beneficios > .container { padding: 0; }
  .beneficios h2 .ben-linea { display: block; }   /* título en tres líneas */
  /* En celular las flechas rodean al perro en diagonal (dibujadas sobre el mismo lienzo 359 × 689 del diseño) */
  .ben-arcos { display: none; }
  .ben-arcos-movil { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .ben-lista { font-size: clamp(12.5px, 3.6vw, 17px); line-height: 1.2; }
  .ben-lista li { left: var(--mx); right: auto; top: var(--my); transform: translate(-50%, -50%); width: var(--mw, 27%);
    flex-direction: column; text-align: center; gap: 6px; }
  .ben-izq li { flex-direction: column-reverse; text-align: center; right: auto; }
  .ben-lista span { max-width: none; }
  .ben-lista img { width: clamp(34px, 11vw, 52px); }
  .ben-nota { bottom: 2.2%; font-size: clamp(11.5px, 3.3vw, 15px); padding-inline: 18px; line-height: 1.35; }
  .recetas { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  /* Celular: cuadro de 2 × 2 con bordes redondeados, como el de las fichas */
  .composicion { grid-template-columns: 1fr 1fr; max-width: 420px; margin-top: 40px; border: 1.5px solid var(--lavanda); border-radius: 28px; overflow: hidden; }
  .composicion div { padding: 16px 8px 14px; border-right: 0; }
  .composicion div:nth-child(odd) { border-right: 1.5px solid var(--lavanda); }
  .composicion div:nth-child(-n+2) { border-bottom: 1.5px solid var(--lavanda); }
  .composicion dt { font-size: 15px; }
  .composicion dd { font-size: clamp(30px, 9vw, 40px); }
  .ficha-inner { grid-template-columns: 1fr; min-height: 0; }
  .ficha-foto { max-height: 300px; overflow: hidden; }
  .ficha-info { padding: 28px 22px 26px; }
  .ficha-inner { position: relative; }
  .ficha-info { position: static; }
  .ficha-info form { top: 12px; right: 12px; z-index: 2; }
  .ficha-cerrar { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
  .ficha .chips { padding-right: 0; }
  .ficha h3 { margin-top: 4px; }
  .opiniones-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}
@media (max-width: 560px) {
  /* Celular: el video llena la portada en vertical; el título va arriba sobre la pared y los botones abajo */
  .portada { display: flex; min-height: min(150vw, calc(100svh - 70px)); align-items: stretch; }
  .portada-video { object-position: 58% 50%; }
  .portada-inner { display: flex; flex-direction: column; justify-content: space-between; padding-block: 22px 26px; }
  .portada h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.45; }
  .portada h1 br { display: none; }
  .portada-btns { margin-top: 24px; }
  .portada-btns { flex-wrap: nowrap; gap: 10px; }
  .portada .portada-btns .btn { flex: 0 1 auto; width: auto; padding: 13px clamp(14px, 4.5vw, 20px); font-size: clamp(13px, 3.9vw, 15px); white-space: nowrap; }
  .ficha-btns .btn { flex: 1 1 100%; }
  .ficha-macros-5 { grid-template-columns: repeat(2, 1fr); }
  .ficha-macros-5 .ficha-kcal { grid-column: 1 / -1; }
  .opinion { grid-template-columns: 88px 1fr; padding: 40px 20px 40px 10px; }
  .opinion-foto { width: 88px; height: 98px; }
  .opinion-foto img { width: 72px; height: 72px; }
}