/* ============================================================
   Heladería Italiana — estilos
   ============================================================ */

:root {
  --green: #74a82e;
  --green-soft: #cfe6a0;
  --green-deep: #4f7d1f;
  --green-mist: #f0f5e3;
  --lime: #b6cf24;
  --warm: #f0a868;
  --warm-soft: #f8dcbb;
  --ink: #2b2a22;
  --ink-soft: #6c6a5c;
  --paper: #fdf7ee;
  --cream: #f4e9d6;
  --card: #fffdf8;
  --radius: 22px;
  --shadow-sm: 0 8px 24px rgba(43, 42, 34, 0.07);
  --shadow-lg: 0 28px 70px rgba(79, 125, 31, 0.18);
  --maxw: 1280px;
  --pad: clamp(1.2rem, 5vw, 4rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", "Montserrat", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: "Montserrat", "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.025em;
}

a { color: inherit; }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--green-deep);
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--green-soft);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem var(--pad);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav__inner {
  width: min(100%, var(--maxw));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav.is-stuck {
  background: rgba(253, 247, 238, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.nav__brand img { height: 66px; width: auto; }

/* Logo personalizado de WordPress (the_custom_logo) en el header.
   Anula los atributos width/height="100" que WP añade a los SVG. */
.nav .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav .custom-logo { height: 66px; width: auto; max-width: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  font-weight: 500;
}
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid rgba(43, 42, 34, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}
.nav__lang button,
.nav__lang a {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.36rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__lang a::after { display: none; }
.nav__lang button.is-active,
.nav__lang a.is-active {
  background: var(--green);
  color: #fff;
}
/* Menú de WordPress (Apariencia → Menús) integrado en la barra:
   el <ul> se hace transparente al layout para que los <li> sean
   ítems flex de .nav__links, igual que los enlaces del fallback. */
.nav__menu { display: contents; }
.nav__links .nav__menu li { list-style: none; margin: 0; padding: 0; }

.nav__links a {
  text-decoration: none;
  position: relative;
  transition: color 0.3s, opacity 0.3s;
  color: var(--ink);
}
.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width 0.3s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__cta {
  background: var(--green);
  color: #fff !important;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.nav__cta:hover { background: var(--green-deep); transform: translateY(-2px); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span {
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: 0.3s var(--ease);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
  will-change: transform;
}
.btn--primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 12px 26px rgba(116, 168, 46, 0.32);
}
.btn--primary:hover { transform: translateY(-3px); background: var(--green-deep); }
.btn--ghost {
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.btn--ghost:hover { transform: translateY(-3px); background: var(--ink); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  background: radial-gradient(120% 120% at 85% 8%, #ffffff 0%, var(--paper) 52%, var(--cream) 100%);
  color: var(--ink);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: 8rem 0 5rem;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  color: var(--green-deep);
}
.hero__title {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.02;
  color: var(--ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--green);
  font-family:  "Fraunces", Georgia, serif;
  font-size: 1.3em;
  line-height: 0.7;
}
.hero__lead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  margin: 1.6rem 0 2.4rem;
  color: var(--ink-soft);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Visual del hero */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.hero__blob {
  position: absolute;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--warm-soft), var(--warm) 70%);
  opacity: 0.55;
}
.hero__deco {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}
.hero__deco--1 { width: 48%; aspect-ratio: 1; background: rgba(199, 84, 80, 0.32); opacity: 0.55; top: 0; left: 3%; }
.hero__deco--2 { width: 40%; aspect-ratio: 1; background: var(--warm-soft); opacity: 0.6; bottom: -8%; right: 21%; }
.hero__deco--3 { width: 30%; aspect-ratio: 1; background: var(--green-soft); top: 33%; right: -4%; }
.hero__circle {
  position: relative;
  z-index: 2;
  width: 80%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid #fff;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--green-soft), var(--green));
}
.hero__circle img { width: 100%; height: 100%; object-fit: cover; }
.hero__circle.is-fallback img { display: none; }
.hero__dot {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}
.hero__dot--1 { width: 60px; height: 60px; background: var(--lime); top: 6%; right: 16%; }
.hero__dot--2 { width: 34px; height: 34px; background: var(--green); top: 13%; left: 4%; z-index: 3; }
.hero__dot--3 { width: 84px; height: 84px; border: 3px solid var(--green); bottom: 6%; left: 1%; }
.hero__mini {
  position: absolute;
  z-index: 3;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-lg);
  background: var(--green-soft);
}
.hero__mini img { width: 100%; height: 100%; object-fit: cover; }
.hero__mini--1 { width: clamp(160px, 33%, 244px); aspect-ratio: 1; top: -4%; right: -3%; }
.hero__mini--2 { width: clamp(140px, 28%, 210px); aspect-ratio: 1; bottom: 2%; left: -8%; }
.hero__mini--3 { width: clamp(128px, 25%, 196px); aspect-ratio: 1; bottom: 7%; right: 1%; }
.hero__badge {
  position: absolute;
  z-index: 3;
  bottom: 13%;
  right: 9%;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Fraunces", serif;
  font-size: 0.72rem;
  line-height: 1.25;
  box-shadow: var(--shadow-sm);
}
.hero__badge strong { font-size: 0.86rem; }

.hero__scroll {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.hero__scroll span {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(43, 42, 34, 0.4);
  border-radius: 14px;
  position: relative;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 7px;
  border-radius: 4px;
  background: var(--green);
  animation: scrolldot 1.6s var(--ease) infinite;
}
@keyframes scrolldot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 1.1rem 0;
}
.marquee__track {
  display: flex;
  gap: 2.2rem;
  white-space: nowrap;
  width: max-content;
  font-family: "Fraunces", serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: italic;
  animation: marquee 26s linear infinite;
}
.marquee__track span:nth-child(even) { color: var(--green-soft); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section base ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 12vw, 9rem) var(--pad);
}
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 1rem;
}
.section__head { max-width: 620px; margin-bottom: 3.5rem; }
.section__head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.section__sub { color: var(--ink-soft); margin-top: 1rem; font-size: 1.1rem; }

/* ---------- Historia ---------- */
.historia {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.historia__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--green-soft), var(--green));
  box-shadow: var(--shadow-lg);
}
.historia__media img { width: 100%; height: 100%; object-fit: cover; }
.historia__media.is-fallback img { display: none; }
.historia__badge {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  background: var(--paper);
  color: var(--green-deep);
  border-radius: 16px;
  padding: 0.8rem 1.1rem;
  font-family: "Fraunces", serif;
  font-size: 0.95rem;
  line-height: 1.1;
  box-shadow: var(--shadow-sm);
}
.historia__badge strong { font-size: 1.6rem; }
.historia__text h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1.4rem; }
.historia__text p { color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 52ch; }

/* ---------- Cards (tipos) ---------- */
.helados { background: var(--green-mist); max-width: none; }
.helados > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.card h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.card p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
/* En WP el número es un <p>, así que necesita ganar a ".card p". */
.card__num,
.card p.card__num {
  font-family: "Fraunces", serif;
  font-size: 2.4rem;
  color: var(--green);
  display: block;
  margin-bottom: 0.8rem;
}

/* ---------- Elaboración ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--cream);
  border-radius: var(--radius);
  padding: 2.4rem 1.8rem;
  text-align: center;
}
/* En WP la temperatura es un <p>, así que necesita ganar a ".step p". */
.step__temp,
.step p.step__temp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-size: 2.6rem;
  color: var(--green);
  margin-bottom: 0.8rem;
}
.step__temp small { font-size: 1.1rem; }
.step h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }

/* ---------- Formatos ---------- */
.formatos {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.formatos h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1.2rem; }
.formatos__text > p { color: var(--ink-soft); max-width: 48ch; }
.scoops { display: flex; gap: 0.8rem; margin: 1.6rem 0; flex-wrap: wrap; }
.scoop {
  background: var(--green-mist);
  border-radius: 14px;
  padding: 0.7rem 1.1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.scoop b,
.scoop strong { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.6rem; color: var(--green); }
.formatos__note {
  background: var(--ink);
  color: var(--cream) !important;
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  font-size: 0.97rem;
}
.formatos__note strong { color: var(--green-soft); }
.formatos__media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--cream), var(--green-soft));
  box-shadow: var(--shadow-lg);
}
.formatos__media img { width: 100%; height: 100%; object-fit: cover; }
.formatos__media.is-fallback img { display: none; }

/* ---------- Especialidades ---------- */
.especiales__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.especial {
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  /*background: linear-gradient(160deg, #ffffff, var(--green-mist));*/
  background: var(--card);
  border: 1px solid rgba(24, 156, 68, 0.12);
  transition: transform 0.4s var(--ease);
}
.especial:hover { transform: translateY(-6px); }
.especial__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--green-mist);
  color: var(--green-deep);
}
.especial__icon svg { width: 28px; height: 28px; }
.especial:hover .especial__icon { background: var(--green); color: #fff; }
.especial h3 { font-size: 1.35rem; margin-bottom: 0.6rem; color: var(--green-deep); }
.especial p { color: var(--ink-soft); margin: 0; font-size: 0.96rem; }

/* ---------- Sabores ---------- */
.sabores { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); max-width: none; }
.sabores::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/fb/482239275_1162827535643801_3817035548859815679_n.jpg");
  background-size: cover;
  background-position: center right;
  z-index: 0;
}
.sabores::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, rgba(43, 42, 34, 0.8) 62%, rgba(43, 42, 34, 0.5) 100%);
  z-index: 0;
}
.sabores > * { position: relative; z-index: 1; max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sabores .kicker { color: var(--green-soft); }
.sabores .section__head h2,
.sabores .section__sub { color: var(--cream); }
.sabores .section__sub { color: rgba(243, 239, 227, 0.7); }
.sabores__group { margin-bottom: 2.4rem; }
.sabores__group h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--green-soft);
  margin-bottom: 1rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
}
.tags { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.tags span {
  border: 1px solid rgba(243, 239, 227, 0.22);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.tags span:hover { background: var(--green); border-color: var(--green); color: #fff; }
.tag--star {
  background: var(--green-soft);
  color: var(--ink) !important;
  border-color: var(--green-soft) !important;
  font-weight: 600;
}
.sabores__note { color: rgba(243, 239, 227, 0.6); margin-top: 1rem; font-style: italic; }

/* ---------- Visítanos ---------- */
.visitanos { position: relative; overflow: visible; }
.visitanos.section { padding-inline: var(--pad); }
/*.visitanos__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("img/fachada.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.5) brightness(0.95);
  opacity: 0.1;
}
.visitanos__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(251,250,244,0.4) 45%, var(--paper) 100%);
}*/
.visitanos__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  background: var(--card);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(2rem, 5vw, 4rem);
  box-shadow: var(--shadow-lg);
  align-items: center;
}
.visitanos__card h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1.6rem; }
.info { list-style: none; margin: 0 0 2rem; padding: 0; }
.info li {
  padding: 1rem 0;
  border-top: 1px solid var(--cream);
  font-size: 1.05rem;
}
.info li span,
.info li strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.visitanos__media {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid #fff;
  background: linear-gradient(135deg, var(--green-soft), var(--green-deep));
  box-shadow: var(--shadow-lg);
}
.visitanos__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.visitanos__media.is-fallback img { display: none; }

/* ---------- Kit Digital (logos de financiación, sobre el footer) ---------- */
/* La normativa del programa exige mostrarlos sobre fondo blanco y legibles. */
.kitdigital {
  background: #fff;
  padding: 1.6rem var(--pad);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.kitdigital__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2rem 3rem;
}
.kitdigital__logo {
  height: 56px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 600px) {
  .kitdigital__logo { height: 42px; }
}

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 3.5rem var(--pad); 
  background: var(--green-mist);
}
.footer__logo { margin: 0 auto 1.2rem; }
img.footer__logo,
.footer__logo .custom-logo { height: 66px; width: auto; max-width: none; }
.footer__logo .custom-logo-link { display: inline-block; line-height: 0; }
.footer p { color: var(--ink-soft); margin: 0; }

/* ---------- Footer: área de widgets ---------- */
.footer__widgets {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.footer__widget { width: 100%; }
.footer__widget-title {
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.footer__widget p { color: var(--ink-soft); margin: 0; }
.footer__widget a { color: inherit; }
/* Logo del pie (bloque Imagen o Logo del sitio) */
.footer__widget .wp-block-image,
.footer__widget .wp-block-site-logo { margin: 0 auto 0.6rem; text-align: center; }
.footer__widget .wp-block-image img,
.footer__widget .wp-block-site-logo img { max-width: 100%; height: auto; margin: 0 auto; }
/* Bloques de navegación / redes centrados en el pie */
.footer__widget .wp-block-navigation,
.footer__widget .wp-block-social-links { justify-content: center; }

/* ---------- Footer: enlaces legales ---------- */
.footer__legal {
  max-width: var(--maxw);
  margin: 1.8rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.5rem;
  font-size: 0.88rem;
}
.footer__legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
}
.footer__legal-menu a,
.footer__legal-cookies {
  color: var(--ink-soft);
  text-decoration: none;
}
.footer__legal-menu a:hover,
.footer__legal-cookies:hover {
  color: var(--ink);
  text-decoration: underline;
}
.footer__legal-cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ---------- Banner de cookies: foco ----------
   Complianz mueve el foco al botón de cerrar al abrir el banner, y el navegador
   dibuja allí su anillo por defecto. Se suprime por decisión de diseño: la aspa
   se ve limpia siempre.
   Los botones Aceptar/Rechazar y los enlaces sí conservan indicador de foco,
   con un anillo del propio diseño en lugar del azul del navegador, porque son
   los controles con los que se navega por teclado (WCAG 2.1 AA, criterio 2.4.7). */
#cmplz-cookiebanner-container .cmplz-close:focus,
#cmplz-cookiebanner-container .cmplz-close:focus-visible {
  outline: none;
}
#cmplz-cookiebanner-container .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container .cmplz-links a:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Reveal animations ---------- */
[data-reveal],
.reveal {
  opacity: 0;
  transform: translateY(40px);
}

/* ---------- Mobile nav panel ---------- */
@media (max-width: 880px) {
  .nav__toggle { display: flex; }
  .nav__inner { gap: 0.6rem; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.8rem;
    padding: 3rem 2rem 2rem;
    background: var(--green-deep);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    font-size: 1.3rem;
  }
  .nav__links a { color: #fff; }
  .nav__lang {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
  }
  .nav__lang button { color: rgba(255, 255, 255, 0.8); }
  .nav__lang a { color: rgba(255, 255, 255, 0.8); }
  .nav__lang button.is-active {
    background: #fff;
    color: var(--green-deep);
  }
  .nav__lang a.is-active {
    background: #fff;
    color: var(--green-deep);
  }
  .nav.is-open { backdrop-filter: none; }
  .nav.is-open .nav__links { transform: translateX(0); }
  .nav.is-open .nav__toggle span { background: #fff; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Responsive grids ---------- */
@media (max-width: 1000px) {
  .cards, .especiales__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; padding-top: 7rem; }
  .hero__text { text-align: center; margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__visual { max-width: 380px; margin: 1rem auto 0; width: 100%; }
  .historia, .formatos { grid-template-columns: 1fr; }
  .formatos__media { order: -1; }
  .steps { grid-template-columns: 1fr; }
  .visitanos__card { grid-template-columns: 1fr; }
  .visitanos__media { width: min(78%, 320px); order: -1; }
  .sabores::after { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 45%, rgba(43, 42, 34, 0.78) 100%); }
}
@media (max-width: 540px) {
  .cards, .especiales__grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  [data-reveal], [data-anim], .reveal, .anim { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Páginas genéricas (blog, entradas, 404) ----------
   Nota: la clase es "site-page" (no "page") a propósito:
   WordPress añade "page" como clase del <body> y colisionaría. */
.site-page { padding-top: 7rem; }
.site-page__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--pad) 5rem;
}
.site-page__head { margin-bottom: 2.5rem; }
.site-page__head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.site-page__desc { color: var(--ink-soft); margin-top: 1rem; }
.entry { margin-bottom: 3.5rem; }
.entry + .entry { border-top: 1px solid var(--cream); padding-top: 3.5rem; }
.entry__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 1rem; }
.entry__title a { text-decoration: none; transition: color 0.3s var(--ease); }
.entry__title a:hover { color: var(--green); }
.entry__thumb {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.entry__content { color: var(--ink-soft); }
.entry__content a { color: var(--green-deep); }
.entry__content h2,
.entry__content h3 { color: var(--ink); margin: 2rem 0 0.8rem; }
.entry__content img { border-radius: var(--radius); margin: 1.5rem 0; }
/* Tablas de las páginas legales (p. ej. el detalle de cookies).
   El envoltorio scrollea en móvil para que la página no se desborde. */
.entry__content .wp-block-table {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.entry__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  /* Ancho mínimo holgado: con 5 columnas, por debajo de esto la primera
     se estrecha tanto que parte los nombres de cookie a mitad de palabra. */
  min-width: 700px;
}
.entry__content th,
.entry__content td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.entry__content thead th {
  background: var(--green-mist);
  color: var(--ink);
  font-weight: 600;
}
.entry__content .is-style-stripes tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.02); }
/* Los nombres de cookie no se parten: si no caben, scrollea la tabla. */
.entry__content td code {
  font-size: 0.88em;
  white-space: nowrap;
}
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  background: var(--green-mist);
  text-decoration: none;
  font-weight: 500;
}
.pagination .page-numbers.current { background: var(--green); color: #fff; }

/* ============================================================
   Puente Gutenberg — la portada se edita con bloques nativos.
   Los envoltorios .wp-block-group heredan las clases del diseño;
   aquí neutralizamos lo que aporta Gutenberg para que no descuadre.
   ============================================================ */

/* Anulamos el "block gap" de Gutenberg dentro de la portada: cada
   elemento ya trae sus propios márgenes en el diseño original. */
.portada { --wp--style--block-gap: 0px; }

/* Los grids del diseño son groups; sus hijos no deben llevar margen de flujo */
.portada .hero__inner.is-layout-flow > *,
.portada .cards.is-layout-flow > *,
.portada .steps.is-layout-flow > *,
.portada .especiales__grid.is-layout-flow > *,
.portada .historia.is-layout-flow > *,
.portada .formatos.is-layout-flow > *,
.portada .visitanos__card.is-layout-flow > * { margin-block: 0; }

/* El hero es full-height; el group flow no debe limitar su altura */
.portada .hero { min-height: 100svh; }

/* Segunda columna del hero (texto) sin recorte de ancho */
.portada .hero__text { max-width: 100%; }

/* Sabores como lista nativa editable, con aspecto de "pills" */
.tags.wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tags li {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(243, 239, 227, 0.22);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.tags li:hover { background: var(--green); border-color: var(--green); color: #fff; }
.tags li.tag--star {
  background: var(--green-soft);
  color: var(--ink) !important;
  border-color: var(--green-soft) !important;
  font-weight: 600;
}

/* La tarjeta de "Visítanos" tiene dos columnas: la de texto es un group */
.visitanos__col { min-width: 0; }

/* ============================================================
   Puente Gutenberg v2 — bloques nativos
   (botones, filas flex, imágenes de la mediateca, párrafos)
   ============================================================ */

/* --- Botones nativos (core/button) con la piel del diseño --- */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: inherit;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
  will-change: transform;
}
.wp-block-button:not(.is-style-btn-ghost) .wp-block-button__link {
  background: var(--green);
  color: #fff;
  box-shadow: 0 12px 26px rgba(116, 168, 46, 0.32);
}
.wp-block-button:not(.is-style-btn-ghost) .wp-block-button__link:hover {
  transform: translateY(-3px);
  background: var(--green-deep);
}
.wp-block-button.is-style-btn-ghost .wp-block-button__link {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  box-shadow: none;
}
.wp-block-button.is-style-btn-ghost .wp-block-button__link:hover {
  transform: translateY(-3px);
  background: var(--ink);
  color: #fff;
}

/* Contenedor de botones del hero: mismo hueco que el diseño */
.wp-block-buttons.hero__actions { gap: 1rem; }

/* --- Fila nativa de bolas (group flex) --- */
.wp-block-group.scoops { gap: 0.8rem; }
p.scoop { margin: 0; }

/* --- Párrafos que sustituyen a spans del diseño --- */
p.card__num { margin: 0 0 0.8rem; }
p.step__temp { margin: 0 0 0.8rem; }
p.historia__badge { margin: 0; }

/* --- Imágenes nativas (core/image) dentro de los marcos del diseño --- */
.historia__media .wp-block-image,
.formatos__media .wp-block-image,
.visitanos__media .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
}
.historia__media .wp-block-image img,
.formatos__media .wp-block-image img,
.visitanos__media .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}