/*
Theme Name: Candy's Repostería Artesanal
Theme URI: https://candysreposteria.com
Description: Child theme de GeneratePress para Candy's Repostería Artesanal (Málaga). Tipografía
  autoalojada, patrones de bloques propios, cero JavaScript de terceros. Referencia visual:
  milkbarstore.com — su armazón medido en su propia página (negro + blanco + crema, botones
  negros, mayúsculas rotundas), con el naranja de la casa en el papel de acento.
Author: Pascual Ibáñez
Template: generatepress
Version: 3.0.0
Text Domain: candys
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. TIPOGRAFÍA AUTOALOJADA
   Fuentes variables descargadas el 1-ago-2026 (OFL, de Google Fonts, pero
   servidas desde ESTE servidor: la web nunca contacta con Google).
   124 KB las dos familias completas, frente a los 542 KB que la web vieja
   servía en tres formatos duplicados.
   ═══════════════════════════════════════════════════════════════════════ */

/* Archivo — titulares. Sustituto libre de Garnett (la de Milk Bar): mismo
   carácter geométrico y rotundo en los pesos altos. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk — texto corrido. Humanista, se lee bien en móvil. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/hanken-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/hanken-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. TOKENS
   Los valores vienen MEDIDOS de milkbarstore.com el 1-ago-2026 con
   Playwright (capturas/milkbar/valores.json y geometria.json), no de ojo:
   su paleta real es negro (59 elementos), blanco (51), rosa de acento (45),
   beige de tarjeta (35) y crema (#FFEFDA). El naranja de Candy's hace de
   rosa: acento escaso, nunca protagonista.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Armazón: el negro es el color de ACCIÓN (botones, franjas, pie). */
  --candys-tinta: #1a1a1a;
  --candys-tinta-suave: #4a4a4a;
  --candys-blanco: #ffffff;
  --candys-crema: #ffefda;        /* el crema exacto de la referencia */
  --candys-beige: #e8e2d8;        /* fondo de las tarjetas de producto */
  --candys-borde: #1a1a1a;

  /* Acento: el naranja de la marca, medido en la web actual. El claro para
     superficies; el hondo para texto y botones (4,85 de contraste, WCAG AA). */
  --candys-naranja: #d95204;
  --candys-naranja-hondo: #c44a03;
  --candys-whatsapp: #25d366;

  /* Tipografía */
  --candys-titular: 'Archivo', system-ui, -apple-system, sans-serif;
  --candys-texto: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Escala. Los titulares de la referencia son de 31-38px sobre columnas
     ESTRECHAS: el descaro viene de las mayúsculas apretadas, no del tamaño.
     Aquí se sube un poco (pantallas de 2026) manteniendo el carácter. */
  --candys-t-display: clamp(1.875rem, 3.6vw, 4.5rem);
  --candys-t-h1: clamp(2rem, 3.2vw, 4rem);
  --candys-t-h2: clamp(1.75rem, 2.6vw, 3.25rem);
  --candys-t-h3: clamp(1.0625rem, 1.1vw, 1.375rem);
  --candys-t-base: clamp(1rem, 0.95vw, 1.125rem);
  --candys-t-pequeno: 0.8125rem;

  /* Espaciado */
  --candys-e1: 0.25rem;
  --candys-e2: 0.5rem;
  --candys-e3: 1rem;
  --candys-e4: 1.5rem;
  --candys-e5: 2rem;
  --candys-e6: 3rem;
  --candys-e7: 5.5rem;    /* padding vertical de sección: 88px */
  --candys-e8: 7.5rem;    /* sección destacada: 120px */
  --candys-e9: 10rem;     /* secciones que piden respirar de verdad: 160px */

  --candys-radio: 10px;         /* el radio de sus botones, medido */
  --candys-radio-foto: 18px;    /* las fotos flotan con margen: más radio */
  --candys-radio-carta: 28px;   /* los bloques de color como tarjetas */
  /* Margen lateral GLOBAL (de Fazora, medido: 60-72px a 1440). Nada toca el
     borde de la ventana: es lo que hace que la página respire. */
  --candys-margen: clamp(16px, 3vw, 76px);
  /* Medida de lectura ÚNICA. Antes convivían 54rem (FAQ), 68rem (reseña),
     60rem (lectura), 56rem (cabecera de sección) y 1400px (migas): siete
     carriles en la misma página. 66ch es el óptimo de lectura y sirve para
     todo. Los bloques nunca llevan padding lateral propio: el carril lo pone
     la sección. */
  --candys-lectura: 66ch;
  --candys-ancho: 1400px;       /* SOLO para bloques de texto centrado */
  --candys-ancho-texto: 62ch;
  --candys-lateral: clamp(1rem, 3vw, 1.875rem);
  /* Altura del armazón fijo de arriba (barra de anuncio + cabecera), medida
     el 1-ago-2026: 172px en escritorio, 131 en móvil. */
  --candys-armazon: 199px;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. BASE
   ═══════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--candys-texto);
  font-size: var(--candys-t-base);
  line-height: 1.5;
  color: var(--candys-tinta);
  background: var(--candys-blanco);
  -webkit-font-smoothing: antialiased;
}

/* MAYÚSCULAS en todos los titulares: es la marca de la casa de la
   referencia (el 100% de sus h1/h2/h3 llevan text-transform: uppercase).
   En español las mayúsculas SÍ llevan tilde, y las fuentes las traen. */
h1, h2, h3, h4,
.candys-display {
  font-family: var(--candys-titular);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--candys-tinta);
  margin-top: 0;
  text-wrap: balance;
  /* Sin esto, WordPress parte las palabras largas por la mitad:
     "TARTAS ARTESANALE / S EN MÁLAGA". Cazado en el QA del 1-ago. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

h1 { font-size: var(--candys-t-h1); }
h2 { font-size: var(--candys-t-h2); }
h3 { font-size: var(--candys-t-h3); font-weight: 700; letter-spacing: 0; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 var(--candys-e3); }
p:last-child { margin-bottom: 0; }

a { color: var(--candys-naranja-hondo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--candys-tinta); }

img { max-width: 100%; height: auto; }

/* Antetítulo: la etiqueta pequeña sobre el titular ("INTRODUCING" en la
   referencia). 15px, peso 700, mayúsculas. */
.candys-antetitulo {
  font-family: var(--candys-titular);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--candys-e2);
  color: var(--candys-naranja-hondo);
}

/* ═══════════════════════════════════════════════════════════════════════
   3-bis. EL MARGEN ENTRE BLOQUES DE WORDPRESS, FUERA DE LAS REJILLAS

   WordPress separa los bloques hermanos con `margin-block-start` (24px por
   defecto, su block-gap). Dentro de una rejilla eso es veneno: el primer
   item no lo lleva y los demás sí, así que la primera tarjeta se estira a
   la altura de la fila (medido: 172px) y las otras tres bajan 24px y se
   quedan en 148. Se ve como "bloques desiguales" y NINGUNA métrica lo
   detecta: no hay desbordamiento, ni error, ni imagen rota.

   Cazado el 1-ago-2026 por Pascual mirando la pantalla. La comprobación
   automática vive ahora en `herramientas/alineacion.mjs`.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-parrilla > *,
.candys-razones > *,
.candys-instagram > *,
.candys-hero__fotos > *,
.candys-resenas__lista > *,
.candys-hub-cabecera > *,
.candys-hub-cabecera__fotos > *,
.candys-producto > *,
.candys-producto__galeria > *,
.candys-producto__miniaturas > *,
.candys-faq > *,
.candys-resena-unica > *,
.candys-pasos > *,
.candys-collage > *,
.candys-cta__acciones > *,
.candys-hero__acciones > *,
.candys-cta__acciones > *,
.candys-editorial > * {
  margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. CONTENEDORES Y SECCIONES
   ═══════════════════════════════════════════════════════════════════════ */

/* GeneratePress limita el contenido; aquí las secciones van a sangre y el
   límite se pone dentro de cada una. */
.entry-content > * { margin-block: 0; }

.candys-seccion {
  /* F1, frontera entre hermanos del mismo acto: 44px + 44px = 88 totales.
     Los saltos de acto usan las clases de abajo. La uniformidad de paddings
     era la causa medida del "una sección tras otra". */
  padding: 5.5rem 0;
  background: var(--candys-blanco);
}
/* F2, salto de acto: el bloque que abre un acto y el que lo cierra respiran
   120px por ese lado. Doble clase para ganar a la base sin !important. */
.candys-seccion.candys-abre-acto { padding-top: 11.5rem; }
.candys-seccion.candys-cierra-acto { padding-bottom: 11.5rem; }
/* El primer bloque tras el hero a pantalla completa. */
.candys-seccion.candys-seccion--primera { padding-top: 8.5rem; }
.candys-seccion--crema { background: var(--candys-crema); }
/* Sobre crema, el naranja de marca se queda en 4,34 de contraste y WCAG AA
   pide 4,5 (medido, no estimado). Los enlaces van en tinta, que además es lo
   que hace la referencia: enlaces negros subrayados. */
.candys-seccion--crema a:not(.candys-btn) { color: var(--candys-tinta); }
.candys-seccion--crema .candys-antetitulo { color: var(--candys-tinta); }
.candys-seccion--beige { background: var(--candys-beige); }
.candys-seccion--tinta { background: var(--candys-tinta); color: var(--candys-blanco); }
/* El bloque de conversión va en NARANJA: pegado al pie negro se fundían en
   una sola mancha, y este es el bloque que tiene que llamar la atención. */
.candys-seccion--naranja { background: var(--candys-naranja-hondo); color: var(--candys-blanco); }
.candys-seccion--naranja:has(.candys-cta--foto) { padding: 0; }
.candys-seccion--naranja h1,
.candys-seccion--naranja h2,
.candys-seccion--naranja h3 { color: var(--candys-blanco); }
.candys-seccion--naranja .candys-cta__texto,
.candys-cta--foto .candys-cta__texto { color: var(--candys-blanco); }
.candys-seccion--naranja .candys-btn,
.candys-cta--foto .candys-btn {
  background: var(--candys-blanco);
  border-color: var(--candys-blanco);
  color: var(--candys-tinta);
}
.candys-seccion--naranja .candys-btn:hover {
  background: var(--candys-tinta);
  border-color: var(--candys-tinta);
  color: var(--candys-blanco);
}
.candys-seccion--naranja .candys-btn--hueco,
.candys-cta--foto .candys-btn--hueco {
  background: transparent;
  color: var(--candys-blanco);
  border-color: var(--candys-blanco);
}
.candys-seccion--naranja .candys-btn--hueco:hover {
  background: var(--candys-blanco);
  color: var(--candys-tinta);
}
.candys-seccion--tinta h1,
.candys-seccion--tinta h2,
.candys-seccion--tinta h3 { color: var(--candys-blanco); }
.candys-seccion--holgada { padding: var(--candys-e8) 0; }
.candys-seccion--aire { padding: var(--candys-e9) 0; }
.candys-seccion--sin-arriba { padding-top: 0; }

.candys-limite {
  max-width: var(--candys-ancho);
  margin-inline: auto;
  padding-inline: var(--candys-lateral);
}

/* Cabecera de sección: titular gordo centrado + entradilla corta. Es su
   patrón de "FROM OUR BAKERY TO YOUR DOOR". */
.candys-cabecera-seccion {
  text-align: center;
  max-width: min(56rem, 100%);
  margin: 0 auto var(--candys-e6);
  padding-inline: var(--candys-margen);
}
/* Variante a la izquierda: rompe el compás de titular centrado repetido
   seis veces (hallazgo del crítico). La usan la tira y el collage. */
.candys-cabecera-seccion--izq {
  text-align: left;
  max-width: none;
  margin-left: 0;
  padding-inline: var(--candys-margen);
}

.candys-cabecera-seccion p {
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
  color: var(--candys-tinta-suave);
  margin-top: var(--candys-e3);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. BOTONES
   Medidos: fondo negro, texto crema, 15px peso 700 en mayúsculas,
   radio 10px, padding 0 30px, altura de línea 24px.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 30px;
  font-family: var(--candys-titular);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid var(--candys-tinta);
  border-radius: var(--candys-radio);
  background: var(--candys-tinta);
  color: var(--candys-crema);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.candys-btn:hover,
.wp-block-button__link:hover {
  background: var(--candys-naranja-hondo);
  border-color: var(--candys-naranja-hondo);
  color: var(--candys-blanco);
  transform: translateY(-1px);
}

/* Hueco: para el segundo botón, sin apagarlo (el peso visual se mantiene). */
.candys-btn--hueco {
  background: transparent;
  color: var(--candys-tinta);
}
.candys-btn--hueco:hover {
  background: var(--candys-tinta);
  border-color: var(--candys-tinta);
  color: var(--candys-crema);
}

/* Sobre fondo oscuro */
.candys-seccion--tinta .candys-btn--hueco {
  color: var(--candys-blanco);
  border-color: var(--candys-blanco);
}
.candys-seccion--tinta .candys-btn--hueco:hover {
  background: var(--candys-blanco);
  color: var(--candys-tinta);
}

/* Naranja: reservado para el empujón final, uno por pantalla como mucho. */
.candys-btn--naranja {
  background: var(--candys-naranja-hondo);
  border-color: var(--candys-naranja-hondo);
  color: var(--candys-blanco);
}
.candys-btn--naranja:hover {
  background: var(--candys-tinta);
  border-color: var(--candys-tinta);
  color: var(--candys-crema);
}

.candys-btn--ancho { width: 100%; }

/* Enlace de texto con subrayado grueso, su remate del "SHOP NOW". */
.candys-enlace-fuerte {
  font-family: var(--candys-titular);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. BARRA DE ANUNCIO (negra, arriba del todo)
   ═══════════════════════════════════════════════════════════════════════ */

.candys-anuncio {
  background: var(--candys-tinta);
  color: var(--candys-crema);
  padding: 9px var(--candys-lateral);
  text-align: center;
}
.candys-anuncio p {
  margin: 0;
  font-family: var(--candys-titular);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.candys-anuncio a { color: var(--candys-crema); }
.candys-anuncio a:hover { color: var(--candys-blanco); }
.candys-anuncio__sep { opacity: .45; margin-inline: var(--candys-e2); }

@media (max-width: 600px) {
  .candys-anuncio p { font-size: 0.75rem; }
  /* En móvil se esconde el dato menos urgente para que quepa en una línea. */
  .candys-anuncio__secundario { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. CABECERA
   Logo centrado, navegación en mayúsculas bajo él, y el CTA a la derecha.
   Sin JavaScript: el menú de móvil es un <details>.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--candys-blanco);
  border-bottom: 1px solid rgba(26, 26, 26, .12);
}
.candys-cabecera__fila {
  display: grid;
  /* Logo CENTRADO y la navegación en su propia fila debajo: es la versión que
     Pascual prefiere. `1fr auto 1fr` mantiene el logo en el centro exacto de
     la pantalla aunque el botón de la derecha mida lo que mida. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--candys-e4);
  max-width: none;
  padding: 16px var(--candys-lateral);
}

/* El logo, en caja negra como el de la referencia. */
.candys-marca {
  display: inline-block;
  grid-column: 2;
  justify-self: center;
  background: var(--candys-naranja-hondo);
  color: var(--candys-blanco);
  font-family: var(--candys-titular);
  font-weight: 900;
  font-size: clamp(1rem, 2.4vw, 1.375rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--candys-radio);
  white-space: nowrap;
}
.candys-marca:hover { background: var(--candys-tinta); color: var(--candys-crema); }

.candys-cabecera__izq { grid-column: 1; display: none; align-items: center; gap: var(--candys-e3); }
.candys-cabecera__der { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--candys-e3); }
.candys-cabecera__der .candys-btn {
  min-height: 40px;
  padding: 8px 20px;
  font-size: 0.8125rem;
  /* HUECO a propósito: el logo y el botón eran dos cajas negras gemelas
     (hallazgo de los dos agentes). En la cabecera solo hay UNA caja negra:
     la marca. */
  background: transparent;
  color: var(--candys-tinta);
  border-color: var(--candys-tinta);
}
.candys-cabecera__der .candys-btn:hover {
  background: var(--candys-naranja-hondo);
  border-color: var(--candys-naranja-hondo);
  color: var(--candys-blanco);
}

/* Navegación: segunda fila, centrada, separada por una línea fina. */
.candys-nav {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(26, 26, 26, .1);
  margin-top: 14px;
}
.candys-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--candys-e4), 2.5vw, var(--candys-e6));
  list-style: none;
  margin: 0;
  padding: 16px var(--candys-lateral) 0;
}
.candys-nav a {
  font-family: var(--candys-titular);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--candys-tinta);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.candys-nav a:hover,
.candys-nav a[aria-current="page"] {
  border-bottom-color: var(--candys-naranja-hondo);
  color: var(--candys-naranja-hondo);
}

/* Menú de móvil sin JavaScript */
.candys-menu-movil { display: none; }
.candys-menu-movil > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--candys-titular);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}
.candys-menu-movil > summary::-webkit-details-marker { display: none; }
.candys-menu-movil__barras {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}
.candys-menu-movil__barras span { display: block; height: 2px; background: var(--candys-tinta); }
.candys-menu-movil[open] .candys-menu-movil__panel {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--candys-blanco);
  border-bottom: 1px solid rgba(26, 26, 26, .12);
  box-shadow: 0 12px 24px rgba(26, 26, 26, .08);
  padding: var(--candys-e3) 0;
}
.candys-menu-movil__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.candys-menu-movil__panel a {
  display: block;
  padding: 12px var(--candys-lateral);
  font-family: var(--candys-titular);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--candys-tinta);
}
.candys-menu-movil__panel a:hover { background: var(--candys-crema); }

@media (max-width: 1000px) {
  .candys-nav { display: none; }
  .candys-cabecera__izq { display: flex; }
  .candys-menu-movil { display: block; }
  .candys-cabecera__fila { grid-template-columns: 1fr auto 1fr; }
  .candys-marca { grid-column: 2; justify-self: center; }
  .candys-cabecera__der .candys-btn span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   8. HERO
   Su bloque estrella, medido: columna de texto estrecha (~400px) a la
   izquierda, centrada en su hueco, y DOS fotos verticales de 443x590
   (ratio 3/4) a la derecha, a sangre por el lado.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-hero { background: var(--candys-blanco); padding: 0; }
/* A PANTALLA COMPLETA al entrar. Se usa `svh` y no `vh`: en móvil `vh`
   cuenta la barra del navegador y el bloque queda cortado. */
.candys-hero__interior { min-height: calc(100svh - var(--candys-armazon)); }
.candys-hero__interior {
  display: grid;
  grid-template-columns: minmax(320px, 32%) 1fr;
  /* stretch, no center: la columna de fotos tiene que llenar la altura del
     hero o el fondo del marco asoma por debajo de la imagen. */
  align-items: stretch;
  gap: clamp(var(--candys-e4), 3vw, var(--candys-e5));
  /* sin tope de anchura: en un monitor de 2560 un max-width dejaba 180px de
     margen muerto y las fotos NO llegaban al borde. */
  max-width: none;
  /* sin padding a la DERECHA: las fotos llegan al borde de la ventana */
  padding: var(--candys-e4) var(--candys-margen) var(--candys-e5) var(--candys-lateral);
}
.candys-hero__texto {
  max-width: min(30rem, 100%);
  margin-inline: auto;
  align-self: center;
  text-align: center;
}
.candys-hero__texto h1 { font-size: var(--candys-t-display); margin-bottom: var(--candys-e3); }
/* La valoración, justo debajo del titular: es lo primero que mira quien no
   conoce el obrador, y son reseñas reales de su ficha de Google. */
.candys-hero__nota {
  font-size: clamp(0.8125rem, 0.9vw, 1rem);
  color: var(--candys-tinta-suave);
  margin-bottom: var(--candys-e3);
}
.candys-hero__nota strong { color: var(--candys-tinta); }
.candys-hero__estrellas { color: var(--candys-naranja-hondo); letter-spacing: 1px; }

.candys-hero__entradilla {
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
  line-height: 1.5;
  color: var(--candys-tinta-suave);
  margin-bottom: var(--candys-e4);
}
.candys-hero__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--candys-e3);
}
/* Los <p> que envuelven botones NO deben aportar altura de línea. */
.candys-hero__acciones p,
.candys-cta__acciones p,
.candys-tarjeta__accion p,
.candys-editorial__texto p:has(> .candys-btn) { margin: 0; display: flex; }

/* Las fotos: dos verticales en paralelo, recortadas al mismo ratio. */
.candys-hero__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--candys-e3);
}
.candys-hero__fotos figure { margin: 0; line-height: 0; background: var(--candys-beige); border-radius: var(--candys-radio-foto); overflow: hidden; }
.candys-hero__fotos figure,
.candys-hero__foto figure { height: 100%; }

/* La pantalla completa, exacta. Con `min-height` el padding se sumaba por
   encima y el hero se pasaba 95px (medido). Con altura fija, el 100% de las
   fotos resuelve contra ella. */
@media (min-width: 861px) {
  .candys-hero__interior {
    height: calc(100svh - var(--candys-armazon));
    min-height: 0;
    box-sizing: border-box;
  }
  .candys-hero__fotos { height: 100%; }
}
.candys-hero__fotos img,
.candys-hero__foto img {
  display: block;
  width: 100%;
  /* llenan el marco entero, que a su vez llena la altura del hero */
  height: 100%;
  object-fit: cover;
  border-radius: var(--candys-radio-foto);
}
.candys-hero__foto { margin: 0; }

@media (max-width: 860px) {
  :root { --candys-armazon: 127px; }
  .candys-hero__interior {
    grid-template-columns: 1fr;
    padding: var(--candys-e4) var(--candys-lateral);
    gap: var(--candys-e4);
    /* en móvil NO se fuerza la pantalla completa: con el texto debajo de la
       foto, obligar a 100svh dejaría un hueco muerto */
    min-height: 0;
  }
  /* En móvil la foto va PRIMERO: es lo que vende. */
  .candys-hero__fotos, .candys-hero__foto { order: -1; }
  .candys-hero__fotos img, .candys-hero__foto img { height: clamp(240px, 42svh, 380px); }
  .candys-hero__fotos figure, .candys-hero__foto figure { height: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   8-bis. EL SELLO DEL OBRADOR — componente-firma de la casa
   Sello circular naranja "HECHO A MANO · EN MÁLAGA · DESDE 2004" que gira
   lento (CSS puro). Abre la página solapado en la foto del hero y la cierra
   en la foto del CTA: el mismo gesto en los dos extremos, y además anuncia
   el naranja del bloque de conversión.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-sello-obrador {
  position: absolute;
  width: clamp(96px, 9vw, 148px);
  height: clamp(96px, 9vw, 148px);
  z-index: 5;
  filter: drop-shadow(0 4px 14px rgba(26, 26, 26, .18));
}
.candys-sello-obrador svg { width: 100%; height: 100%; display: block; }
.candys-sello-obrador .candys-sello-obrador__giro {
  transform-origin: 50% 50%;
  animation: candys-girar 40s linear infinite;
}
@keyframes candys-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .candys-sello-obrador .candys-sello-obrador__giro { animation: none; }
}
.candys-hero__fotos { position: relative; }
.candys-hero__fotos .candys-sello-obrador { left: 0; bottom: 7%; transform: translateX(-46%); }
.candys-cta__foto { position: relative; }
.candys-cta__foto .candys-sello-obrador { right: 4%; top: 5%; }
@media (max-width: 860px) {
  /* en móvil el sello vive DENTRO de la foto: colgando del borde asomaba
     3px fuera de la pantalla (medido por el QA) */
  .candys-hero__fotos .candys-sello-obrador { left: 12px; bottom: 12px; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. TARJETAS DE PRODUCTO
   La pieza más característica de la referencia: la foto se apoya en un
   fondo BEIGE (por eso funcionan las fotos de producto sobre fondo claro),
   el título va centrado en mayúsculas, y el botón negro ocupa TODO el
   ancho de la tarjeta.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-parrilla {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(4, 1fr);
  /* fila mayor que columna: la etiqueta estaba a 21px de su foto y a 18 de la
     de abajo, así que no se sabía a quién pertenecía. */
  gap: var(--candys-e6) var(--candys-e3);
  max-width: none;
  padding-inline: var(--candys-margen);
}
.candys-parrilla--3 { grid-template-columns: repeat(3, 1fr); }

/* La tira: fila con scroll donde la última tarjeta ASOMA CORTADA por el
   borde. Es el gesto más reconocible de la referencia (su carrusel enseña
   4,4 tarjetas): la tarjeta cortada dice "hay más" sin ninguna flecha. */
.candys-parrilla--tira {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100vw - 2 * var(--candys-margen) - 4 * var(--candys-e3)) / 4.2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* barra FINA y visible en el naranja de la casa: sin ella, la tarjeta
     cortada parecía un slider roto (no hay rueda horizontal en escritorio) */
  scrollbar-width: thin;
  scrollbar-color: var(--candys-naranja-hondo) var(--candys-beige);
  padding-bottom: var(--candys-e3);
}
.candys-parrilla--tira::-webkit-scrollbar { height: 8px; }
.candys-parrilla--tira::-webkit-scrollbar-track { background: var(--candys-beige); border-radius: 4px; }
.candys-parrilla--tira::-webkit-scrollbar-thumb { background: var(--candys-naranja-hondo); border-radius: 4px; }
.candys-parrilla--tira > * { scroll-snap-align: start; }
@media (max-width: 860px) {
  .candys-parrilla--tira { grid-auto-columns: calc((100vw - 3 * var(--candys-e3)) / 1.4); }
}

.candys-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--candys-blanco);
  border: 1px solid rgba(26, 26, 26, .1);
  border-radius: var(--candys-radio);
  text-align: center;
}

/* El bloque de la foto: fondo beige y la imagen encajada dentro. */
.candys-tarjeta__foto,
.candys-tarjeta > figure {
  margin: 0;
  line-height: 0;   /* mata el hueco fantasma de 24px bajo la imagen */
  background: var(--candys-beige);
}
.candys-tarjeta__foto img,
.candys-tarjeta > figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* multiply: el fondo blanco de las fotos de producto se funde con el
     beige del marco y queda "producto sobre beige", que es la pieza más
     característica de la referencia y estaba tapada (hallazgo del crítico). */
  mix-blend-mode: multiply;
  object-fit: cover;
  /* el radio va en la IMAGEN: así la tarjeta no necesita overflow:hidden y
     el sello de la esquina no se corta */
  border-radius: 9px 9px 0 0;
}

.candys-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--candys-e2);
  padding: var(--candys-e4) var(--candys-e3) 0;
  flex: 1;
}
.candys-tarjeta h3 {
  font-size: clamp(1.0625rem, 1.15vw, 1.375rem);
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
}
.candys-tarjeta p {
  font-size: clamp(0.875rem, 0.95vw, 1.0625rem);
  line-height: 1.5;
  color: var(--candys-tinta-suave);
  margin: 0;
}
/* El botón, pegado abajo y a todo el ancho. */
.candys-tarjeta__accion { margin-top: auto; padding: var(--candys-e4) var(--candys-e3) var(--candys-e3); }
.candys-tarjeta__accion .candys-btn { width: 100%; }

/* Etiqueta pill en la esquina ("BEST SELLER" de la referencia). */
/* OJO al escribir utilidades en este CSS: `.candys-tarjeta p { color: ... }`
   (clase + tipo) PISA a `.candys-etiqueta` (clase sola). Ha pasado tres
   veces; por eso la utilidad va con el selector del contenedor delante. */
.candys-tarjeta p.candys-etiqueta,
.candys-etiqueta {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--candys-tinta);
  border: 0;
  color: var(--candys-crema);
  font-family: var(--candys-titular);
  font-size: clamp(0.75rem, 0.85vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
}


@media (max-width: 600px) {
  /* En móvil, dos por fila: se ven cuatro productos en una pantalla en vez
     de uno, que es lo que hace la referencia y lo que ayuda a comparar. */
  .candys-parrilla { grid-template-columns: 1fr 1fr; gap: var(--candys-e3); }
  .candys-tarjeta h3 { font-size: 0.9375rem; }
  .candys-tarjeta p { font-size: 0.8125rem; }
  .candys-tarjeta__cuerpo { padding: var(--candys-e3) var(--candys-e2) 0; }
  .candys-tarjeta__accion { padding: var(--candys-e3) var(--candys-e2) var(--candys-e2); }
  .candys-tarjeta__accion .candys-btn { min-height: 42px; padding: 10px 12px; font-size: 0.75rem; }
}

/* Tarjeta de categoría: foto arriba y el título DEBAJO, fuera de la caja
   (su patrón de "BIRTHDAYS / THANK YOU / CONGRATS"). */
.candys-categoria { text-align: center; text-decoration: none; display: block; }
.candys-categoria { line-height: normal; }
.candys-categoria img { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.candys-categoria { overflow: hidden; border-radius: var(--candys-radio-foto); }
.candys-categoria:hover img { transform: scale(1.03); }
.candys-categoria:hover .candys-categoria__titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.candys-categoria img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--candys-radio-foto);
  margin-bottom: var(--candys-e3);
}
.candys-categoria__titulo {
  font-family: var(--candys-titular);
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.75vw, 1.0625rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--candys-tinta);
}
.candys-categoria:hover .candys-categoria__titulo { color: var(--candys-naranja-hondo); }

/* ═══════════════════════════════════════════════════════════════════════
   10. EDITORIAL (foto + texto)
   Medido: la foto ocupa ~40% y el texto se queda en una columna estrecha
   con mucho aire alrededor. Ratio de foto 3/4, no panorámica.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-editorial {
  display: grid;
  /* espejo del hero: fotos 68% a la izquierda, texto 32% a la derecha */
  grid-template-columns: 1fr minmax(320px, 32%);
  align-items: center;
  gap: clamp(var(--candys-e4), 3vw, var(--candys-e5));
  max-width: none;
  padding: 0 var(--candys-lateral) 0 var(--candys-margen);
}
.candys-editorial__fotos {
  margin: 0;
  line-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--candys-e3);
}
.candys-editorial__fotos figure { margin: 0; line-height: 0; }
.candys-editorial__fotos img {
  display: block;
  width: 100%;
  /* verticales 3/4, como las del hero y las de la referencia */
  aspect-ratio: 3 / 4;
  height: auto;
  max-height: 720px;
  object-fit: cover;
  border-radius: var(--candys-radio-foto);
}
.candys-editorial__texto {
  max-width: min(28rem, 100%);
  margin-inline: auto;
  text-align: center;
}
.candys-editorial__texto h2 { margin-bottom: var(--candys-e3); }
.candys-editorial__texto p { font-size: clamp(1rem, 1.05vw, 1.1875rem); line-height: 1.55; color: var(--candys-tinta-suave); }
.candys-editorial__texto .candys-btn { margin-top: var(--candys-e3); }

@media (max-width: 860px) {
  .candys-editorial {
    grid-template-columns: 1fr;
    gap: var(--candys-e4);
    padding: 0 var(--candys-lateral);
  }
  .candys-editorial__texto { max-width: none; }
  .candys-editorial__fotos img { aspect-ratio: 3 / 4; max-height: 420px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   11. RAZONES ("¿POR QUÉ CANDY'S?")
   Medido: fondo CREMA (no negro), tres columnas, icono a línea arriba,
   título en mayúsculas pequeño y párrafo corto centrado.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--candys-e6) var(--candys-e5);
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--candys-lateral);
  text-align: center;
}
.candys-razon__icono {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--candys-e4);
  color: var(--candys-tinta);
}
.candys-razon__icono svg { width: 100%; height: 100%; display: block; }
.candys-razon h3 {
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--candys-e2);
}
.candys-razon p { font-size: 0.9375rem; line-height: 1.5; color: var(--candys-tinta-suave); margin: 0; }

@media (max-width: 600px) {
  .candys-razones { grid-template-columns: 1fr 1fr; gap: var(--candys-e4); }
}

/* ═══════════════════════════════════════════════════════════════════════
   11-bis. ANCHOS INTERMEDIOS (tablet)
   En una tableta de 810px, `auto-fit` metía 3 tarjetas en la primera fila y
   dejaba la cuarta SOLA abajo. Cazado en el QA con visión: las métricas no lo
   ven porque no hay desbordamiento, solo queda mal. Se fuerza 2x2.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 601px) and (max-width: 1100px) {
  .candys-parrilla { grid-template-columns: 1fr 1fr; }
  .candys-parrilla--3 { grid-template-columns: repeat(3, 1fr); }
  .candys-razones { grid-template-columns: 1fr 1fr; }
  .candys-instagram { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. CINTA RODANTE
   Medido: NEGRA con texto crema, letras muy espaciadas, unos 40px de alto.
   Animación CSS pura, y quieta si el sistema pide menos movimiento.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-cinta-rodante {
  background: var(--candys-tinta);
  color: var(--candys-crema);
  overflow: hidden;
  padding: 18px 0;
}
.candys-cinta-rodante__pista {
  display: flex;
  width: max-content;
  animation: candys-rodar 38s linear infinite;
}
.candys-cinta-rodante__grupo {
  display: flex;
  flex-shrink: 0;
  gap: 0;
}
.candys-cinta-rodante__texto {
  /* Monoespaciada DEL SISTEMA: el mismo aire de máquina de escribir que la
     referencia (ellos usan Pitch Bold, de pago) sin descargar un byte. */
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(0.875rem, 1.05vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: var(--candys-e4);
}
@keyframes candys-rodar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .candys-cinta-rodante__pista { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. RESEÑAS (sobre negro)
   Rediseñadas: la nota grande centrada arriba y las tres citas en columnas
   iguales separadas por líneas finas. La versión anterior (tarjetas blancas
   escalonadas sobre crema) no convencía y dejaba huecos.
   Siguen siendo contenido visible: JAMÁS marcado de valoración, que Google
   prohíbe para las reseñas propias.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-resenas {
  text-align: center;
  /* De franja a sangre a TARJETA (término medio de Fazora): el bloque negro
     flota sobre el papel crema del acto 2, con margen y radio. */
  background: var(--candys-tinta);
  border-radius: var(--candys-radio-carta);
  margin-inline: var(--candys-margen);
  padding: clamp(var(--candys-e6), 6vw, var(--candys-e8)) var(--candys-lateral);
}
.candys-resenas__nota {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--candys-e1);
  margin-bottom: var(--candys-e6);
}
.candys-resenas__cifra {
  font-family: var(--candys-titular);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--candys-crema);
}
.candys-resenas__estrellas {
  color: var(--candys-naranja);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: 4px;
  margin: 0;
}
.candys-resenas__pie {
  font-size: clamp(0.875rem, 1vw, 1rem);
  color: rgba(255, 239, 218, .75);
  margin: var(--candys-e2) 0 0;
}

.candys-resenas__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--candys-lateral);
  text-align: left;
}
.candys-resena {
  margin: 0;
  padding: 0 clamp(var(--candys-e4), 3vw, var(--candys-e6));
  border-left: 1px solid rgba(255, 239, 218, .22);
}
.candys-resena:first-child { border-left: 0; }
.candys-resena p { color: var(--candys-crema); }
.candys-resena__cita {
  font-family: var(--candys-titular);
  font-size: clamp(1.0625rem, 1.35vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--candys-e4);
}
.candys-resena__fuente {
  font-family: var(--candys-titular);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 239, 218, .6);
  margin: 0 0 var(--candys-e3);
}
.candys-resena__firma {
  font-size: 0.9375rem;
  color: rgba(255, 239, 218, .8);
  margin: 0;
}

@media (max-width: 860px) {
  .candys-resenas__lista { grid-template-columns: 1fr; gap: var(--candys-e5); }
  .candys-resena { border-left: 0; padding: 0; }
  .candys-resena + .candys-resena {
    border-top: 1px solid rgba(255, 239, 218, .22);
    padding-top: var(--candys-e5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   14. CTA GRANDE
   ═══════════════════════════════════════════════════════════════════════ */

.candys-cta { text-align: center; max-width: min(52rem, 100%); margin-inline: auto; }

/* Versión con foto: el bloque de conversión con cuerpo. La foto llega al
   borde por un lado y el mensaje ocupa el otro. */
.candys-cta--foto {
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr;
  align-items: stretch;
  gap: clamp(var(--candys-e5), 4vw, var(--candys-e8));
  max-width: none;
  /* tarjeta naranja flotando sobre blanco, con la foto integrada dentro */
  background: var(--candys-naranja-hondo);
  color: var(--candys-blanco);
  border-radius: var(--candys-radio-carta);
  overflow: hidden;
  margin-inline: var(--candys-margen);
  padding: 0 clamp(var(--candys-e5), 4vw, var(--candys-e8)) 0 0;
  text-align: left;
}
.candys-cta--foto h2 { color: var(--candys-blanco); }
.candys-cta--foto .candys-cta__foto { margin: 0; line-height: 0; height: 100%; }
.candys-cta--foto .candys-cta__foto figure { height: 100%; margin: 0; }
.candys-cta--foto .candys-cta__foto img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 66svh, 700px);
  object-fit: cover;
}
.candys-cta--foto .candys-cta__cuerpo {
  max-width: 36rem;
  align-self: center;
  justify-self: center;
  padding-block: var(--candys-e8);
}
.candys-cta--foto .candys-cta__acciones { justify-content: flex-start; }
.candys-cta__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--candys-e4);
  margin-top: var(--candys-e6);
  padding-top: var(--candys-e4);
  border-top: 1px solid rgba(255, 255, 255, .4);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
}
.candys-cta__datos strong {
  display: block;
  font-family: var(--candys-titular);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  margin-bottom: 4px;
}
.candys-cta__datos a { color: var(--candys-blanco); text-decoration: none; }
.candys-cta__datos a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .candys-cta--foto {
    grid-template-columns: 1fr;
    gap: var(--candys-e4);
    padding: 0;
    text-align: center;
  }
  .candys-cta--foto .candys-cta__cuerpo { max-width: none; padding-inline: var(--candys-lateral); }
  .candys-cta--foto .candys-cta__acciones { justify-content: center; }
  .candys-cta--foto .candys-cta__foto img { height: clamp(240px, 40svh, 380px); }
  .candys-cta__datos { justify-content: center; }
}
.candys-cta__titular { font-size: var(--candys-t-display); margin-bottom: var(--candys-e3); }
.candys-cta__texto { font-size: clamp(1rem, 1.15vw, 1.3125rem); line-height: 1.5; color: var(--candys-tinta-suave); margin-bottom: var(--candys-e5); }
.candys-seccion--tinta .candys-cta__texto { color: rgba(255, 255, 255, .82); }
.candys-cta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--candys-e3); justify-content: center; }
/* Los botones del bloque de conversión, más grandes que los del resto. */
.candys-cta__acciones .candys-btn {
  min-height: 60px;
  padding: 16px 38px;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
}
/* Al apilarse, los dos con el MISMO ancho: si no, quedan desiguales. */
.candys-cta--foto .candys-cta__acciones { flex-direction: column; align-items: stretch; max-width: 20rem; }
.candys-cta--foto .candys-cta__acciones p { display: flex; }
.candys-cta--foto .candys-cta__acciones .candys-btn { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   15. PARRILLA DE INSTAGRAM
   Fotos estáticas, sin embeber nada de Meta: ni peso ni cookies de
   terceros. Cada una enlaza al perfil.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-instagram {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--candys-e3);
  max-width: 1100px;
  max-width: var(--candys-ancho);
  margin-inline: auto;
  padding-inline: var(--candys-lateral);
}
.candys-instagram a { display: block; position: relative; overflow: hidden; line-height: 0; border-radius: var(--candys-radio-foto); }
.candys-instagram img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .3s ease;
}
.candys-instagram a:hover img { transform: scale(1.04); }
@media (max-width: 600px) { .candys-instagram { grid-template-columns: 1fr 1fr; gap: 8px; } }


/* ═══════════════════════════════════════════════════════════════════════
   14-bis. QUIÉN ES MARÍA
   ═══════════════════════════════════════════════════════════════════════ */

.candys-maria {
  display: grid;
  /* invertida a propósito: el zigzag de sangrados es hero DERECHA →
     editorial IZQUIERDA → María DERECHA → CTA IZQUIERDA. */
  grid-template-columns: 1fr minmax(320px, 46%);
  align-items: center;
  gap: clamp(var(--candys-e5), 5vw, var(--candys-e8));
  max-width: none;
  padding: 0 var(--candys-margen) 0 var(--candys-lateral);
}
.candys-maria__foto { margin: 0; line-height: 0; order: 2; }
.candys-maria__texto { order: 1; justify-self: end; }
.candys-maria__foto img {
  display: block;
  width: 100%;
  height: clamp(420px, 78svh, 780px);
  object-fit: cover;
  border-radius: var(--candys-radio-foto);
}
.candys-maria__texto { max-width: min(42rem, 100%); }
.candys-maria__texto h2 { font-size: var(--candys-t-display); margin-bottom: var(--candys-e4); }
.candys-maria__texto p { font-size: 1.0625rem; line-height: 1.6; color: var(--candys-tinta-suave); }
.candys-maria__firma {
  font-family: var(--candys-titular);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.875rem;
  margin-top: var(--candys-e4);
}
@media (max-width: 860px) {
  .candys-maria {
    grid-template-columns: 1fr;
    gap: var(--candys-e4);
    padding: 0 var(--candys-lateral);
  }
  /* en móvil la foto vuelve arriba */
  .candys-maria__foto { order: 0; }
  .candys-maria__texto { order: 1; justify-self: start; }
  .candys-maria__foto img { height: clamp(280px, 44vh, 400px); }
  .candys-maria__texto { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   14-ter. CÓMO SE PIDE (tres pasos)
   Bloque nuevo. En un negocio 100% por encargo, la duda que más frena es
   "¿y cómo lo pido?". Tres pasos numerados lo resuelven de un vistazo.
   ═══════════════════════════════════════════════════════════════════════ */

/* El "cómo se pide" como conversación de WhatsApp: el canal REAL por el que
   entran los encargos. Sustituye a las cards numeradas 01/02/03, que eran
   un patrón vetado (hallazgo [CRITICO] del crítico). */
.candys-chat {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--candys-lateral);
  display: flex;
  flex-direction: column;
  gap: var(--candys-e3);
}
.candys-chat__burbuja {
  max-width: 84%;
  padding: 14px 20px;
  border-radius: 18px;
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.5;
}
.candys-chat__burbuja p { margin: 0; }
.candys-chat__burbuja--cliente {
  align-self: flex-start;
  background: var(--candys-blanco);
  border: 1px solid rgba(26, 26, 26, .18);
  border-bottom-left-radius: 4px;
}
.candys-chat__burbuja--maria {
  align-self: flex-end;
  background: var(--candys-crema);
  border-bottom-right-radius: 4px;
}
.candys-chat__quien {
  font-family: var(--candys-titular);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--candys-tinta-suave);
  margin: 0 0 4px;
}
.candys-chat__accion { align-self: center; margin-top: var(--candys-e4); display: flex; }

.candys-pasos {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--candys-e4), 3vw, var(--candys-e6));
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--candys-lateral);
}
.candys-paso { position: relative; padding-top: var(--candys-e5); }
.candys-paso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--candys-tinta);
}
.candys-paso__numero {
  font-family: var(--candys-titular);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--candys-naranja-hondo);
  margin: 0 0 var(--candys-e3);
}
.candys-paso h3 {
  font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
  margin-bottom: var(--candys-e2);
}
.candys-paso p { color: var(--candys-tinta-suave); margin: 0; }

@media (max-width: 780px) {
  .candys-pasos { grid-template-columns: 1fr; gap: var(--candys-e5); }
}

/* ═══════════════════════════════════════════════════════════════════════
   15-bis. COLLAGE DE INSTAGRAM
   La referencia no pone una rejilla ordenada: reparte tarjetas de tamaños
   distintos, como recortes pegados. Aquí se hace con grid asimétrico y
   FOTOS PROPIAS: cero widgets de Meta, así que cero cookies de terceros y
   cero medio megabyte de JavaScript.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* altura FIJA de fila: con filas automáticas el collage pasaba de 1.000px
     de alto. 4 columnas x 2 filas cuadran exacto con 4 fotos + la tarjeta del
     perfil (2 + 2 + 2 + 1 + 1 = 8 celdas). */
  grid-auto-rows: minmax(clamp(160px, 14vw, 300px), auto);
  gap: var(--candys-e3);
  max-width: none;
  padding-inline: var(--candys-margen);
  align-items: stretch;
}
.candys-collage a.candys-collage__foto,
.candys-collage figure { margin: 0; line-height: 0; display: block; overflow: hidden; border-radius: var(--candys-radio); }
.candys-collage img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.candys-collage a:hover img { transform: scale(1.04); }

/* Los tamaños: una vertical grande, una ancha, y tres normales. Da el aire
   de recortes pegados sin perder el orden. */
.candys-collage__alta { grid-row: span 2; }
.candys-collage__ancha { grid-column: span 2; }

/* La tarjeta del perfil, con el @ y el botón de seguir. */
.candys-collage__perfil {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--candys-e2);
  background: var(--candys-crema);
  border-radius: var(--candys-radio);
  padding: var(--candys-e4);
  text-align: center;
}
.candys-collage__arroba {
  font-family: var(--candys-titular);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  text-transform: none;
  line-height: 1.1;
}
.candys-collage__perfil p { font-size: 0.9375rem; color: var(--candys-tinta-suave); margin: 0; }
.candys-collage__perfil .candys-btn { align-self: center; margin-top: var(--candys-e2); }

@media (max-width: 860px) {
  .candys-collage { grid-template-columns: repeat(2, 1fr); gap: var(--candys-e2); grid-auto-rows: clamp(150px, 42vw, 220px); }
  .candys-collage__perfil { grid-row: span 1; }
  .candys-collage__ancha, .candys-collage__perfil { grid-column: span 2; }
  .candys-collage__alta { grid-row: span 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   15-ter. PLANTILLAS INTERIORES: categoría y producto
   La referencia resuelve su categoría con hero + intro + parrilla + FAQ, y su
   producto con galería + columna de compra + desplegables. Aquí lo mismo con
   el sistema de la casa, y con una diferencia de fondo: aquí no hay carrito,
   así que la "columna de compra" es la FICHA DEL ENCARGO (los 4 datos) y el
   CTA doble de WhatsApp + presupuesto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cabecera de HUB de categoría ─────────────────────────────────────── */
/* Fotos a la IZQUIERDA y texto a la derecha: alterna con el hero de la
   portada (que sangra a la derecha) y mantiene el zigzag del sitio. */
.candys-hub-cabecera {
  display: grid;
  /* columna derecha acotada en rem: así los 483px de sobra que había a 2560
     caen en el gap y no contra el borde. */
  grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 30rem);
  align-items: center;
  gap: clamp(var(--candys-e5), 4vw, var(--candys-e7));
  max-width: none;
  padding-inline: var(--candys-margen);
}
.candys-hub-cabecera__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--candys-e3);
  margin: 0;
  line-height: 0;
}
.candys-hub-cabecera__fotos > * { margin-block: 0; }
.candys-hub-cabecera__fotos figure { margin: 0; line-height: 0; }
.candys-hub-cabecera__fotos {
  /* el tope va al ANCHO: un max-height sobre aspect-ratio rompía el vertical
     (medido: 3/4 declarado, 1,18 real a 2560) */
  max-width: min(100%, 1040px);
}
.candys-hub-cabecera__fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: var(--candys-radio-foto);
}
.candys-hub-cabecera__texto { max-width: none; }
.candys-hub-cabecera__texto h1 { font-size: var(--candys-t-display); margin-bottom: var(--candys-e3); }
.candys-hub-cabecera__intro {
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  line-height: 1.6;
  color: var(--candys-tinta-suave);
  margin-bottom: var(--candys-e4);
}
.candys-hub-cabecera__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--candys-e3); }
.candys-hub-cabecera__acciones > * { margin-block: 0; }
.candys-hub-cabecera__acciones p { margin: 0; display: flex; }

@media (max-width: 900px) {
  .candys-hub-cabecera {
    grid-template-columns: 1fr;
    gap: var(--candys-e4);
    padding-inline: var(--candys-margen);
  }
  .candys-hub-cabecera__texto { max-width: none; }
  .candys-hub-cabecera__fotos { max-width: none; }
}

/* ── Grupo de sección dentro de un hub ────────────────────────────────── */
/* Cada familia (clásicas, semifrías, personalizadas...) con su titular a la
   izquierda y su párrafo: es lo que da al hub las palabras que pide el SEO
   sin un muro de texto al final. */
.candys-grupo {
  max-width: none;
  padding-inline: var(--candys-margen);
  margin-bottom: var(--candys-e4);
}
.candys-grupo__titulo {
  font-size: clamp(1.375rem, 2vw, 2rem);
  margin-bottom: var(--candys-e2);
}
.candys-grupo p {
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.55;
  color: var(--candys-tinta-suave);
  max-width: 46rem;
  margin: 0 0 var(--candys-e3);
}
.candys-grupo p:last-child { margin-bottom: 0; }

/* Variante de LECTURA: para texto corrido sin parrilla debajo. Centrado y con
   medida de lectura, que pegado al margen de un monitor ancho quedaba cojo. */
/* Prosa: 66ch alineada a la izquierda del carril. Antes iba centrada a 60rem
   y daba líneas de 101-116 caracteres (el óptimo son 60-70). */
.candys-grupo--lectura { max-width: none; margin-inline: 0; }
.candys-grupo--lectura .candys-grupo__titulo { margin-bottom: var(--candys-e3); }
.candys-grupo--lectura p { max-width: var(--candys-lectura); }

/* ── Página de PRODUCTO: galería + columna del encargo ────────────────── */
.candys-producto {
  display: grid;
  /* `auto` y no `1fr`: así el aire sobrante cae en el GAP central y no dentro
     de la columna de la galería (que dejaba 440px de vacío a su derecha). */
  grid-template-columns: auto clamp(340px, 27vw, 480px);
  justify-content: space-between;
  align-items: start;
  gap: clamp(var(--candys-e5), 4vw, var(--candys-e7));
  /* ACOTADO A PROPÓSITO, y la razón es la resolución de las fotos: los
     originales de María miden 450-511px de lado. Con el carril entero de un
     monitor de 2560 la foto principal se pintaría a 3,2x su tamaño real y se
     ve blanda (medido). Con este tope se queda en 1,65x.
     CUANDO HAYA FOTOS DE 1600px: subir a `none` y el bloque llenará el carril
     como el resto. Es lo único que ata este bloque. */
  max-width: 1720px;
  margin-inline: auto;
  padding-inline: var(--candys-margen);
}
.candys-producto > * { margin-block: 0; }
/* La prosa va en la columna IZQUIERDA, debajo de la galería, dentro del mismo
   acto: así el sticky de la tarjeta de encargo tiene recorrido de verdad
   (medido antes: 169px; ahora ~480) y la página no abre una isla crema entre
   la galería y la parrilla. */
.candys-producto__galeria { grid-column: 1; }
.candys-producto__prosa { grid-column: 1; padding-top: var(--candys-e7); }
.candys-producto__prosa p { max-width: var(--candys-lectura); }
.candys-producto__encargo { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .candys-producto__galeria,
  .candys-producto__prosa,
  .candys-producto__encargo { grid-column: auto; grid-row: auto; }
  .candys-producto__prosa { padding-top: 0; }
}

/* Galería bento: la principal cuadrada y las tres miniaturas en columna AL
   LADO. Antes iban debajo y a 2560 medían 471px de lado (el 76% de la altura
   de la principal), así que competían con ella. Y el tope de 960px evita que
   la principal se pinte a 3,2x el tamaño de su archivo (450px de origen). */
.candys-producto__galeria {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 22%, 200px);
  gap: var(--candys-e3);
  margin: 0;
  max-width: min(100%, 960px);
}
.candys-producto__galeria > * { margin-block: 0; }
.candys-producto__principal { margin: 0; line-height: 0; grid-row: 1 / 4; }
.candys-producto__principal img {
  display: block;
  width: 100%;
  /* cuadrada y SIN max-height: un techo de altura sobre `aspect-ratio` rompe
     el ratio (medido: 4/3 declarado, 2,33 real a 2560). El tope va al ANCHO
     de la galería, que es lo único que mantiene la proporción. */
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--candys-radio-foto);
}
/* Las miniaturas ya no son una fila: son la columna de al lado. */
.candys-producto__miniaturas { display: contents; }
.candys-producto__miniaturas > * { margin-block: 0; }
.candys-producto__miniaturas figure { margin: 0; line-height: 0; grid-column: 2; }
.candys-producto__miniaturas img { transition: outline-color .16s ease; outline: 2px solid transparent; outline-offset: 3px; }
.candys-producto__miniaturas figure:hover img { outline-color: var(--candys-tinta); }
.candys-producto__miniaturas img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--candys-radio-foto);
}

/* La columna del encargo se queda PEGADA al bajar: en una página de producto
   el botón de pedir no debe perderse nunca de vista. Cero JavaScript. */
/* TARJETA de encargo: es la pieza que decide el pedido, así que tiene
   superficie propia. De paso gana altura y cierra el hueco muerto que dejaba
   bajo la galería (medido: 527px a 2560). */
.candys-producto__encargo {
  position: sticky;
  /* la cabecera pegada mide 163px medidos, no los 199 del armazón completo */
  top: calc(163px + var(--candys-e4));
  background: var(--candys-beige);
  border-radius: var(--candys-radio-carta);
  padding: clamp(var(--candys-e4), 2.2vw, var(--candys-e6));
}
.candys-seccion--crema .candys-producto__encargo { background: var(--candys-blanco); }
.candys-producto__encargo h1 { font-size: var(--candys-t-h2); margin-bottom: var(--candys-e2); }
.candys-producto__nota {
  display: flex;
  align-items: center;
  gap: var(--candys-e2);
  flex-wrap: wrap;
  font-size: 0.9375rem;
  color: var(--candys-tinta-suave);
  margin-bottom: var(--candys-e3);
}
.candys-producto__nota .candys-hero__estrellas { font-size: 1rem; }
.candys-producto__esencia {
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  line-height: 1.6;
  margin-bottom: var(--candys-e4);
}
.candys-producto__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--candys-e2);
  margin-bottom: var(--candys-e4);
  /* botones de 915px de ancho a 2560 parecían separadores */
  max-width: 24rem;
}
.candys-producto__acciones > * { margin-block: 0; }
.candys-producto__acciones p { margin: 0; display: flex; }
.candys-producto__acciones .candys-btn { width: 100%; }

@media (max-width: 900px) {
  .candys-producto {
    grid-template-columns: 1fr;
    padding-inline: var(--candys-margen);
    gap: var(--candys-e4);
  }
  /* en móvil: primero el titular y el botón, la galería después. El 70% del
     tráfico es móvil y el H1 quedaba a 741px de scroll, detrás de las fotos. */
  .candys-producto__encargo { position: static; order: -1; }
  .candys-producto__galeria { grid-template-columns: 1fr; max-width: none; }
  .candys-producto__principal { grid-row: auto; }
  .candys-producto__miniaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--candys-e2); }
  .candys-producto__miniaturas figure { grid-column: auto; }
  .candys-producto__acciones { max-width: none; }
}

/* ── La ficha del encargo: los 4 datos, siempre los mismos ────────────── */
/* Es el equivalente al "serves 6-12" y los tres iconos de confianza de la
   referencia, pero con lo que de verdad decide aquí: plazo, recogida, pago
   y cómo se pide. Va en TODAS las páginas de producto. */
.candys-ficha {
  list-style: none;
  margin: 0;
  padding: var(--candys-e4) 0;
  display: grid;
  gap: var(--candys-e3);
  border-top: 1px solid rgba(26, 26, 26, .16);
  border-bottom: 1px solid rgba(26, 26, 26, .16);
}
.candys-ficha li {
  display: flex;
  align-items: flex-start;
  gap: var(--candys-e3);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--candys-tinta-suave);
}
.candys-ficha strong {
  display: block;
  font-family: var(--candys-titular);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--candys-tinta);
  margin-bottom: 2px;
}
.candys-ficha__icono {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--candys-naranja-hondo);
}
.candys-ficha__icono svg { width: 100%; height: 100%; display: block; }

/* ── FAQ en acordeón, con <details> nativo ────────────────────────────── */
/* Partición título/contenido: el titular pegado al raíl izquierdo y el
   acordeón a continuación. Antes iba centrado con un tope propio y se
   ESTRECHABA al ensanchar la ventana (medido: 777px a 1440 → 712 a 2560). */
.candys-faq {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--candys-margen);
}
.candys-faq__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(var(--candys-e4), 3vw, var(--candys-e6));
  align-items: start;
}
.candys-faq__interior > * { margin-block: 0; }
.candys-faq__titulo { margin: 0; }
@media (max-width: 900px) {
  .candys-faq__interior { grid-template-columns: 1fr; gap: var(--candys-e4); }
}
.candys-faq > * { margin-block: 0; }
.candys-faq details {
  border-bottom: 1px solid rgba(26, 26, 26, .16);
}
.candys-faq details:first-of-type { border-top: 1px solid rgba(26, 26, 26, .16); }
.candys-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--candys-e3);
  padding: var(--candys-e4) 0;
  font-family: var(--candys-titular);
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: 700;
  text-transform: none;
}
.candys-faq summary::-webkit-details-marker { display: none; }
/* El signo: + cerrado, − abierto. Con `content` y nada más. */
.candys-faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--candys-titular);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--candys-naranja-hondo);
}
.candys-faq details[open] summary::after { content: '\2212'; }
.candys-faq details > *:not(summary) {
  margin: 0 0 var(--candys-e4);
  max-width: 44rem;
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--candys-tinta-suave);
}
.candys-faq summary:hover { color: var(--candys-naranja-hondo); }
.candys-faq summary::after { transition: transform .15s ease; }
.candys-faq summary:hover::after { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .candys-categoria img, .candys-faq summary::after { transition: none; }
  .candys-categoria:hover img { transform: none; }
}

/* Sobre papel crema, las líneas del acordeón necesitan más contraste. */
.candys-seccion--crema .candys-faq details,
.candys-seccion--crema .candys-faq details:first-of-type { border-color: rgba(26, 26, 26, .22); }

/* ── Reseña única: la prueba social en una línea ──────────────────────── */
/* Versión ligera de la tarjeta negra de la portada, para páginas interiores:
   la nota, una cita y el enlace. Sin marcado de valoración, nunca. */
/* TARJETA negra a carril completo: cierra el acto crema de las interiores,
   como la tarjeta de reseñas cierra el de la portada. El dato ES el bloque. */
.candys-resena-unica {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(var(--candys-e4), 3vw, var(--candys-e7));
  max-width: none;
  margin-inline: var(--candys-margen);
  padding: clamp(var(--candys-e5), 3vw, var(--candys-e7));
  background: var(--candys-tinta);
  color: var(--candys-crema);
  border-radius: var(--candys-radio-carta);
}
.candys-resena-unica__nota,
.candys-resena-unica__texto { padding-inline-end: clamp(var(--candys-e4), 2.5vw, var(--candys-e6)); }
.candys-resena-unica__nota,
.candys-resena-unica__texto { border-right: 1px solid rgba(255, 239, 218, .2); }
.candys-resena-unica__enlace { white-space: nowrap; }
.candys-resena-unica__enlace a { color: var(--candys-crema); }
.candys-resena-unica > * { margin-block: 0; }
.candys-resena-unica__nota { text-align: center; }
.candys-resena-unica__cifra {
  font-family: var(--candys-titular);
  font-size: clamp(2.75rem, 3.4vw, 4.5rem);
  font-weight: 900;
  line-height: .95;
  margin: 0;
  color: var(--candys-crema);
}
.candys-resena-unica__estrellas { color: var(--candys-naranja); letter-spacing: 2px; margin: 0; }
.candys-resena-unica__pie {
  font-size: 0.8125rem;
  color: rgba(255, 239, 218, .72);
  margin: var(--candys-e1) 0 0;
  white-space: nowrap;
}
.candys-resena-unica__cita {
  font-family: var(--candys-titular);
  font-size: clamp(1.25rem, 1.6vw, 1.875rem);
  color: var(--candys-crema);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.candys-resena-unica__firma { font-size: 0.9375rem; color: rgba(255, 239, 218, .78); margin: var(--candys-e2) 0 0; }

@media (max-width: 900px) {
  .candys-resena-unica { grid-template-columns: 1fr; gap: var(--candys-e4); text-align: center; }
  .candys-resena-unica__nota,
  .candys-resena-unica__texto { border-right: 0; padding-inline-end: 0; }
  .candys-resena-unica__nota { display: flex; align-items: baseline; justify-content: center; gap: var(--candys-e2); }
  .candys-resena-unica__pie { white-space: normal; }
  .candys-resena-unica__enlace { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════
   15-quater. LA ESCALA DE LAS PÁGINAS INTERIORES
   Medido en las tres plantillas: el h1 de producto valía lo MISMO que los h2
   de sección (52px los dos a 2560) y el titular de las parrillas era el más
   pequeño de la página (32px encabezando 1.282px de contenido). Tres rangos,
   un tamaño por rango, y `--candys-t-display` reservada a la portada.
   El alcance es `body:not(.home)`: WordPress marca la portada con `.home`,
   así que la portada aprobada queda intacta.
   ═══════════════════════════════════════════════════════════════════════ */

body:not(.home) {
  --candys-t-n1: clamp(2.125rem, 3.35vw, 3.75rem);   /* 34 / 48 / 60 */
  --candys-t-n2: clamp(1.625rem, 2.15vw, 2.5rem);    /* 26 / 31 / 40 */
  --candys-t-n3: clamp(1.1875rem, 1.4vw, 1.625rem);  /* 19 / 20 / 26 */
}
body:not(.home) .candys-hub-cabecera__texto h1,
body:not(.home) .candys-producto__encargo h1 { font-size: var(--candys-t-n1); }
/* N2: el titular de grupo y el de sección centrada son EL MISMO rango. */
body:not(.home) .candys-grupo__titulo,
body:not(.home) .candys-cabecera-seccion h2,
body:not(.home) .candys-faq__titulo { font-size: var(--candys-t-n2); }
body:not(.home) .candys-tarjeta h3 { font-size: var(--candys-t-n3); }
/* El CTA no puede gritar más que el título de la página. */
body:not(.home) .candys-cta__titular { font-size: var(--candys-t-n2); }
/* La prosa, algo mayor que en la portada: aquí se viene a leer. */
body:not(.home) .candys-grupo p,
body:not(.home) .candys-faq details > *:not(summary) {
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. PIE
   Medido: negro a sangre, texto crema, columnas con encabezado en
   mayúsculas gordas y enlaces en peso normal.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-pie {
  background: var(--candys-tinta);
  color: var(--candys-crema);
  padding: var(--candys-e8) 0 var(--candys-e6);
}
.candys-pie__interior {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: var(--candys-e6) var(--candys-e5);
  max-width: none;
  padding-inline: var(--candys-margen);
}
.candys-pie h2, .candys-pie h3 { color: var(--candys-crema); }
.candys-pie p.candys-pie__titulo {
  font-family: var(--candys-titular);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 var(--candys-e4);
}
.candys-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.candys-pie a { color: var(--candys-crema); text-decoration: none; font-size: 1rem; }
.candys-pie a:hover { color: var(--candys-blanco); text-decoration: underline; }
.candys-pie p { font-size: 0.9375rem; color: rgba(255, 239, 218, .8); }
/* La marca del pie, en su caja negra invertida: el mismo gesto que el logo
   de la cabecera, para que el pie se reconozca como parte de la casa. */
.candys-pie p.candys-pie__marca {
  display: inline-block;
  color: var(--candys-tinta);
  font-family: var(--candys-titular);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  background: var(--candys-crema);
  color: var(--candys-tinta);
  padding: 8px 16px;
  border-radius: var(--candys-radio);
  margin: 0 0 var(--candys-e4);
}
.candys-pie__social { display: flex; gap: var(--candys-e4); margin-top: var(--candys-e5); }
.candys-pie__social a { display: inline-flex; width: 26px; height: 26px; }
.candys-pie__social svg { width: 100%; height: 100%; fill: currentColor; }
.candys-pie__legal {
  max-width: none;
  margin: var(--candys-e8) 0 0;
  padding: var(--candys-e4) var(--candys-lateral) 0;
  border-top: 1px solid rgba(255, 239, 218, .18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--candys-e2) var(--candys-e3);
  align-items: center;
  font-size: 0.8125rem;
}
.candys-pie__legal a { font-size: 0.8125rem; }
.candys-pie__legal span { opacity: .5; }

@media (max-width: 860px) {
  .candys-pie__interior { grid-template-columns: 1fr 1fr; gap: var(--candys-e4); }
  .candys-pie { padding-top: var(--candys-e6); }
}
@media (max-width: 480px) {
  .candys-pie__interior { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   17. LOS 4 DATOS DEL ENCARGO
   La regla de la casa: encargo, plazo, recogida y pago, arriba y siempre.
   ═══════════════════════════════════════════════════════════════════════ */

.candys-datos-encargo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--candys-e2) var(--candys-e4);
  padding: var(--candys-e3) var(--candys-lateral);
  background: var(--candys-crema);
  font-size: 0.875rem;
}
.candys-datos-encargo span { display: inline-flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   18. BOTÓN FLOTANTE DE WHATSAPP
   ═══════════════════════════════════════════════════════════════════════ */

.candys-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--candys-whatsapp);
  box-shadow: 0 6px 18px rgba(26, 26, 26, .22);
}
.candys-wa svg { width: 30px; height: 30px; fill: #fff; }
.candys-wa:hover { transform: scale(1.05); }
@media (max-width: 600px) { .candys-wa { right: 16px; bottom: 16px; } }

/* ═══════════════════════════════════════════════════════════════════════
   19. MIGAS
   ═══════════════════════════════════════════════════════════════════════ */

.candys-migas {
  max-width: none;
  margin-inline: 0;
  padding: var(--candys-e3) var(--candys-margen) 0;
  font-size: 0.8125rem;
  color: var(--candys-tinta-suave);
}
.candys-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.candys-migas a { color: var(--candys-tinta-suave); }

/* ═══════════════════════════════════════════════════════════════════════
   20. UTILIDADES Y ACCESIBILIDAD
   ═══════════════════════════════════════════════════════════════════════ */

.candys-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--candys-naranja-hondo);
  outline-offset: 2px;
}

/* GeneratePress: fuera el relleno que deja alrededor del contenido, para
   que las secciones lleguen a los bordes. */
.candys-plantilla-completa .site-content,
.candys-plantilla-completa .content-area,
.candys-plantilla-completa .entry-content { padding: 0; margin: 0; max-width: none; }
.candys-plantilla-completa .entry-header { display: none; }