/* ===== Marca PA' COMER sobre el CSS de DreamsFood =====
 *
 * Va DESPUÉS de df.css. No toca ninguna de sus reglas: solo reescribe las variables de las
 * que cuelgan, que es como está construido ese template. Así, cuando llegue una sección
 * nueva, se pega su HTML tal cual y sale ya en los colores y las tipografías de la marca.
 *
 * Paleta (docs/BRANDING.md): Tomato Jam #b52623 · Black Cherry #56090d · Eggshell #f3f1e9 ·
 * papel #f3f1e9 · texto #010201 · texto secundario #6b5f5c.
 */
.df {
  /* --- Sus variables --- */
  --primary: #b52623;                    /* era #EB1400 */
  --secondary: #e8a33d;                  /* era #FF9924 */
  --light: #f3f1e9;                      /* papel, en vez de su gris casi blanco */
  --dark: #010201;
  --white: #f3f1e9;                      /* papel: el sistema de marca no admite blanco puro */
  --black: #010201;
  --heading-color: #56090d;              /* Black Cherry */
  --body-color: #6b5f5c;
  --border-color: rgba(86, 9, 13, 0.12);
  --primary-100: #f7e4e3;
  --box-shadow: 0 10px 30px rgba(86, 9, 13, 0.18);

  /* --- Las de Bootstrap que usan sus utilidades (.bg-primary, .text-warning…) --- */
  --bs-primary: #b52623;
  --bs-primary-rgb: 181, 38, 35;
  --bs-warning: #e8a33d;
  --bs-warning-rgb: 232, 163, 61;
  --bs-dark: #010201;
  --bs-dark-rgb: 1, 2, 1;
  --bs-body-color: #6b5f5c;
  --bs-body-bg: transparent;             /* que no pinte un blanco encima de la página */
  --bs-border-radius: 8px;

  /* --- Tipografías de marca en lugar de Hanken Grotesk / Barlow Condensed --- */
  --bs-body-font-family: 'Gabarito', system-ui, sans-serif;
  font-family: 'Gabarito', system-ui, sans-serif;
  background-color: transparent;

  /* ⚠️ El extractor mapea el `body` del template a `.df`, y ese body trae
     `overflow-x: hidden`. Aquí `.df` no es el body: es un envoltorio de 1170px, así que ese
     recorte cortaba todo lo que debe salirse del contenedor —el adorno de la esquina, sin ir
     más lejos—. Del scroll horizontal de la página ya se encarga el `body` del sitio. */
  overflow: visible;
}
.df h1, .df h2, .df h3, .df h4, .df h5, .df h6 {
  font-family: 'D-DIN Condensed', 'Gabarito', sans-serif;
  text-transform: uppercase;             /* el condensado de marca se lee mejor en caja alta */
  letter-spacing: 0.5px;
}
.df .about-contact-list .number {
  font-family: 'D-DIN Condensed', 'Gabarito', sans-serif;
}

/* 🔴 Pizzaro trae `img { height:auto; max-width:100%; display:block }` y eso ROMPE la
 * composición del template nuevo.
 *
 * El template escalona sus dos fotos con `margin-top: 115px` sobre la grande, contando con que
 * las imágenes son `inline` (lo que asume el reboot de Bootstrap 5). Con `display: block`, ese
 * margen COLAPSA hacia `.aboutus-img` y en vez de bajar la foto empuja el bloque entero: las
 * dos quedan a la misma altura y el cruce desaparece.
 *
 * Aquí se devuelve el comportamiento que el template da por hecho, solo dentro de `.df`.
 * Medido: con block, .img-two salía en y=195 igual que .img-one; con inline, en y=310. */
.df img {
  display: inline;
  vertical-align: middle;
}
/* Las que el propio template pone en bloque siguen en bloque. */
.df .avatar img,
.df .aboutus-img .element-one { display: block; }

/* El adorno de la esquina, pegado a la pared derecha de la WEB (no a la de la sección).
 *
 * En el demo la sección ocupa todo el ancho y su `right: 0` ya cae en el borde de la pantalla.
 * Aquí vive dentro del contenedor del sitio (1170px), así que ese `right: 0` deja ~215px de
 * aire y la pizza se lee como si estuviera en el medio.
 *
 * `calc(50% - 50vw)` mide justo esa diferencia —la mitad del contenedor menos media pantalla—
 * y la lleva al borde real, sea cual sea el ancho de la ventana. Los 10px de más son el
 * colchón del scrollbar: `100vw` lo incluye y sin ellos aparecería scroll horizontal.
 *
 * Y el recorte pasa a `clip-path`: `overflow: hidden` cortaba también por la derecha, que es
 * lo que dejaba la pizza partida. Con `inset(0 -100vw 0 -100vw)` se corta arriba y abajo
 * —para que asome solo la mitad de arriba— pero se deja pasar el desbordamiento lateral. */
.df .aboutus-section-two {
  overflow: visible;
  -webkit-clip-path: inset(0 -100vw 0 -100vw);
  clip-path: inset(0 -100vw 0 -100vw);
}
.df .aboutus-section-two .element-1 {
  right: calc(50% - 50vw + 10px);
  bottom: -160px;                        /* la mitad justa de los 320px de la pizza */
}
/* Más aire arriba que los 80px de su `.section`: encima va la marquesina, que es una banda
   maciza de color, y sin este respiro la sección arrancaba pegada a ella. */
.df .aboutus-section-two { padding-top: 120px; }
@media (max-width: 991.98px) {
  .df .aboutus-section-two { padding-top: 80px; }
}

/* La etiqueta de las cabeceras de categoría va centrada, como el `section-header text-center`
 * del template. Su `.df` es solo el envoltorio de la píldora, no de la sección entera. */
.df.pc-cat-etiqueta {
  text-align: center;
  /* El aire de la sección lo pone AQUÍ, no el titular: la etiqueta y el H2 son un mismo
     bloque y deben ir pegados. Antes el H2 traía 88px de padding y el eyebrow se quedaba
     colgado arriba, lejos de lo que anuncia. */
  padding-top: 104px;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .df.pc-cat-etiqueta { padding-top: 64px; }
}

/* ===== Espaguetis: la píldora y el botón vuelven a los del sitio =====
 * Aquí vivían cuatro reglas que ponían la píldora y el botón en Eggshell con letra roja,
 * porque sobre el rojo macizo de esta sección los rojos del template desaparecían. Retirado el
 * 2026-08-31 con el fondo rojo: sobre Eggshell la píldora roja y el botón rojo son los
 * correctos, y son los mismos que en las otras dos categorías. */

/* ===== "Por qué elegirnos" = su `choose-section` =====
 * La maqueta es suya entera (df.css). Aquí solo la paleta y las tres cosas que su demo da por
 * hechas y en nuestra página no se cumplen. */

/* Su fondo es `var(--dark)`, que en la marca es el negro de texto #010201. Un negro plano al
 * lado del Eggshell corta demasiado: se usa el Black Cherry llevado a casi negro, que es el
 * mismo tono de la marca en su versión más profunda y deja respirar los resplandores. */
/* ⚠️ SIN `overflow: hidden`. Toda la gracia de la sección es que las cuatro fotos se salen
 * 120px por ARRIBA (suben 200px con el padding de 80 de la sección); recortarlas las dejaba a
 * ras de la banda y de paso le cortaba la cabeza a Elizabeth. Los resplandores van dentro de
 * la caja, así que no hay nada que recortar. */
.df .choose-section {
  background: #150406;
}
/* Los resplandores de las esquinas, en Tomato Jam (scripts/extraer-porque.mjs). Su demo los
 * pone a tamaño natural; aquí se agrandan un poco porque la banda es más ancha. */
.df .choose-section .choose-bg-01,
.df .choose-section .choose-bg-02 {
  width: min(30vw, 460px);
  height: auto;
  pointer-events: none;
}

/* 🔴 TRAMPA DE PIZZARO: Bootstrap 3 le cuelga a TODO `.nav` el clearfix
 *   `.nav:before, .nav:after { content: " "; display: table; }`
 * y esos dos pseudo-elementos cuentan como hijos del contenedor: en flex son dos ítems más
 * (roban ancho y meten dos huecos de más) y en rejilla ocupan celdas enteras. Medido en móvil:
 * la primera foto salía sola en la SEGUNDA columna porque el `:before` se había quedado con la
 * primera. El template nuevo es Bootstrap 5, donde ese clearfix ya no existe. */
.df .choose-section .why-choose-imgs .nav::before,
.df .choose-section .why-choose-imgs .nav::after {
  display: none;
}
/* Y por lo mismo, el `ul` se planta explícitamente: Pizzaro le deja márgenes y relleno de
 * lista que dejaban la fila 48px más estrecha que el contenedor y descentrada respecto al
 * resto de la sección. Las cuatro columnas se reparten a partes iguales. */
.df .choose-section .why-choose-imgs .nav {
  width: 100%;
  margin: 0;
  padding: 0;
}
.df .choose-section .why-choose-imgs .nav li {
  width: auto;
  flex: 1 1 0;
}

/* La línea que parte las fotos, más abajo que en su demo: allí solo asomaban 120px de 498
 * (un cuarto de la foto) y aquí se quiere que casi la mitad quede sobre el papel. Sube el
 * bloque 300px en vez de 200; con el padding de 80 de la sección, sobresalen 220px. El
 * colchón de HomeV1.astro se abre en la misma medida. */
.df .choose-section .why-choose-imgs { margin-top: -300px; }

/* Las cuatro fotos altas. El template las sirve ya recortadas en vertical (307x498); las
 * nuestras son cuadradas, así que el recorte lo hace el navegador. Al ser la caja más alta
 * que ancha, `cover` recorta por los LADOS y la foto se ve entera de arriba abajo. */
.df .choose-section .why-choose-imgs .nav li img {
  display: block;                         /* aquí sí: son bloques de una rejilla, no texto */
  width: 100%;
  height: 498px;
  object-fit: cover;
  object-position: center;
}
/* Por debajo de 992px su demo las esconde del todo. Perder cuatro fotos reales del local en
 * móvil —que es por donde entra casi todo el mundo— no compensa: se enseñan en dos columnas,
 * sin el escalonado ni el solape, que es lo que allí no cabía. */
@media (max-width: 991.98px) {
  .df .choose-section .why-choose-imgs {
    display: block;
    margin-top: 0;
    margin-bottom: 40px;
  }
  /* Rejilla, no flex: con `width: 50% - gap` los redondeos dejaban una foto sola por fila. */
  .df .choose-section .why-choose-imgs .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .df .choose-section .why-choose-imgs .nav li { width: auto; }
  .df .choose-section .why-choose-imgs .nav li:nth-child(even) { margin-top: 0; }
  .df .choose-section .why-choose-imgs .nav li img { height: 240px; }
}

/* El blanco puro de Bootstrap (`.text-white`) pasa a Eggshell: el sistema de marca no admite
 * #FFF. La variable es la que usa su utilidad, así que basta con reescribirla. */
.df { --bs-white-rgb: 243, 241, 233; }

/* Sobre el fondo oscuro, el H2 del template se queda con el color del titular (#56090d) y no
 * se leería; `text-white` ya lo resuelve, pero las barras de los lados cuelgan de --primary y
 * hay que impedir que se encojan cuando el titular es largo (el suyo era "Why Choose Us"). */
.df .choose-section .section-title-one { flex-wrap: wrap; }
.df .choose-section .section-title-one .text-bar { flex: 0 0 auto; }
/* Su bajada va a la mitad de opacidad para que el titular mande. */
.df .choose-section .section-header p {
  max-width: 80ch;                        /* una línea de lectura; sin esto ocupa los 1320px */
  margin-inline: auto;
  opacity: 0.8;
}
/* El icono de cada motivo, al tamaño de su demo. */
.df .choose-item .choose-content img {
  display: block;
  width: 64px;
  height: 64px;
}

/* ===== RESEÑAS = sus cintas cruzadas + `testimonial-section-two` + `video-section` =====
 * (index-2 del template nuevo). La maqueta entera es suya; aquí solo la paleta y lo que su
 * demo da por hecho y en nuestra página no se cumple. */

/* --- Las dos cintas que se cruzan ---------------------------------------------------------
 * En su demo la de arriba va en el color secundario y la de abajo en el principal, las dos con
 * borde blanco. Aquí: dorado + Tomato Jam, con el borde en Eggshell (blanco puro no existe en
 * la marca). Las estrellitas que separan las palabras, en el tono que contrasta con su banda
 * (scripts/extraer-porque.mjs). */
/* 🔵🔴 LAS DOS CINTAS, EN AZUL Y ROJO CON LA TRAMA DE MARCA (usuario, 2026-08-31).
 * Antes la de arriba iba en el ámbar secundario y la de abajo en Tomato Jam. Ahora son los dos
 * colores fuertes de la paleta —Cuban Cobalt arriba, Tomato Jam abajo—, con la trama
 * «PA' COMER» del kit repetida encima. Cruzadas en aspa, se leen como dos cintas de papel de
 * la marca, que es lo que son.
 *
 * ⚠️ La trama es un mosaico CON ALFA y la opacidad va HORNEADA en el archivo (34%), no puesta
 * en CSS: `opacity` afecta al elemento entero y habría apagado también las palabras de la
 * cinta. Con la alfa dentro del PNG, la trama queda tenue y el texto encima entero.
 * ⚠️ Y va como `background-image` + `background-color` por separado, nunca con el atajo
 * `background`: el atajo reinicia la imagen, y la regla de abajo —que solo cambia el color de
 * la de arriba— la borraría. */
.df .marquee-section {
  background-color: #b52623;                                  /* Tomato Jam — la de abajo */
  background-image: url('/assets/images/marca/trama-pacomer.webp');
  background-repeat: repeat;
  background-size: 240px auto;
}
.df .marquee-section.marquee-section-two { background-color: #1e5a8c; }   /* Cuban Cobalt — la de arriba */
.df .marquee-section-first,
.df .marquee-section-second { border-color: #f3f1e9; }
/* Las dos cintas son oscuras, así que las dos llevan el texto en Eggshell. La de arriba iba en
 * Black Cherry porque el fondo era ámbar claro; sobre el azul no se leería. */
.df .marquee-section-first .marquee-item h3,
.df .marquee-section-second .marquee-item h3 { color: #f3f1e9; }
/* La estrella oscura era para el ámbar: sobre azul desaparece. Las dos van claras. */
.df .marquee-section-first .marquee-item::after {
  background-image: url('/assets/images/df/cinta-estrella-clara.svg');
}
.df .marquee-section-second .marquee-item::after {
  background-image: url('/assets/images/df/cinta-estrella-clara.svg');
}
/* Las estrellitas del template vienen sin `background-size` y sus SVG miden 16px: quedaban
 * como un punto en una caja de 58. Se estiran a la caja, como hace él en las otras cintas. */
.df .marquee-section-first .marquee-item::after,
.df .marquee-section-second .marquee-item::after {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* La cinta girada se sale por los lados; se recorta ahí y no en el `body`, que si no aparece
 * scroll horizontal en toda la página. */
.df .marquee-section { overflow: hidden; }
.df .marquee-title { font-family: 'D-DIN Condensed', 'Gabarito', sans-serif; }
/* Su HTML las esconde por debajo de 992px (`d-none d-lg-block`), pero su propio CSS ya tiene
 * previsto qué hacer en pantallas pequeñas: enderezarlas. Las cintas son la firma de esta
 * sección y por móvil entra casi todo el mundo, así que se enseñan —planas y apiladas, que es
 * lo que cabe— en vez de desaparecer. */
@media (max-width: 991.98px) {
  .df .marquee-section.d-none { display: block !important; }
  .df .marquee-section-first,
  .df .marquee-section-second {
    transform: none;
    left: 0;
    top: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
  .df .marquee-item .marquee-title { font-size: 26px; }
  /* Sus estrellitas van colgadas FUERA de la caja (`right: -40px`), contando con el hueco que
     dejan los 44px de margen del escritorio. Con la letra pequeña ese hueco desaparece y la
     estrella se le monta encima a la palabra siguiente: aquí se mete dentro del propio relleno. */
  .df .marquee-item { margin-right: 8px; padding-right: 56px; }
  .df .marquee-section-first .marquee-item::after,
  .df .marquee-section-second .marquee-item::after {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
  }
}

/* --- Las tarjetas ------------------------------------------------------------------------- */
.df .testimonial-section-two { background: #f3f1e9; }         /* Eggshell, no blanco puro */
.df .testimonial-section-two .testimonial-item {
  background: #faf8f2;                                        /* papel, para despegar del fondo */
  height: 100%;
}
.df .testimonial-section-two .testimonial-item:hover { background: #faf8f2; }
/* Su tarjeta recorta la cita a 4 líneas. Las nuestras son reseñas reales de Google y algunas
 * son largas: se sube a 8 para no cortar a mitad de frase lo que alguien escribió. */
.df .testimonial-section-two .testimonial-item .testimonial-title p {
  -webkit-line-clamp: 8;
  font-size: 17px;
  line-height: 1.5;
}
.df .testimonial-section-two .testimonial-qutation img { width: 44px; height: 44px; }
.df .testimonial-section-two .author-name { font-family: 'D-DIN Condensed', 'Gabarito', sans-serif; }
/* El letrero gigante del fondo: sobre Eggshell hace falta bajarle un punto el tono, o no se ve.
 * ⚠️ Y su `z-index: -1` aquí lo escondía del todo: un hijo con z-index negativo se pinta por
 * debajo del fondo macizo de la sección cuando esta no crea contexto de apilado, que es justo
 * nuestro caso. Se sube a 0 y se levanta el contenido por encima. */
.df .testimonial-section-two .slide-section { z-index: 0; }
.df .testimonial-section-two > .container-fluid { position: relative; z-index: 1; }
.df .testimonial-section-two .slide-section .slide-item .slide-title { color: #e7e0cf; }
/* --- La rejilla de 3 + 3 ------------------------------------------------------------------
 * ⚠️ Aquí había un carrusel (Owl, 3/2/1 tarjetas) y sus reglas para igualar alturas dentro de
 * `.owl-item`. Se retiró: las seis reseñas van a la vista en dos filas de tres.
 *
 * El bloque va al 90% del ancho de la banda —no al 100%— para que las tarjetas no se peguen a
 * las paredes: la sección usa `container-fluid`, que es la ventana entera. */
.df .testimonial-section-two .pc-reviews-rejilla {
  width: 90%;
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  /* Por debajo de tablet, una tarjeta por fila: el 90% le quita ancho justo donde no sobra. */
  .df .testimonial-section-two .pc-reviews-rejilla { width: 100%; }
}
/* Tarjetas de la MISMA altura en cada fila, con el autor pegado abajo aunque la cita sea más
 * corta. Lo hace la columna (`d-flex`) más el `flex: 1 1 auto` de la cita. */
.df .testimonial-section-two .pc-reviews-rejilla .testimonial-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.df .testimonial-section-two .testimonial-item .testimonial-title { flex: 1 1 auto; }

/* --- La banda del vídeo -------------------------------------------------------------------
 * Su fondo es una foto del template; aquí, una de las nuestras. Encima va un velo oscuro: sin
 * él, el botón rojo y el letrero claro se pierden sobre las pizzas. */
.df .video-section {
  background-image: linear-gradient(rgba(21, 4, 6, 0.72), rgba(21, 4, 6, 0.72)),
                    url('/assets/images/df/fondo-video.jpg');
}
.df .video-section .video-btn .wave { border-color: #b52623; }
.df .video-section .video-btn i { color: #f3f1e9; }
.df .video-section .slide-section .slide-item .slide-title { color: rgba(243, 241, 233, 0.30); }
/* El `<a>` de dentro hereda `.video-btn` en su demo y se apila sobre el círculo; se le quita el
 * fondo para que no pinte un segundo botón encima del primero. */
.df .video-section .video-btn a.video-btn {
  position: static;
  background: transparent;
  width: 100%;
  height: 100%;
}

/* Font Awesome: el sitio carga la versión 4, que no conoce la clase `fas` de la 5/6 que usa
 * el template. Con esto los iconos de estrella del template pintan sin traer otra fuente. */
.df .fas, .df .far, .df .fab {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
}

/* Iconos Lucide del template (`icon-phone-call` y compañía). Aún NO se ha traído su fuente:
 * hasta entonces, el hueco se rellena con el equivalente de Font Awesome 4 para que la pieza
 * no salga vacía. Al migrar más secciones, valorar copiar lucide.woff2 y su CSS. */
.df .icon-phone-call::before {
  font-family: 'FontAwesome';
  content: '\f095';                      /* fa-phone */
}

/* ===== COMBOS = su `deals-section` + `counter-section-two` (index-2) ======================
 * La maqueta es suya entera (df.css). Aquí, la paleta y las cinco cosas que su demo da por
 * hechas y en nuestra página no se cumplen. */

/* 1. La pizza tiene que salirse por la pared derecha de la WEB, no por la del contenedor de
 *    1170px, igual que el adorno del "about". `overflow: hidden` —lo que trae el template—
 *    recortaba por los cuatro lados y dejaba la pizza flotando en medio del contenedor; con
 *    `clip-path` se corta arriba y abajo y se deja pasar el desbordamiento lateral.
 *    Del scroll horizontal ya se encarga el `overflow-x` del `body` del sitio. */
.df .deals-section {
  overflow: visible;
  -webkit-clip-path: inset(0 -100vw 0 -100vw);
  clip-path: inset(0 -100vw 0 -100vw);
}
/* Los 130px de más la sacan de la pantalla: en su demo la pizza aparece cortada por el borde,
 * y ese corte es justo lo que la hace parecer más grande que la sección. */
.df .deals-section .deals-img {
  right: calc(50% - 50vw - 130px);
  width: 480px;
  border-radius: 0;                      /* la foto ya viene recortada y con fondo transparente */
  overflow: visible;
}

/* 2. El letrero gigante del fondo. Dos arreglos, los mismos que hicieron falta en las reseñas:
 *    · su `z-index: -1` lo esconde bajo el fondo de la página (la sección no crea contexto de
 *      apilado), así que se sube a 0 y se levanta el contenido por encima;
 *    · su demo lo tiene a ancho completo porque la sección lo está; aquí vive dentro del
 *      contenedor, así que se estira a la pantalla entera con el mismo `calc`. */
.df .deals-section .slide-section {
  z-index: 0;
  /* Empieza más adentro que el borde de la pantalla, no pegado a él: ese hueco de la izquierda
     es donde cae la albahaca, y con el letrero pasándole por debajo las dos piezas se pisaban.
     El `min()` es para que en pantallas estrechas el desplazamiento no se coma media banda. */
  left: calc(50% - 50vw + min(240px, 14vw));
  width: calc(100vw - min(240px, 14vw));
}
.df .deals-section > .container { position: relative; z-index: 1; }
.df .deals-section .slide-section .slide-item .slide-title { color: #e7e0cf; }

/* 3. Las filas. Aquí son BOTONES —llenan el carrito con los platos del combo y abren el
 *    cajón—, no `div` ni enlaces. Pizzaro le mete a TODO `button` su propio relleno
 *    (`.8999em 4.6em`), un alto mínimo, su tipografía y su fondo: si no se desactiva, la fila
 *    del combo sale con pinta de botón gigante en vez de fila de tabla. Todo esto es reset,
 *    no diseño: el diseño lo pone `.deals-detail` en df.css, igual que cuando era un `div`. */
.df .deals-section .deals-detail {
  text-decoration: none;
  color: inherit;
  width: 100%;
  text-align: left;
  font: inherit;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  padding: 24px;
  min-height: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.df .deals-section .deals-detail:last-child { border-bottom: 0; }
/* El foco de teclado: ahora son cinco botones seguidos y hay que ver en cuál estás. */
.df .deals-section .deals-detail:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
}
.df .deals-section .deals-detail:nth-child(even) { background-color: #faf8f2; }
/* 🔴 Y el hover de la franja alterna hay que REPETIRLO con la misma pseudoclase, o no se ve.
 * Su `.deals-detail:hover` y nuestro `.deals-detail:nth-child(even)` pesan EXACTAMENTE lo
 * mismo (tres clases + una pseudoclase), y como esta hoja carga después de df.css, ganaba la
 * franja: las filas pares no se ponían rojas al pasar por encima, pero el texto SÍ se volvía
 * Eggshell —lo pone la regla de abajo— y desaparecía sobre el papel. Con `:nth-child(even):hover`
 * pesa uno más y el rojo vuelve a ganar. */
.df .deals-section .deals-detail:nth-child(even):hover { background-color: var(--primary); }
/* Su hover pinta el texto de blanco puro, que el sistema de marca no admite. */
.df .deals-section .deals-detail:hover h3,
.df .deals-section .deals-detail:hover h4,
.df .deals-section .deals-detail:hover p { color: #f3f1e9; }

/* 4. Los contadores. Su tarjeta va en `var(--white)`, que en la marca es el Eggshell de la
 *    página: quedaban cuatro rectángulos invisibles. Pasan a papel con su borde y su sombra,
 *    que es la regla del sistema para cualquier card sobre Eggshell. */
.df .counter-item {
  background: #faf8f2;
  border-color: rgba(86, 9, 13, 0.10);
  box-shadow: 0 4px 24px rgba(86, 9, 13, 0.08);
  padding: 24px 16px;
}
/* El contorno de la cifra: su `--gray-900` es un azul oscuro (#051321) que no es de la marca. */
.df .counter-section-two .counter-item h2 {
  -webkit-text-stroke: 1px #56090d;      /* Black Cherry */
}
.df .counter-section-two .counter-item:hover h2 {
  color: #b52623;                        /* Tomato Jam: al pasar por encima se rellena */
  -webkit-text-stroke: 1px #b52623;
}

/* Móvil: la pizza y el adorno ya los esconde el template (`d-none d-xl-block` / `d-md-block`),
 * pero el letrero de 250px seguía forzando ancho. Su propio @media lo baja a 80px; aquí, de
 * paso, se le quita el `top` negativo para que no se meta bajo la sección anterior. */
@media (max-width: 767.98px) {
  .df .deals-section .slide-section { top: 0; }
}

/* 5. Los anchos FIJOS que su demo le pone a la línea de detalle (250px por debajo de 1400,
 *    230 por debajo de 768, 220 por debajo de 576). Allí sobran porque el texto va con
 *    `text-truncate` y nunca pasa de una línea; aquí la línea dice lo que lleva el combo
 *    ENTERO —que es el dato que importa— y dentro de 250px se partía en cuatro renglones.
 *    El ancho lo manda la columna. */
.df .deals-section .deals-detail p {
  width: auto;
  max-width: 100%;
}

/* 6. El adorno vegetal, a la pared izquierda de la WEB. Su `left: 0` es el del contenedor de
 *    1170px y dejaba la albahaca flotando a 135px del borde, como si se le hubiera caído a
 *    alguien en medio de la página. Mismo `calc` que la pizza, en el otro sentido. */
.df .deals-section .deals-bg-01 {
  left: calc(50% - 50vw);
}

/* ===== 2026-08-31 · Adornos de ingrediente en las esquinas de sección =====
 *
 * DreamsFood reparte recortes de comida por las esquinas de sus secciones (`shape-01`,
 * `shape-02`, `shape-04`, `shape-09`). Al migrar se quitaron todos menos uno, y por eso la
 * home se ve más plana que su demo. Estos vuelven a ponerlos, con dos diferencias:
 *
 *   1. Son NUESTROS ingredientes, generados y recortados para el sitio, no comida de stock.
 *      Los suyos son PNG de 1 MB largo metidos dentro de un SVG —`shape-01` lleva hojas de
 *      espinaca con el rótulo "Spinach HERB" grabado—; los nuestros pesan ~50 KB.
 *   2. Van pegados a la PARED DE LA WEB, no al contenedor de 1170 px. Es la misma corrección
 *      que ya llevaba la albahaca de los combos: con el `left: 0` del template el adorno se
 *      queda flotando a 135 px del borde, como si se le hubiera caído a alguien en medio de
 *      la página.
 *
 * Reglas de la familia: decorativos (`aria-hidden` en el HTML, sin texto), fuera del alcance
 * del ratón, y solo de escritorio —en un teléfono no hay esquina que decorar y sí un ancho
 * que cuidar—. NO llevan `z-index` negativo a propósito: en este template el -1 se escapa del
 * contexto de apilamiento y el adorno desaparece detrás del fondo de la sección (ya pasó con
 * `.slide-section`). Se colocan en el hueco vacío del margen, que es donde no estorban. */
.df .pc-adorno {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Reseñas: esquina inferior izquierda. La rejilla va al 90% del ancho, así que el adorno cae
 * en el pasillo que queda entre la primera tarjeta y la pared. La sección ya trae
 * `overflow: hidden`, que es lo que recorta el trozo que se sale de la pantalla. */
.df .testimonial-section-two .pc-adorno--resenas {
  left: calc(50% - 50vw);
  bottom: 0;
  width: 280px;
  height: auto;
  opacity: 0.92;
}

/* ===== 2026-08-31 · La cabecera de sección, compartida =====
 *
 * La home abre cada sección con la cabecera de DreamsFood: una píldora con la estrella, el H2
 * debajo y la bajada pegada. El about NO la usaba en ninguna de sus seis secciones —cero contra
 * diez— y por eso parecía de otro sitio: mismos colores y misma tipografía, pero sin el gesto
 * que repite el resto de la web.
 *
 * ⚠️ Los valores son los mismos que `.pc-cat-title` / `.pc-cat-sub` de `HomeV1.astro`, que
 * viven dentro de su `<style>` y por tanto están encapsulados: el about no los ve. NO se
 * movieron aquí para no tocar el CSS de la home sin poder verla; cuando alguien pueda
 * comprobarla, esas dos reglas deberían fundirse con estas y quedar una sola familia. */
.df.pc-ab-etiqueta {
  text-align: center;
  /* El aire de la sección lo pone la etiqueta, no el titular: los dos son un mismo bloque y
     van pegados. Es la misma regla que `.df.pc-cat-etiqueta`. */
  padding-top: 88px;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .df.pc-ab-etiqueta { padding-top: 48px; }
}
/* Variante a la izquierda: para las secciones cuyo titular vive dentro de una columna de texto
 * a bandera. Una píldora centrada sobre un párrafo alineado a la izquierda queda descolgada. */
.df.pc-ab-etiqueta--izq { text-align: left; }

/* ===== OFERTA DEL DÍA = su `delicious-info` (index-1) ====================================
 * La maqueta es suya entera (df.css). Aquí, la paleta y las cuatro cosas que su demo da por
 * hechas y en nuestra página no se cumplen. */

/* 1. Sus dos cajas van en AMARILLO y VERDE del template (`--warning-transparent` y
 *    `--success-transparent`, con bordes #FF9924 y verde). Ninguno es de la marca. Pasan a los
 *    dos tonos de la casa: el rojo claro que ya usa el sistema y el ámbar secundario. Siguen
 *    distinguiéndose una de otra, que es para lo que estaban los dos colores. */
.df .delicious-item.bg-primary-light {
  background: #f7e4e3;                     /* rojo claro (--primary-100) */
  border-left: 3px solid #b52623;          /* Tomato Jam */
}
.df .delicious-item.bg-secondary-light {
  background: rgba(232, 163, 61, 0.14);    /* ámbar de marca, muy rebajado */
  border-left: 3px solid #e8a33d;
}
.df .delicious-item h3 { color: #56090d; }  /* Black Cherry, como el resto de titulares */

/* 2. El sello del precio. Su fondo es `shape-08.svg`, que traía el rojo del template
 *    (#EB1400); la copia de `df/sello-oferta-5.svg` ya va en Tomato Jam. Y su `h2` de 72px
 *    es para un "20+"; un "$5" con el símbolo cabe mejor un punto más pequeño. */
.df .delicious-info .delicious-img .offer-item {
  background-image: url('/assets/images/df/sello-oferta-5.svg');
}
.df .delicious-info .delicious-img .offer-item h2 { font-size: 60px; line-height: 1; }
.df .delicious-info .delicious-img .offer-item p { font-size: 15px; margin: 0; }

/* 3. Su foto redonda gira 360º en 126 segundos. Con una pizza cenital funciona —se lee como el
 *    plato girando en la mesa—, pero hay que respetar a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .df .delicious-info .delicious-img .delicious-main-img,
  .df .delicious-info .delicious-img .offer-item { animation: none; }
}

/* 4. La foto se esconde por debajo de 992px en su demo (`display: none`) y la sección se queda
 *    en media pieza. Aquí la pizza ES la oferta: se enseña, centrada y más pequeña, con el
 *    sello proporcionado. */
@media (max-width: 991.98px) {
  .df .delicious-info .delicious-img {
    display: block;
    max-width: 320px;
    margin: 0 auto 32px;
  }
  .df .delicious-info .delicious-img .offer-item {
    width: 120px; height: 120px; padding: 16px; bottom: 0; right: 0;
  }
  .df .delicious-info .delicious-img .offer-item h2 { font-size: 32px; }
  .df .delicious-info .delicious-img .offer-item p { font-size: 13px; }
}

/* ===== 2026-08-31 · Pantallas de cuenta, en paleta PA' COMER =====
 *
 * 🔴 SOLO FRONTEND: no hay backend detrás. Ver la cabecera de `src/components/AuthPage.astro`.
 *
 * La maqueta es la suya sin tocar (`login-page`, `auth-wrap`, `login-form`…), extraída con
 * `scripts/extraer-df.mjs`. Aquí van solo los colores: su demo trae naranjas y grises que no
 * son de la marca. */

/* ⚠️ NO se toca aquí ni el fondo de `.login-page` ni el de `.login-form` ni el de
 * `.auth-right`. Su `.login-page` ya trae `background-color: var(--light)` —que en nuestra
 * paleta ES el Eggshell— más el line-art de platos del borde izquierdo
 * (`background-image: url(../img/bg/login-bg-2.png)`), y `.login-form` va TRANSPARENTE encima
 * para que ese dibujo se vea. Pintarlos fue el error de la primera versión: tapaba el diseño
 * que veníamos a copiar.
 *
 * (El line-art no salía porque el CSS extraído conserva las rutas del template —`../img/…`— y
 * esos archivos no estaban en `public/assets/img/`. Se copiaron los nueve que faltaban; ver
 * DECISIONES.) */

/* El logo va tal cual, sin caja: usa la variante Tomato Jam, que es la que se lee sobre el
 * hueso. La Eggshell está pensada para el header rojo y aquí desaparecería. */

.df .pc-auth h3 {
  font-family: 'D-DIN Condensed', 'Gabarito', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #56090d;                          /* Black Cherry */
}
.df .pc-auth .text-center p { color: #6b5f5c; }

/* Campos: papel sobre el hueso, con el borde de la marca. El foco en Tomato Jam, que es lo que
 * el template resuelve con su naranja. */
.df .pc-auth .form-control {
  background-color: #faf8f2;
  border-color: rgba(86, 9, 13, 0.15);
  color: #010201;
}
.df .pc-auth .form-control::placeholder { color: #6b5f5c; opacity: 1; }
.df .pc-auth .form-control:focus {
  border-color: #b52623;
  box-shadow: 0 0 0 3px rgba(181, 38, 35, 0.15);
}
.df .pc-auth .input-group-text {
  background-color: #faf8f2;
  border-color: rgba(86, 9, 13, 0.15);
  color: #6b5f5c;
  cursor: pointer;
}
.df .pc-auth .form-check-input:checked {
  background-color: #b52623;
  border-color: #b52623;
}
.df .pc-auth .form-check-label { color: #6b5f5c; }

/* Botón principal y botones sociales. */
.df .pc-auth .btn-primary {
  background-color: #b52623;
  border-color: #b52623;
  color: #f3f1e9;
}
.df .pc-auth .btn-primary:hover,
.df .pc-auth .btn-primary:focus {
  background-color: #56090d;
  border-color: #56090d;
}
.df .pc-auth .btn-login {
  background-color: #faf8f2;
  border: 1px solid rgba(86, 9, 13, 0.15);
  color: #56090d;
}
.df .pc-auth .btn-login:hover { background-color: #f3f1e9; border-color: #b52623; }

/* Enlaces del formulario: su demo los pinta en su naranja y en `text-danger`. */
.df .pc-auth a { color: #b52623; }
.df .pc-auth a:hover { color: #56090d; }
.df .pc-auth .pc-auth-pie { color: #6b5f5c; }

/* El separador "O". */
.df .pc-auth .or-div span { background-color: #f3f1e9; color: #6b5f5c; }

/* 🔴 El aviso de que esto NO funciona todavía. Va en la banda de arriba del formulario, con el
 * arena del sistema —el nivel "hueco"— y el borde en Tomato Jam para que no pase por un
 * párrafo de relleno. Al intentar enviar, parpadea. */
.df .pc-auth .pc-auth-aviso {
  margin: 0 0 20px;
  padding: 12px 16px;
  background-color: #ebe7dc;
  border-left: 3px solid #b52623;
  border-radius: 8px;
  font-family: 'Gabarito', sans-serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #56090d;
  transition: background-color 0.2s ease;
}
.df .pc-auth .pc-auth-aviso--llama { background-color: #f4dbd9; }

/* El panel de la derecha: su `.auth-right` no lleva fondo —es solo un `padding: 20px` que
 * enmarca la foto redondeada de dentro—, así que aquí tampoco. Solo el texto del pie. */
.df .pc-auth .slide-content h2,
.df .pc-auth .slide-content p { color: #f3f1e9; }

/* ⚠️ Degradado bajo el pie de foto. Su plantilla pone el texto en blanco de 54px DIRECTAMENTE
 * sobre la imagen, sin nada debajo: si un día entra una foto clara por ahí, el pie desaparece.
 * Las cuatro que hay se generaron con el tercio inferior oscuro justo por esto, pero que el
 * texto se lea no puede depender de cómo salga una foto. El velo va del transparente al
 * Black Cherry y no toca la mitad de arriba, que es donde está la comida. */
.df .pc-auth .auth-slider .slide-item { position: relative; }
.df .pc-auth .auth-slider .slide-item::after {
  content: '';
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(to bottom, rgba(86, 9, 13, 0) 0%, rgba(86, 9, 13, 0.72) 100%);
  pointer-events: none;
  z-index: 1;
}