/* Generado por `php artisan gozo:assets`. No editar: cambia los parciales de resources/css. */

/* 00-reset.css */
/* Orden de capas de todo site.css. Lo que no va en una capa gana siempre a lo que sí va. */
@layer reset, tokens, base, layout, components, sections, pages, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd {
    margin: 0;
  }

  ul, ol {
    margin: 0;
    padding: 0;
  }

  img, svg, video {
    display: block;
  }

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

  a {
    color: inherit;
    text-decoration: none;
  }

  button, input, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    border-radius: 0;
  }

  button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: visible;
  }

  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  summary {
    cursor: pointer;
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  dialog {
    padding: 0;
    border: 0;
    color: inherit;
  }

  cite {
    font-style: normal;
  }

  [hidden] {
    display: none !important;
  }
}

/* 01-tokens.css */
@layer tokens {
  :root {
    /* Colores medidos en la web actual */
    --c-bg: #f4ebdc;
    --c-text: #5a3a24;
    --c-surface: #faf3ea;
    --c-footer: #2e2e2c;
    --c-footer-text: #faf3ea;
    --c-accent: #b36a2e;
    --c-accent-2: #d8a04b;
    --c-hero-text: #2f2f2f;
    --c-btn: #5a3a24;
    --c-btn-text: #faf3ea;
    --c-btn-hover: #7e5133;
    --c-nav-dim: #eee0c9;
    --c-drawer-dim: #f5e7d5;
    --c-error: #d02e2e;
    --c-error-bg: #fff6f6;
    --c-success: #56ad6a;
    --c-veil: rgba(244, 235, 220, .6);

    /* Tipografía */
    --font-heading: Questrial, sans-serif;
    --font-body: Inter, sans-serif;
    --fs-body: 13px;
    --fs-small: 12px;
    --fs-h1: 27px;
    --fs-h2: 23px;
    --fs-h3: 20px;
    --lh-body: 1.4;
    --lh-heading: 1.1;
    --tracking: .05em;
    --tracking-caps: .2em;

    /* Medidas */
    --page-max: 1500px;
    --gutter: 17px;
    --section-gap: 40px;
    --heading-gap: 10px;
    --drawer-gutter: 20px;
    --radius: 3px;
    --icon-stroke: 1.125;

    /* Curvas */
    --ease-out: cubic-bezier(.165, .84, .44, 1);
    --ease-rise: cubic-bezier(.26, .54, .32, 1);
    --ease-collapse: cubic-bezier(.25, .46, .45, .94);
    --ease-dropdown: cubic-bezier(.2, .06, .05, .95);
    --ease-image: cubic-bezier(.29, .65, .58, 1);
  }

  @media (min-width: 769px) {
    :root {
      --fs-body: 14px;
      --fs-h1: 32px;
      --fs-h2: 27px;
      --fs-h3: 21px;
      --gutter: 40px;
      --section-gap: 75px;
      --heading-gap: 15px;
      --drawer-gutter: 30px;
    }
  }
}

/* 02-base.css */
@font-face {
  font-family: Questrial;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/questrial_n4.66abac5d8209a647b4bf8089b0451928ef144c07.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/inter_n6.771af0474a71b3797eb38f3487d6fb79d43b6877.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/inter_i4.feae1981dda792ab80d117249d9c7e0f1017e5b3.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("fonts/inter_i6.3bbe0fe1c7ee4f282f9c2e296f3e4401a48cbe19.woff2") format("woff2");
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rise-up {
  from { opacity: 1; transform: translateY(120%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoom-fade {
  from { opacity: 0; transform: scale(1.3); }
  to { opacity: 1; transform: scale(1); }
}

@layer base {
  html,
  body {
    background-color: var(--c-bg);
    color: var(--c-text);
  }

  /* El espaciado entre letras se hereda ya calculado en píxeles (0,05em del cuerpo), como en la web actual. */
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: var(--tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
  }

  button, input, select, textarea {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking);
  }

  h1, h2, h3, h4, h5, h6 {
    display: block;
    margin: 0 0 var(--heading-gap);
  }

  h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: var(--lh-heading);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }

  h4, h5, h6 {
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  p {
    margin: 0 0 15px;
  }

  ul, ol {
    margin: 0 0 15px 30px;
    text-rendering: optimizeLegibility;
  }

  li {
    margin-bottom: .25em;
  }

  b, strong {
    font-weight: 700;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-delay: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* Iconos: trazo de Lucide (rejilla de 24). El grosor se ajusta por contexto con --icon-stroke. */
  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon--solid {
    fill: currentColor;
    stroke: none;
  }

  /* Plegable genérico: botón [data-toggle] + panel .collapse. Se anima con grid-template-rows. */
  .collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease-collapse);
  }

  .collapse > .collapse__inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s var(--ease-collapse), visibility 0s linear .3s;
  }

  .collapse.is-open {
    grid-template-rows: 1fr;
  }

  .collapse.is-open > .collapse__inner {
    visibility: visible;
    opacity: 1;
    transition: opacity .35s var(--ease-collapse), visibility 0s;
  }

  /* Sin JavaScript los plegables se muestran abiertos. */
  html:not(.js) .collapse {
    grid-template-rows: 1fr;
  }

  html:not(.js) .collapse > .collapse__inner {
    visibility: visible;
    opacity: 1;
  }

  [data-toggle] .icon {
    transition: transform .1s ease-in;
  }

  [data-toggle][aria-expanded="true"] .icon-chevron-down {
    transform: scaleY(-1);
  }

  /* Aparición al entrar en pantalla (12-appear.js añade .is-visible una sola vez). */
  html.js [data-appear="fade"] {
    opacity: 0;
  }

  html.js [data-appear="fade"].is-visible {
    animation: fade-in .5s var(--ease-image) forwards;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .skip-link:focus {
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px;
    clip: auto;
    z-index: 10000;
    background-color: var(--c-bg);
    color: var(--c-text);
  }

  /* Un campo de texto es :focus-visible también con clic. El contorno solo se ve al navegar con teclado:
     00-core.js pone data-modalidad="teclado" en <html> al pulsar Tab. Sin JavaScript se ve siempre.
     Va en la última capa para ganar a los contornos que declare cada componente. */
  html.js:not([data-modalidad="teclado"]) input:not([type="checkbox"]):not([type="radio"]):focus,
  html.js:not([data-modalidad="teclado"]) textarea:focus,
  html.js:not([data-modalidad="teclado"]) select:focus {
    outline: 0;
  }

  @media (max-width: 768px) {
    .hide-mobile { display: none !important; }
  }

  @media (min-width: 769px) {
    .hide-desktop { display: none !important; }
  }
}

/* 03-layout.css */
@layer layout {
  .page-width {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  .page-width--narrow {
    max-width: 1000px;
  }

  .page-width--tiny {
    max-width: 450px;
  }

  .main-content {
    display: block;
    min-height: 300px;
  }

  /* Separación entre secciones: 40 px en móvil y 75 px desde 769. Los márgenes contiguos se funden. */
  .section {
    margin: var(--section-gap) 0;
  }

  .section-header {
    margin-bottom: 30px;
    text-align: center;
  }

  @media (min-width: 769px) {
    .main-content {
      min-height: 700px;
    }

    .section-header {
      margin-bottom: 50px;
    }
  }
}

/* 10-header.css */
@layer components {
  /* Envoltorio de barra superior + cabecera. En la portada va superpuesto al hero. */
  .site-top {
    position: relative;
    z-index: 6;
    color: var(--c-text);
  }

  .site-top--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent);
  }

  /* Barra superior con el selector de idioma */
  .toolbar {
    background: var(--c-bg);
    font-size: var(--fs-small);
  }

  /* En móvil el selector queda 10 px a la derecha del centro, como hoy (20 px de margen solo a la izquierda). */
  .toolbar__content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 20px;
  }

  .site-top--overlay .toolbar {
    background: transparent;
    color: #fff;
  }

  .site-top--overlay .toolbar__content {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }

  @media (min-width: 769px) {
    .toolbar__content {
      justify-content: flex-end;
      padding: 0;
    }
  }

  .lang-switch {
    position: relative;
  }

  .lang-switch__toggle {
    position: relative;
    display: flex;
    align-items: center;
    height: 31px;
    padding: 5px 28px 5px 5px;
    font-size: 14px;
    letter-spacing: .7px;
    white-space: nowrap;
  }

  .lang-switch__toggle .icon {
    position: absolute;
    top: 50%;
    right: 4.5px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    --icon-stroke: .86;
  }

  .lang-switch__list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-height: 92px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: 0 0 20px rgba(0, 0, 0, .09);
    font-size: var(--fs-body);
  }

  .lang-switch__list li {
    margin: 0;
    padding: 5px 15px 4px;
    white-space: nowrap;
  }

  .lang-switch__list a {
    text-underline-offset: .2rem;
  }

  .lang-switch__list a:hover,
  .lang-switch__list a:focus,
  .lang-switch__list a[aria-current] {
    text-decoration: underline;
  }

  /* Cabecera */
  .site-header {
    position: relative;
    padding: 7px 0;
    background: var(--c-bg);
    box-shadow: 0 0 1px rgba(0, 0, 0, .2);
  }

  .site-top--overlay:not(.is-stuck) .site-header {
    background: none;
    color: #fff;
  }

  .site-header__layout {
    display: flex;
    justify-content: space-between;
  }

  .site-header__logo-wrap,
  .site-header__icons {
    display: flex;
    align-items: center;
    flex: 0 1 100px;
    max-width: 50%;
  }

  .site-header__icons {
    justify-content: flex-end;
  }

  .site-header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }

  .site-header__logo {
    position: relative;
    z-index: 6;
    display: block;
    margin: 10px 10px 10px 0;
    font-size: 30px;
    line-height: 1.1;
  }

  .site-header__logo-link {
    display: block;
    width: 100px;
  }

  .site-header__logo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1700.7874 / 639.77953;
  }

  .site-header__icon-group {
    display: flex;
    align-items: center;
    margin-right: -7.5px;
  }

  .site-header__icon {
    display: block;
    padding: 7.5px;
    color: inherit;
  }

  .site-header__icon + .site-header__icon {
    margin-left: -4px;
  }

  .site-header__icon .icon {
    display: block;
    width: 30px;
    height: 30px;
  }

  /* Menú principal (solo desde 769 px) */
  .site-nav {
    display: none;
    margin: 0;
    list-style: none;
  }

  .site-nav__item {
    position: relative;
    margin: 0;
  }

  .site-nav__link {
    position: relative;
    display: block;
    padding: 7.5px 15px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    margin: 0 15px;
    border-bottom: 2px solid currentColor;
    transition: right .5s;
  }

  .site-nav__item:hover > .site-nav__link::after,
  .site-nav__link:focus-visible::after {
    right: 0;
  }

  .site-nav__item--has-dropdown {
    z-index: 6;
  }

  .site-nav__item--has-dropdown > .site-nav__link {
    z-index: 6;
  }

  .site-nav__item--has-dropdown:hover,
  .site-nav__item--has-dropdown:focus-within {
    z-index: 7;
  }

  .site-nav__item--has-dropdown:hover > .site-nav__link,
  .site-nav__item--has-dropdown:focus-within > .site-nav__link {
    background-color: var(--c-bg);
    color: var(--c-text);
  }

  .site-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 100%;
    margin: 0;
    padding: 10px 0 5px;
    list-style: none;
    text-align: left;
    background-color: var(--c-bg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .09);
    visibility: hidden;
    transform: translate3d(0, -12px, 0);
  }

  .site-nav__item--has-dropdown:hover > .site-nav__dropdown,
  .site-nav__item--has-dropdown:focus-within > .site-nav__dropdown {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: all .3s var(--ease-dropdown);
  }

  .site-nav__dropdown li {
    display: block;
    margin: 0;
  }

  .site-nav__dropdown-link {
    position: relative;
    z-index: 6;
    display: block;
    padding: 8px 15px;
    font-size: var(--fs-body);
    white-space: nowrap;
    background-color: var(--c-bg);
    color: var(--c-text);
  }

  .site-nav__dropdown-link:hover,
  .site-nav__dropdown-link:focus {
    background-color: var(--c-nav-dim);
  }

  @media (min-width: 769px) {
    .site-header {
      padding: 20px 0;
    }

    .site-header__logo-wrap,
    .site-header__icons {
      flex: 0 0 110px;
      min-width: 130px;
    }

    .site-header__logo-link {
      width: 110px;
    }

    /* Entre 769 y 869 px el menú no cabe en una línea: pasa a dos, centrado, sin empujar la lupa. */
    .site-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .site-header__icon-group {
      margin-right: -12px;
    }

    .site-header__icon {
      padding: 7.5px 12px;
    }

    .site-header__icon .icon {
      width: 28px;
      height: 28px;
    }
  }

  @media (min-width: 769px) and (max-width: 959px) {
    .site-nav__link {
      padding: 7.5px;
    }
  }

  /* Cabecera fija: pasados 250 px de scroll, 10-header.js pone .is-stuck y 100 ms después .is-opening. */
  .site-top.is-stuck {
    z-index: 20;
  }

  .site-top.is-stuck .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    transform: translate3d(0, -100%, 0);
  }

  .site-top.is-stuck.is-opening .site-header {
    transform: translate3d(0, 0, 0);
    transition: transform .4s var(--ease-out);
  }

  @media (min-width: 769px) {
    .site-top.is-stuck .site-header {
      padding: 10px 0;
    }
  }

  @media (min-width: 700px) and (max-height: 550px) {
    .site-top.is-stuck .site-header,
    .site-top.is-stuck.is-opening .site-header {
      position: relative;
      transform: none;
      transition: none;
    }
  }

  /* Buscador desplegable: tapa la cabecera y baja desde arriba */
  .site-search {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 28;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .3s;
  }

  .site-search.is-open {
    overflow: visible;
    visibility: visible;
    transition: visibility 0s;
  }

  .site-search__panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background-color: var(--c-bg);
    color: var(--c-text);
    box-shadow: 0 15px 45px rgba(0, 0, 0, .1);
    transform: translate3d(0, -110%, 0);
    transition: transform .3s var(--ease-out);
  }

  .site-search.is-open .site-search__panel {
    transform: translate3d(0, 0, 0);
  }

  .site-search__form {
    display: flex;
    align-items: stretch;
    flex: 1 1 100%;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-search__field {
    position: relative;
    display: flex;
    flex: 5;
  }

  .site-search__input {
    flex: 1;
    width: 100%;
    padding: 8px 50px 8px 16px;
    border: 0;
    background: #fff;
    color: var(--c-text);
  }

  .site-search__input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .site-search__submit {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
  }

  .site-search__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    margin-left: 10px;
  }

  .site-search__submit .icon,
  .site-search__close .icon {
    display: block;
    width: 25px;
    height: 25px;
  }

  @media (max-width: 768px) {
    .site-search__form {
      padding-left: 0;
      padding-right: 10px;
    }

    /* El campo llega al borde izquierdo de la pantalla: el contorno se pinta hacia dentro para que no se corte. */
    .site-search__input:focus-visible {
      outline-offset: -2px;
    }
  }

  @media (min-width: 769px) {
    .site-search__submit {
      right: 10px;
    }
  }

  /* Evita el zoom de iOS al enfocar campos */
  @media (max-width: 959px) {
    .site-search__input {
      font-size: 16px;
    }
  }
}

/* 11-drawer.css */
@layer components {
  /* Menú móvil: <dialog> que entra por la derecha. 11-drawer.js pone y quita .is-open. */
  .drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 350px;
    max-width: 95%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: var(--c-surface);
    color: var(--c-text);
    box-shadow: 0 0 150px rgba(0, 0, 0, .1);
    transform: translateX(100%);
    transition: transform .25s var(--ease-out);
  }

  .drawer[open] {
    display: flex;
    flex-direction: column;
  }

  /* Con el menú abierto la página de detrás no se desplaza. */
  html.drawer-open {
    overflow: hidden;
  }

  .drawer.is-open {
    transform: translateX(0);
    transition-duration: .45s;
  }

  .drawer::backdrop {
    background-color: var(--c-veil);
    opacity: 0;
    transition: opacity .25s;
  }

  .drawer.is-open::backdrop {
    opacity: .6;
    transition-duration: .35s;
  }

  .drawer__header {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-height: 70px;
    margin: 0 var(--drawer-gutter);
    border-bottom: 1px solid var(--c-surface);
  }

  .drawer__close {
    margin-right: calc(var(--drawer-gutter) * -1);
    padding: 0 var(--drawer-gutter);
    color: inherit;
  }

  .drawer__close:active {
    background-color: var(--c-drawer-dim);
  }

  .drawer__close .icon {
    display: block;
    width: 28px;
    height: 28px;
  }

  .drawer__scroll {
    flex: 1 1 auto;
    padding: var(--drawer-gutter) var(--drawer-gutter) 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav {
    margin: calc(var(--drawer-gutter) * -1) calc(var(--drawer-gutter) * -1) 0;
    list-style: none;
  }

  .mobile-nav li {
    margin-bottom: 0;
    list-style: none;
  }

  .mobile-nav__item {
    position: relative;
    display: block;
  }

  .mobile-nav > .mobile-nav__item::after {
    content: "";
    position: absolute;
    left: var(--drawer-gutter);
    right: var(--drawer-gutter);
    bottom: 0;
    border-bottom: 1px solid var(--c-surface);
  }

  .mobile-nav__link {
    display: block;
    padding: 15px var(--drawer-gutter);
    color: var(--c-text);
  }

  .mobile-nav__link:active,
  .mobile-nav__toggle:active {
    background-color: var(--c-drawer-dim);
  }

  .mobile-nav__link--top {
    font-family: var(--font-heading);
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .mobile-nav__row {
    display: flex;
  }

  .mobile-nav__row > .mobile-nav__link {
    flex: 1 1 auto;
  }

  .mobile-nav__toggle {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 22px;
    color: var(--c-text);
  }

  /* El trazo de Lucide ocupa media rejilla: 32 px de caja dan los 16 px de flecha de la web actual. */
  .mobile-nav__toggle .icon {
    display: block;
    width: 32px;
    height: 32px;
    --icon-stroke: .86;
  }

  .mobile-nav__sublist {
    margin: 0;
    list-style: none;
  }

  .mobile-nav__sublist .mobile-nav__link {
    padding: 7.5px 25px 7.5px var(--drawer-gutter);
  }

  .mobile-nav__sublist li:last-child {
    padding-bottom: 15px;
  }

  .mobile-nav__social {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 20px;
    list-style: none;
  }

  .mobile-nav__social li {
    flex: 0 1 33.33%;
    margin: 0 0 -1px;
    border: 1px solid var(--c-surface);
    text-align: center;
  }

  .mobile-nav__social a {
    display: block;
    padding: 12px 30px;
  }

  .mobile-nav__social .icon {
    position: relative;
    top: -1px;
  }

  /* Entrada escalonada al abrir */
  .drawer__header,
  .mobile-nav > .mobile-nav__item,
  .mobile-nav__social {
    opacity: 0;
    transform: translateY(60px);
  }

  .drawer.is-open .drawer__header,
  .drawer.is-open .mobile-nav > .mobile-nav__item,
  .drawer.is-open .mobile-nav__social {
    opacity: 1;
    transform: translateY(0);
    transition: transform 1s var(--ease-out) .1s, opacity 1s var(--ease-out) .2s;
  }

  .drawer.is-open .mobile-nav > .mobile-nav__item:nth-child(1) { transition-delay: .22s, .32s; }
  .drawer.is-open .mobile-nav > .mobile-nav__item:nth-child(2) { transition-delay: .28s, .38s; }
  .drawer.is-open .mobile-nav > .mobile-nav__item:nth-child(3) { transition-delay: .34s, .44s; }
  .drawer.is-open .mobile-nav > .mobile-nav__item:nth-child(4) { transition-delay: .4s, .5s; }
  .drawer.is-open .mobile-nav > .mobile-nav__item:nth-child(n + 5) { transition-delay: .46s, .56s; }
  .drawer.is-open .mobile-nav__social { transition-delay: .46s, .56s; }

  @media (min-width: 769px) {
    .drawer {
      width: 450px;
    }

    .drawer__header {
      min-height: 80px;
    }
  }
}

/* 12-footer.css */
@layer components {
  .site-footer {
    background-color: var(--c-footer);
    color: var(--c-footer-text);
    text-align: center;
  }

  .site-footer a {
    color: inherit;
  }

  .site-footer__grid {
    display: flex;
    flex-wrap: wrap;
  }

  .site-footer__col {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 1px;
  }

  /* Tamaño de texto de las tres columnas */
  .site-footer__panel,
  .site-footer__links {
    font-size: var(--fs-small);
  }

  .site-footer__title {
    display: block;
    margin: 0;
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: inherit;
  }

  .site-footer__toggle {
    position: relative;
    width: 100%;
    padding: 15px 10px 15px 0;
    font-family: var(--font-body);
    line-height: var(--lh-body);
    text-align: center;
  }

  .site-footer__toggle .icon {
    position: absolute;
    top: 50%;
    right: -5px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    --icon-stroke: .86;
  }

  .site-footer__panel {
    padding: 0 0 15px;
  }

  /* El 1.4em de arriba sustituye a la línea en blanco con la que hoy empieza el texto. */
  .site-footer__text {
    margin: 1.4em 0 15px;
    white-space: pre-line;
  }

  .site-footer__social {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
    list-style: none;
  }

  .site-footer__social li {
    margin: 0 15px 15px 0;
  }

  .site-footer__social a {
    display: block;
  }

  .site-footer__social .icon {
    display: block;
    width: 22px;
    height: 22px;
  }

  .site-footer__links {
    margin: 0;
    list-style: none;
  }

  .site-footer__links li {
    margin: 0 0 3px;
  }

  .site-footer__links a {
    display: inline-block;
    padding: 4px 0;
  }

  .site-footer__copyright {
    margin: 0;
    padding: 7.5px 0;
    font-size: var(--fs-small);
    text-align: center;
  }

  @media (max-width: 768px) {
    .site-footer__col::after {
      content: "";
      display: block;
      border-bottom: 1px solid var(--c-footer-text);
      opacity: .12;
    }

    .site-footer__col:last-child::after {
      display: none;
    }

    .site-footer__col--menu {
      padding-top: 15px;
    }

    .site-footer__col--menu .site-footer__links {
      padding-bottom: 15px;
    }

    .site-footer__col--menu .site-footer__links li:last-child {
      margin-bottom: 3px;
    }
  }

  @media (min-width: 769px) {
    .site-footer {
      padding: 60px 0;
      text-align: left;
    }

    .site-footer__grid {
      margin-left: -22px;
    }

    .site-footer__col {
      flex-basis: 50%;
      max-width: 50%;
      padding-left: 22px;
      padding-top: 40px;
    }

    .site-footer__col--newsletter .site-footer__col-inner {
      padding-right: 60px;
    }

    .site-footer__title {
      margin-bottom: 20px;
      font-family: var(--font-heading);
      line-height: var(--lh-heading);
    }

    .site-footer__panel {
      padding: 0;
    }

    /* En escritorio el bloque de newsletter está siempre abierto. */
    .site-footer .collapse {
      grid-template-rows: 1fr;
    }

    .site-footer .collapse > .collapse__inner {
      overflow: visible;
      visibility: visible;
      opacity: 1;
    }

    .site-footer__social {
      justify-content: flex-start;
    }

    .site-footer__social .icon {
      width: 24px;
      height: 24px;
    }
  }

  @media (min-width: 960px) {
    .site-footer__col {
      padding-top: 0;
    }

    .site-footer__col--newsletter {
      flex-basis: 33%;
      max-width: 33%;
    }

    .site-footer__col--main {
      flex-basis: 20%;
      max-width: 20%;
    }

    .site-footer__col--legal {
      flex-basis: 25%;
      max-width: 25%;
    }
  }
}

/* 13-forms.css */
@layer base {
  input, select, textarea {
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--c-surface);
    border-radius: 0;
    background-color: transparent;
  }

  input:focus, select:focus, textarea:focus {
    border-color: var(--c-text);
  }

  textarea {
    min-height: 100px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
    margin: 0 10px 0 0;
    padding: 0;
  }

  input[type="checkbox"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  label {
    display: block;
    margin-bottom: 10px;
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  label[for] {
    cursor: pointer;
  }

  /* Evita el zoom de iOS al enfocar un campo */
  @media (max-width: 959px) {
    input, select, textarea {
      font-size: 16px;
    }
  }
}

@layer components {
  .btn {
    display: inline-block;
    min-width: 90px;
    padding: 9px 17px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--c-btn);
    color: var(--c-btn-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: var(--tracking-caps);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
    vertical-align: middle;
    cursor: pointer;
    transition: background .2s ease;
  }

  .btn:hover,
  .btn:focus-visible {
    background: var(--c-btn-hover);
    color: var(--c-btn-text);
  }

  .btn[disabled] {
    background: #f6f6f6;
    color: #b6b6b6;
    cursor: default;
  }

  @media (min-width: 769px) {
    .btn {
      padding: 11px 20px;
      font-size: 13px;
    }
  }

  /* Campo trampa: fuera de la vista para personas, visible para robots */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .consent {
    display: flex;
    align-items: flex-start;
    margin: 12px 0 0;
    font-size: var(--fs-small);
    letter-spacing: inherit;
    text-align: left;
    text-transform: none;
    cursor: pointer;
  }

  .consent input {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 1px 8px 0 0;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--c-text);
  }

  .consent a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .form-message {
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    font-size: var(--fs-small);
    text-align: left;
  }

  .form-message--error {
    color: var(--c-error);
    background-color: var(--c-error-bg);
  }

  .form-message--ok {
    color: var(--c-success);
    background-color: #ecfef0;
  }

  /* Newsletter del pie */
  .newsletter {
    display: inline-block;
    width: 100%;
    max-width: 300px;
    vertical-align: top;
  }

  .newsletter__row {
    position: relative;
  }

  .newsletter__input {
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 10px 45px 10px 0;
    border: 0;
    border-bottom: 2px solid var(--c-footer-text);
    background-color: var(--c-footer);
    color: var(--c-footer-text);
  }

  .newsletter__input:focus {
    border: 0;
    border-bottom: 2px solid var(--c-footer-text);
  }

  .newsletter__input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .newsletter__input::placeholder {
    color: var(--c-footer-text);
    opacity: 1;
  }

  .newsletter__submit {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0;
    color: var(--c-footer-text);
    transform: translateY(-50%);
  }

  .newsletter__submit .icon {
    display: block;
    width: 26px;
    height: 24px;
  }

  .newsletter .consent input {
    accent-color: var(--c-footer-text);
  }

  @media (min-width: 960px) {
    .newsletter__input {
      font-size: var(--fs-small);
    }
  }
}

/* 20-hero.css */
@keyframes hero-image-in {
  from { opacity: 0; transform: translateX(200px); }
  to { opacity: 1; transform: translateX(0); }
}

@layer sections {
  /* Portada: una diapositiva a pantalla completa (al 90 % del alto hasta 768 px, como hoy) */
  .hero {
    position: relative;
    height: 90vh;
    overflow: hidden;
    background: var(--c-bg);
  }

  .hero__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: hero-image-in .7s ease both;
  }

  /* Parallax: el contenedor sobresale un 30 % por arriba y por abajo; la imagen mide un 15 % más
     de lo que se ve (100 / 0,85) y 20-hero.js la desplaza hasta ese 15 % según el scroll. */
  .hero__parallax {
    position: absolute;
    top: -30%;
    left: 0;
    width: 100%;
    height: 160%;
  }

  .hero__parallax-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 117.647%;
    will-change: transform;
  }

  .hero__parallax-inner picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55.6038% 59.1331%;
  }

  /* Toda la diapositiva enlaza al catálogo */
  .hero__link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero__text {
    position: relative;
    z-index: 4;
    height: 100%;
    color: var(--c-hero-text);
    pointer-events: none;
  }

  .hero__text-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 15px;
    padding-bottom: 40px;
    text-align: center;
  }

  .hero__text-shadow {
    position: relative;
  }

  .hero__text-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -100px -200px;
    background: radial-gradient(rgba(0, 0, 0, .1) 0%, transparent 60%);
  }

  .hero__title {
    margin: 0;
    font-size: 32px;
  }

  .hero__subtitle {
    margin: 15px 0 30px;
    font-size: 18px;
  }

  /* Entrada: el texto sube desde debajo de su propio recorte */
  .hero__crop {
    display: inline-flex;
    overflow: hidden;
  }

  .hero__title .hero__rise {
    animation: rise-up .8s var(--ease-rise) .3s both;
  }

  .hero__subtitle .hero__rise {
    animation: rise-up 1s var(--ease-rise) .7s both;
  }

  @media (min-width: 769px) {
    .hero {
      height: 100vh;
    }

    .hero__image {
      object-position: 52.2777% 54.5335%;
    }

    .hero__text-inner {
      padding-top: 45px;
    }

    .hero__title {
      font-size: 64px;
    }
  }
}

/* 21-features.css */
@layer sections {
  /* Dos bloques con icono, centrados */
  .features__blocks {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .features__block {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 100%;
    padding: 0 0 60px;
    text-align: center;
  }

  .features__icon {
    margin-bottom: 10px;
    color: #000;
  }

  .features__icon .icon {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    --icon-stroke: .72;
  }

  @media (min-width: 769px) {
    .features__blocks {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0 -30px;
    }

    .features__block {
      width: 33.333%;
      padding: 30px;
    }

    .features__icon .icon {
      width: 70px;
      height: 70px;
    }
  }
}

/* 22-catalog-grid.css */
@layer sections {
  /* flow-root: los 15 px de margen inferior de .gozo-sabores no se funden con los de la sección (hoy tampoco). */
  .catalog-section > .page-width {
    display: flow-root;
  }

  /* CSS de la casa (.gozo-sabores), tomado del <style> de la portada actual.
     Los márgenes de titular y título son los medidos (25 px), no los 24 y 12 px que declara ese bloque. */
  .gozo-sabores {
    --historial: #F4EBDC;
    --texto: #5A3A24;
    --bordes: #F4EBDC;
    --card: #FAF3EA;

    margin-bottom: 15px;
    color: var(--texto);
    text-align: center;
  }

  .gozo-sabores__heading {
    margin: 0 0 25px;
    letter-spacing: .02em;
    text-align: center;
  }

  .gozo-sabores__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  @media (min-width: 990px) {
    .gozo-sabores__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .gozo-sabores__card {
    display: block;
    align-self: start;
    text-decoration: none;
    color: var(--texto);
    border: 1px solid var(--bordes);
    overflow: hidden;
    background: transparent;
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .gozo-sabores__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(90, 58, 36, .12);
  }

  .gozo-sabores__media {
    aspect-ratio: 1 / 1;
    background: var(--historial);
    overflow: hidden;
  }

  .gozo-sabores__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gozo-sabores__content {
    padding: 18px;
    background: var(--card);
    text-align: center;
  }

  .gozo-sabores__title {
    margin: 0 0 25px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    white-space: pre-line;
    line-height: 1.3;
    letter-spacing: .02em;
  }

  .gozo-sabores__desc {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    opacity: .9;
  }

  /* Hoy el bloque de precios empieza con una línea en blanco: 12 px de relleno más una línea (1.6em). */
  .gozo-sabores__metafield {
    margin-top: 14px;
    padding-top: calc(12px + 1.6em);
    border-top: 1px solid var(--bordes);
    font-size: 13px;
    line-height: 1.6;
  }

  .gozo-sabores__metafield span {
    display: block;
  }
}

/* 23-reviews.css */
@layer sections {
  /* Reseñas: carrusel con la tarjeta central ampliada. Tono gris en la portada y crema en la ficha. */
  .reviews {
    padding: 25.5px 0;
    background-color: #f9f9f9;
    color: #1c1d1d;
    text-align: center;
  }

  .reviews--cream {
    background-color: var(--c-surface);
    color: var(--c-text);
  }

  .reviews__carousel {
    position: relative;
  }

  /* Sin JavaScript la fila se recorre con scroll horizontal */
  .reviews__viewport {
    overflow-x: auto;
  }

  .reviews__carousel.is-ready .reviews__viewport {
    overflow: hidden;
    cursor: grab;
    transition: height .35s;
  }

  .reviews__carousel.is-ready .reviews__viewport:active {
    cursor: grabbing;
  }

  .reviews__container {
    display: flex;
    align-items: flex-start;
  }

  .reviews__slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 40px 0 55px;
  }

  .reviews__card {
    margin: 0 30px 15px;
    padding: 30px 15px;
    background: var(--c-bg);
    color: var(--c-text);
    transform: scale(.86);
    transition: transform .5s ease, box-shadow .5s ease;
  }

  .reviews__slide.is-selected .reviews__card {
    position: relative;
    z-index: 10;
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
  }

  .reviews__stars {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: .2em;
  }

  .reviews__body {
    margin-bottom: 15px;
  }

  .reviews__body p {
    margin: 0 0 7.5px;
  }

  .reviews__body p:last-child {
    margin-bottom: 0;
  }

  .reviews__author {
    display: block;
    font-weight: 700;
  }

  /* Caja de 1em de alto con los puntos centrados; el relleno superior los baja a la altura que tienen hoy. */
  .reviews__dots {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1em;
    padding-top: .18em;
  }

  .reviews__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0 5px;
    border-radius: 100%;
    background-color: currentColor;
    opacity: .4;
    cursor: pointer;
  }

  .reviews__dot:hover {
    opacity: .6;
  }

  .reviews__dot.is-selected {
    width: 9px;
    height: 9px;
    opacity: 1;
  }

  @media (min-width: 769px) {
    .reviews {
      padding: 75px 0;
    }

    .reviews__slide {
      flex-basis: 33%;
    }

    .reviews__card {
      margin: 0;
      padding: 30px;
      transform: scale(.95);
    }

    .reviews__slide.is-selected .reviews__card {
      transform: scale(1.1);
    }

    .reviews__stars {
      margin-bottom: 15px;
      font-size: 18px;
    }

    .reviews__author {
      font-size: 15px;
    }
  }
}

/* 24-stores.css */
@layer sections {
  /* Tiendas: caja de texto sobre una imagen de fondo */
  .stores {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
  }

  .stores__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .stores__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html.js .stores[data-appear] .stores__bg {
    opacity: 0;
  }

  html.js .stores[data-appear].is-visible .stores__bg {
    animation: zoom-fade 2.5s var(--ease-rise) 0s forwards;
  }

  /* El enlace al mapa cubre la sección; la caja queda por encima */
  .stores__map-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* En móvil la caja mide lo que su línea más larga, con 30 px de margen a cada lado como tope. */
  .stores__box {
    position: relative;
    z-index: 3;
    display: inline-block;
    width: max-content;
    max-width: calc(100% - 60px);
    margin: 30px;
    padding: 30px;
    background-color: var(--c-bg);
  }

  .stores__title {
    margin-bottom: 15px;
  }

  .stores__list {
    margin-bottom: 15px;
  }

  .stores__list ul {
    margin: 0 0 15px 30px;
  }

  .stores__list li {
    margin-bottom: 0;
  }

  .stores__list p {
    margin: 0 0 15px;
  }

  .stores__list p:last-child {
    margin-bottom: 0;
  }

  @media (min-width: 769px) {
    .stores {
      height: 500px;
    }

    .stores__box {
      position: absolute;
      top: 50%;
      left: 30px;
      width: 30%;
      margin-top: 0;
      transform: translateY(-50%);
    }
  }
}

/* 30-product.css */
/* Ficha de producto.
   Medidas: capturas/{375,768,1440}/products__tarta-de-queso-y-nutella.{json,png}. */

@layer pages {
  .product {
    padding: 0 0 40px;
  }

  /* En móvil la galería va a sangre: compensa el margen de la página. En los 45 px de
     debajo caben los puntos y el aire hasta el título. */
  .product__media {
    margin: 0 calc(-1 * var(--gutter)) 45px;
  }

  .product__meta {
    text-align: center;
  }

  /* El título es un h1 con el tamaño de un h2, como hoy. */
  .product__title {
    margin: 0 0 50px;
    font-size: var(--fs-h2);
  }

  .product__prices {
    margin: 0 0 25px;
  }

  .product__price {
    display: block;
  }

  .product__rule {
    height: 0;
    margin: 0 0 25px;
    border: 0;
    border-top: 1px solid var(--c-surface);
  }

  .product__description {
    margin: 0 0 25px;
    text-align: left;
  }

  .product__description p {
    margin: 0;
  }

  .product__meta .accordion,
  .product__meta .alergenos {
    margin-bottom: 25px;
  }

  /* --- Galería -------------------------------------------------------- */

  .product-gallery__main {
    position: relative;
  }

  .product-gallery__thumbs {
    display: none;
  }

  .product-gallery__track {
    position: relative;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .product-gallery__track::-webkit-scrollbar {
    display: none;
  }

  /* Huecos laterales para que la primera y la última foto queden centradas al 75 %. */
  .product-gallery__track::before,
  .product-gallery__track::after {
    content: "";
    flex: 0 0 calc(12.5% - 4px);
  }

  .product-gallery__slide {
    position: relative;
    flex: 0 0 75%;
    scroll-snap-align: center;
  }

  .product-gallery__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1856 / 2304;
    object-fit: cover;
  }

  .product-gallery__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 1px solid var(--c-surface);
    border-radius: 50%;
    background: var(--c-bg);
    color: var(--c-text);
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
  }

  .product-gallery__dots {
    position: absolute;
    right: 0;
    bottom: -26px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 13px;
  }

  .product-gallery__dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-text);
    opacity: .4;
  }

  /* Zona de toque mayor que el punto, sin mover nada. */
  .product-gallery__dot::before {
    content: "";
    position: absolute;
    inset: -14px -3px;
  }

  .product-gallery__dot.is-active {
    width: 9px;
    height: 9px;
    opacity: 1;
  }

  @media (min-width: 769px) {
    .product {
      padding: 55px 0 75px;
    }

    /* 60 % / 40 % con un canal de 22 px: la galería mide 807 px a 1440. */
    .product__grid {
      display: grid;
      grid-template-columns: calc(60% - 8.8px) minmax(0, 1fr);
      column-gap: 22px;
      align-items: start;
    }

    .product__media {
      margin: 0;
    }

    .product__meta {
      padding-left: 45px;
      text-align: left;
    }

    .product-gallery {
      display: flex;
      align-items: flex-start;
    }

    .product-gallery__thumbs {
      display: block;
      flex: 0 0 80px;
      margin-right: 15px;
    }

    .product-gallery__thumb {
      position: relative;
      display: block;
      margin-bottom: 15px;
      border: 2px solid transparent;
    }

    /* Reserva la altura de la foto: las miniaturas son lazy y, sin ella, miden unos 4 px hasta cargar. */
    .product-gallery__thumb img {
      width: 100%;
      height: auto;
      aspect-ratio: 1856 / 2304;
      object-fit: cover;
    }

    .product-gallery__thumb.is-active::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      box-shadow: inset 0 0 0 2px var(--c-text);
    }

    .product-gallery__main {
      flex: 1 1 0;
      min-width: 0;
    }

    /* En escritorio solo se ve una foto; la miniatura desplaza la pista. */
    .product-gallery__track {
      gap: 0;
      overflow: hidden;
      scroll-snap-type: none;
    }

    .product-gallery__track::before,
    .product-gallery__track::after {
      content: none;
    }

    .product-gallery__slide {
      flex-basis: 100%;
    }

    /* La lupa cubre toda la foto y no se ve: el cursor indica que amplía. */
    .product-gallery__zoom {
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .product-gallery__zoom .icon {
      display: none;
    }

    .product-gallery__zoom:focus-visible {
      outline-offset: -4px;
    }

    .product-gallery__dots {
      display: none;
    }
  }
}

/* Colores del visor de PhotoSwipe. Va fuera de las capas a propósito: la hoja de PhotoSwipe
   se carga después y sin capa, y solo así (con :root delante) estos valores ganan a los suyos. */
:root .pswp {
  --pswp-bg: #f4ebdc;
  --pswp-placeholder-bg: #f4ebdc;
  --pswp-icon-color: #5a3a24;
  --pswp-icon-color-secondary: #f4ebdc;
  --pswp-icon-stroke-color: #f4ebdc;
  --pswp-preloader-color: rgba(90, 58, 36, .4);
  --pswp-preloader-color-secondary: rgba(90, 58, 36, .9);
}

/* 31-allergens.css */
/* Iconos de alérgenos de la ficha. CSS de la casa (.alergenos), copiado del bloque <style>
   de migracion/instantanea/2026-10-01/html/products/*.html. Único cambio: el fondo del
   globo, que allí salía de una variable del tema y aquí es el fondo de la página. */

@layer pages {
  /* Contenedor */
  .alergenos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Botón / icono */
  .alergenos__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .alergenos__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .alergenos__icon svg {
    width: 28px;
    height: 28px;
    display: block;
  }

  /* Color fijo del SVG */
  .alergenos__icon svg,
  .alergenos__icon svg * {
    fill: #5a3a24 !important;
    stroke: #5a3a24 !important;
  }

  /* Globo con el nombre */
  .alergenos__tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 2;
    transform: translateX(-50%);
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #5a3a24;
    background: var(--c-bg);
  }

  /* Ratón */
  @media (hover: hover) {
    .alergenos__item:hover .alergenos__tooltip {
      opacity: 1;
      visibility: visible;
    }
  }

  /* Teclado */
  .alergenos__item:focus-visible .alergenos__tooltip {
    opacity: 1;
    visibility: visible;
  }

  /* Toque (31-allergens.js pone y quita is-open) */
  .alergenos__item.is-open .alergenos__tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 32-accordion.css */
/* Acordeones sobre <details data-accordion>: "Cómo disfrutarla" (accordion--boxed) y preguntas
   frecuentes (accordion--inline). Medidas: products__tarta-de-queso-y-nutella y
   pages__preguntas-frecuentes a 375, 768 y 1440. */

@layer pages {
  .accordion__trigger {
    position: relative;
    display: block;
    -webkit-tap-highlight-color: transparent;
  }

  .accordion__trigger::marker {
    content: "";
  }

  /* Flecha: dos bordes de un cuadrado girado. Abierto, se voltea sin cambiar de sitio. */
  .accordion__trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6.5px;
    height: 6.5px;
    margin-top: -5.5px;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    transition: transform .1s ease-in;
  }

  .accordion[open] > .accordion__trigger::after {
    transform: translateY(4.5px) rotate(-135deg);
  }

  .accordion__panel {
    overflow: hidden;
  }

  .accordion__content > :first-child {
    margin-top: 0;
  }

  .accordion__content > :last-child {
    margin-bottom: 0;
  }

  .accordion__content p {
    margin: 0 0 15px;
  }

  .accordion__content ul,
  .accordion__content ol {
    margin: 0 0 15px 30px;
  }

  .accordion__content li {
    margin-bottom: 0;
  }

  .accordion__content a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* --- Con recuadro: ficha de producto --------------------------------- */

  .accordion--boxed {
    border-bottom: 1px solid var(--c-surface);
  }

  .accordion--boxed > .accordion__trigger {
    padding: 12px;
    border: 1px solid var(--c-surface);
    border-bottom: 0;
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-caps);
    text-align: center;
    text-transform: uppercase;
  }

  .accordion--boxed > .accordion__trigger::after {
    right: 13.5px;
  }

  .accordion--boxed .accordion__content {
    padding: 0 20px 20px;
    border: 1px solid var(--c-surface);
    border-top: 0;
    text-align: left;
  }

  .accordion--boxed .accordion__content p {
    white-space: pre-line;
  }

  /* --- En línea: preguntas frecuentes ---------------------------------- */

  .accordion--inline > .accordion__trigger {
    padding: 11px 40px 11px 0;
    text-align: left;
  }

  /* Círculo de 28 px a la derecha, con la flecha dentro. */
  .accordion--inline > .accordion__trigger::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border: 1px solid var(--c-surface);
    border-radius: 50%;
    transition: background-color .2s;
  }

  .accordion--inline > .accordion__trigger::after {
    right: 10.75px;
  }

  @media (hover: hover) {
    .accordion--inline > .accordion__trigger:hover::before {
      background-color: rgba(90, 58, 36, .08);
    }
  }

  .accordion--inline .accordion__content {
    padding: 0 0 30px;
  }

  @media (min-width: 769px) {
    .accordion__trigger::after {
      width: 8px;
      height: 8px;
      margin-top: -7px;
    }

    .accordion[open] > .accordion__trigger::after {
      transform: translateY(6px) rotate(-135deg);
    }

    .accordion__content p,
    .accordion__content ul,
    .accordion__content ol {
      margin-bottom: 25px;
    }

    .accordion--boxed > .accordion__trigger {
      padding: 15px;
    }

    .accordion--boxed > .accordion__trigger::after {
      right: 17px;
    }

    .accordion--inline > .accordion__trigger::after {
      right: 10px;
    }
  }
}

/* 33-more-products.css */
/* "Más sabores", al final de la ficha. CSS de la casa (.other-products), copiado del bloque
   <style> de migracion/instantanea/2026-10-01/html/products/*.html, con tres ajustes medidos
   en las capturas: margen del título 25 px, foto a todo el ancho recortada arriba y abajo
   (hoy una regla del tema anula el "contain") y una línea en blanco sobre los precios. */

@layer pages {
  /* Hoy el bloque queda 32 px más abajo que una sección normal; debajo deja el hueco de siempre. */
  .other-products {
    padding-top: 32px;
  }

  /* GRID */
  .other-products__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  @media (min-width: 750px) {
    .other-products__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* SECTION TITLE */
  .other-products__title {
    margin: 0 0 25px;
    text-align: center;
  }

  /* CARD - quitar subrayados */
  .other-products__card,
  .other-products__card:hover,
  .other-products__card:focus,
  .other-products__card:active {
    display: block;
    text-decoration: none !important;
    border-bottom: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .other-products__card * {
    text-decoration: none !important;
    border-bottom: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* MARCO CUADRADO */
  .other-products__image-wrap {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* IMAGEN CENTRADA */
  .other-products__image {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }

  /* INFO */
  .other-products__info {
    padding-top: 12px;
  }

  .other-products__name {
    margin: 0 0 8px;
    line-height: 1.25;
    text-align: center;
  }

  .other-products__price {
    padding-top: 1.2em;
    line-height: 1.2;
    text-align: center;
  }

  .other-products__price span {
    display: block;
  }
}

/* 40-page-text.css */
/* Páginas de texto: cookies y bases del sorteo (text-page--page), políticas e información de
   contacto (text-page--policy). Una sola plantilla con los dos anchos de hoy.
   Medidas: pages__politica-de-cookies, policies__legal-notice y policies__contact-information. */

@layer pages {
  .text-page {
    margin: 0 auto;
  }

  .text-page__title {
    text-align: center;
  }

  .text-page__body li {
    margin-bottom: 0;
  }

  /* Subtítulos del cuerpo: un escalón por debajo de los del resto de la web. */
  .text-page__body h2,
  .text-page__body h3 {
    margin: 2em 0 1em;
  }

  .text-page__body h2 {
    font-size: var(--fs-h3);
  }

  .text-page__body h3 {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-caps);
  }

  .text-page__body a {
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
  }

  /* Políticas: columna estrecha, con el aire de arriba y abajo como relleno. */
  .text-page--policy {
    max-width: 520px;
    padding: var(--section-gap) 20px;
  }

  /* Cookies y sorteo: el envoltorio de la casa (.policy-page-wrapper). Debajo deja 32 px más
     (37 px desde 769) que una sección normal. */
  .text-page--page {
    max-width: 800px;
    margin: var(--section-gap) auto calc(var(--section-gap) + 32px);
    padding: 40px 20px;
  }

  .text-page--page .text-page__title {
    margin-bottom: 25px;
    letter-spacing: 1px;
  }

  .text-page--page .text-page__body {
    line-height: 1.6;
  }

  .text-page--page .text-page__body p,
  .text-page--page .text-page__body ul,
  .text-page--page .text-page__body ol {
    margin-bottom: 1.2em;
  }

  .text-page--page .text-page__body ul,
  .text-page--page .text-page__body ol {
    padding-left: 1.5em;
  }

  @media (min-width: 769px) {
    .text-page--policy {
      max-width: 585px;
    }

    .text-page--policy .text-page__body p,
    .text-page--policy .text-page__body ul,
    .text-page--policy .text-page__body ol {
      margin-bottom: 25px;
    }

    .text-page--page {
      margin-bottom: calc(var(--section-gap) + 37px);
    }
  }

  /* El primer y el último bloque del cuerpo no añaden aire: lo pone el contenedor.
     Va al final y con .text-page delante para ganar a los márgenes de cada variante. */
  .text-page .text-page__body > :first-child {
    margin-top: 0;
  }

  .text-page .text-page__body > :last-child {
    margin-bottom: 0;
  }
}

/* 41-about.css */
/* Sobre nosotros. Medidas: pages__sobre-nosotros a 375, 768 y 1440. */

@layer pages {
  .about-hero {
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
    color: var(--c-hero-text);
  }

  /* Hasta 768 px el alto lo da la propia foto. */
  .about-hero__image {
    width: 100%;
    height: auto;
  }

  .about-hero__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px var(--gutter) 40px;
    text-align: center;
  }

  /* Sin foto, el bloque conserva el alto que tiene hoy a 375 px. */
  .about-hero--plain .about-hero__inner {
    position: relative;
    min-height: 209px;
  }

  .about-hero__title {
    position: relative;
    margin: 0;
    font-size: 40px;
  }

  /* Sombra muy suave detrás del titular, para que se lea sobre la foto. */
  .about-hero__title::before {
    content: "";
    position: absolute;
    inset: -100px -200px;
    z-index: -1;
    background: radial-gradient(rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
  }

  .about-text {
    font-size: 18px;
    text-align: center;
  }

  .about-text > :last-child {
    margin-bottom: 0;
  }

  .about-text a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media (min-width: 769px) {
    .about-hero {
      height: 450px;
    }

    .about-hero__image {
      position: absolute;
      inset: 0;
      height: 100%;
      object-fit: cover;
    }

    .about-hero__inner,
    .about-hero--plain .about-hero__inner {
      position: absolute;
      min-height: 0;
      padding-top: 45px;
    }

    .about-hero__title {
      font-size: 80px;
    }

    .about-text p {
      margin-bottom: 25px;
    }
  }
}

/* 42-contact.css */
/* Contacto: bloque de ayuda y formulario. Medidas: pages__contact a 375, 768 y 1440.
   Campos, etiquetas, botón, casilla y avisos son los de 13-forms.css; aquí solo va la
   colocación. La casilla de privacidad y los mensajes son nuevos (desviación 4 del diseño). */

@layer pages {
  .contact-intro {
    text-align: center;
  }

  /* Titular con el tamaño de un h2, como hoy. Los tres bloques se separan 30 px. */
  .contact-intro__title {
    margin: 0 0 30px;
    font-size: var(--fs-h2);
  }

  .contact-intro__text {
    margin: 0 0 30px;
    font-size: 18px;
  }

  .contact-intro__text > :last-child {
    margin-bottom: 0;
  }

  .contact-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 10px;
  }

  .contact-form__field {
    margin: 0 0 30px;
  }

  .contact-form__input {
    display: block;
    width: 100%;
  }

  textarea.contact-form__input {
    resize: vertical;
  }

  .contact-form__input[aria-invalid="true"] {
    border-color: var(--c-error);
  }

  .contact-form__error {
    margin: 6px 0 0;
    color: var(--c-error);
    font-size: var(--fs-small);
  }

  .contact-form .form-message {
    margin-bottom: 30px;
  }

  .contact-form .consent {
    margin: 0;
  }

  .contact-form__actions {
    margin: 0 0 30px;
    text-align: center;
  }

  @media (min-width: 769px) {
    .contact-form__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* 43-faq.css */
/* Página de preguntas frecuentes. El acordeón está en 32-accordion.css y el contenedor es el
   de 03-layout.css. Medidas: pages__preguntas-frecuentes a 375, 768 y 1440. */

@layer pages {
  /* El titular es un h1 con el tamaño de un h2, como hoy. */
  .faq-page__title {
    font-size: var(--fs-h2);
  }
}

/* 44-search.css */
/* Buscador: formulario y resultados. Sin filtros ni ordenación (desviación 2 del diseño).
   Medidas: search y search__q-tarta a 375, 768 y 1440. */

@layer pages {
  .search {
    padding: var(--section-gap) 0;
  }

  .search-form {
    position: relative;
    max-width: 960px;
    margin: 0 10px 0 20px;
  }

  .search-form__input {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: #fff;
    color: #000;
  }

  .search-form__input::placeholder {
    color: #000;
    opacity: 1;
  }

  .search-form__submit {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 1px 6px;
    color: #000;
    line-height: 0;
  }

  .search-form__submit .icon {
    width: 25px;
    height: 25px;
  }

  .search__divider {
    height: 0;
    margin: 25px 0 31px;
    border: 0;
    border-top: 1px solid var(--c-surface);
  }

  .search__count {
    margin: 0 0 17px;
    text-align: center;
  }

  .search-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 17px;
    margin: 0;
    list-style: none;
  }

  .search-results__item {
    margin: 0;
  }

  .search-card {
    display: block;
  }

  .search-card__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .search-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-card__meta {
    display: block;
    padding: 10px 0 6px;
    line-height: 1.3;
    text-align: center;
  }

  .search-card__title {
    display: block;
  }

  /* Precio de la tarta, bajo el título, como en la web anterior: 12 px en los tres anchos
     y en el gris oscuro #2e2e2c, que es el mismo del fondo del pie. */
  .search-card__price {
    display: block;
    margin-top: 5px;
    color: var(--c-footer);
    font-size: var(--fs-small);
  }

  /* Resultado sin foto (página o artículo): tarjeta con título y extracto. */
  .search-card--text {
    padding: 20px;
    background: #f2e7d4;
  }

  .search-card__label {
    display: block;
    margin: 0 0 10px;
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .search-card__excerpt {
    display: block;
    overflow-wrap: anywhere;
  }

  @media (min-width: 769px) {
    .search-form {
      margin: 0 auto;
    }

    .search-form__submit {
      right: 10px;
    }

    .search__divider {
      margin: 35px 0 62px;
    }

    .search__count {
      margin-bottom: 27px;
      text-align: left;
    }

    .search-results {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px 22px;
    }

    .search-card__label {
      margin-bottom: 15px;
    }
  }
}

/* 45-blog.css */
/* Blog: hoy solo el estado vacío. Medidas del titular: blogs__noticias a 375, 768 y 1440. */

@layer pages {
  .blog {
    padding: var(--section-gap) 0;
    text-align: center;
  }

  .blog__empty {
    margin: 0;
  }

  .blog__list {
    max-width: 920px;
    margin: 0 auto;
    list-style: none;
  }

  .blog__item {
    margin: 0 0 30px;
  }

  .blog__item:last-child {
    margin-bottom: 0;
  }

  .blog__item-title {
    margin: 0 0 10px;
    font-size: var(--fs-h3);
  }

  .blog__item-excerpt {
    margin: 0;
  }
}

/* 46-404.css */
/* Página 404. CSS de la casa (.gozo-404), copiado del bloque <style> de
   migracion/instantanea/2026-10-01/html/pagina-que-no-existe.html. Las variables que usaba
   no existían en el tema, así que aquí van los valores que el navegador acababa aplicando
   (capturas/{375,768,1440}/pagina-que-no-existe.json): titular con la fuente del cuerpo,
   peso 400 y 25 px de margen inferior. */

@layer pages {
  .not-found {
    margin: var(--section-gap) auto;
  }

  .gozo-404 {
    width: 100%;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 20px;
  }

  .gozo-404__inner {
    max-width: 900px;
  }

  .gozo-404__title {
    margin: 0 0 25px;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.05;
  }

  .gozo-404__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    opacity: .9;
  }

  .gozo-404__text a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}