/* ══════════════════════════════════════════════════════════════════════
   LA TIPOGRAFÍA, EN NUESTRO PROPIO SERVIDOR
   ──────────────────────────────────────────────────────────────────────
   Antes se pedía a Google en cada carga. Eso tenía dos pegas: la página
   no dibujaba nada hasta que Google contestara, y la dirección IP de
   cada visitante acababa en sus servidores — cosa que el aviso de
   cookies dice expresamente que no hacemos.

   Son fuentes variables: un solo archivo cubre del grosor 300 al 700.
   Recortadas a los alfabetos latinos, pesan 48 KB cada una. La cursiva
   solo se descarga en las páginas que la usan.
   ══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/oko-serif.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  /* Mientras llega, se lee con la tipografía del sistema en vez de
     dejar el texto invisible */
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/oko-serif-italica.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --orange: #C8741A;
    --dark: #000000;
    --cream: #DEE0DC;          /* fondo de las secciones claras */
    --cream-claro: #E6E8E3;    /* fondo tras las fotos de producto */
    --cream-oscuro: #D4D5D0;   /* hueco de una foto que aún no está */
    --navy: #2C3556;
    --white: #ffffff;
    --text-dark: #1a1a1a;
    /* Tipografía principal del sitio. Cambiar aquí afecta toda la página. */
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    /* Sans para formularios: más legible que la serif en campos de texto. */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  body {
    font-family: var(--font-serif);
    /* Gris, no blanco: así ningún hueco entre secciones (ni el rebote al
       hacer scroll) deja ver una franja blanca */
    background: var(--cream);
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ── NAV ── */
  body > nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* centra los enlaces de verdad */
    align-items: center;
    gap: 32px;
    padding: 35px 60px;
    background: var(--dark);
  }

  .nav-logo {
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.25s ease;
  }

  /* En el móvil no hay ratón: :hover se queda pegado después de tocarlo,
     así que el naranja solo se enciende donde de verdad hay cursor */
  @media (hover: hover) {
    .nav-logo:hover { color: var(--orange); }
  }

  .nav-logo:focus-visible { color: var(--orange); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    justify-content: center;
  }

  .nav-links a {
    color: var(--white);
    font-family: var(--font-serif);
    text-decoration: none;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.2s;
  }

  .nav-links a:hover { color: var(--orange); }

  .nav-links a.active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }


  /* ── HERO ── */
  .hero {
    background: var(--dark);
    min-height: 83vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 110px;   /* espacio para la barra de navegación fija */
    padding-bottom: 58px; /* sube el logo para centrarlo sobre la curva */
    position: relative;
    overflow: hidden;
  }

  .hero-logo-img {
    display: block;
    width: 42vw;
    max-width: 680px;
    height: auto;
  }

  .hero-title {
    font-family: var(--font-serif);
    font-size: clamp(72px, 12vw, 160px);
    font-weight: 300;
    color: var(--orange);
    letter-spacing: 0.08em;
    line-height: 0.9;
    text-transform: uppercase;
  }

  .hero-subtitle {
    color: var(--orange);
    font-size: clamp(13px, 1.8vw, 18px);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 20px;
    font-family: var(--font-serif);
  }

  .hero-location {
    color: var(--white);
    font-size: clamp(16px, 2.2vw, 24px);
    font-family: var(--font-serif);
    font-weight: 300;
    margin-top: 8px;
    letter-spacing: 0.05em;
  }

  .hero-curve {
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: clamp(65px, 6.8vw, 115px);
  }

  .hero-curve svg {
    width: 100%;
    height: 100%;
  }

  /* ── PRODUCTS ── */
  .products {
    background: var(--cream);
    padding: 85px 60px 90px;
  }

  .products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 56px;
  }

  .products-title {
    font-family: var(--font-serif);
    font-size: clamp(30px, 2.6vw, 40px);
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.05;
  }

  .btn-adquirir {
    flex-shrink: 0;
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
    border-radius: 50px;
    padding: 16px 40px;
    min-width: 220px;
    text-align: center;
    font-size: 17px;
    font-family: var(--font-serif);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }

  .btn-adquirir:hover {
    background: var(--navy);
    color: var(--white);
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .product-card {
    background: var(--cream);
    text-align: left;
  }

  .product-img-wrap {
    background: var(--cream-claro);
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
  }

  .choc-logo {
    font-family: var(--font-serif);
    font-size: 42px;
    font-weight: 300;
    letter-spacing: 0.1em;
  }

  .choc-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
  }

  .choc-percent {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: center;
  }

  .card-95 .choc-logo { color: #D4607A; }
  .card-95 .choc-label { color: #aaa; }
  .card-95 .choc-percent { color: #D4607A; }

  .card-70 .choc-logo { color: #9B8FD4; }
  .card-70 .choc-label { color: #aaa; }
  .card-70 .choc-percent { color: #9B8FD4; }

  .card-80 .choc-logo { color: #9B8FD4; }
  .card-80 .choc-label { color: #aaa; }
  .card-80 .choc-percent { color: #9B8FD4; }

  .product-name {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    margin-top: 20px;
    font-family: var(--font-serif);
    font-size: 22px;
  }

  .product-price {
    font-size: 16px;
    color: var(--text-dark);
    margin-top: 6px;
    font-family: var(--font-serif);
    font-size: 15px;
  }

  .product-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
  }

  .qty-control {
    display: flex;
    align-items: center;
    border: 1.5px solid #888;
    border-radius: 50px;
    overflow: hidden;
  }

  .qty-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }

  .qty-btn:hover { background: #eee; }

  .qty-num {
    width: 32px;
    text-align: center;
    font-size: 15px;
    font-family: var(--font-serif);
  }

  .add-btn {
    flex: 1;
    background: var(--navy);
    color: var(--white);
    /* Transparente en reposo; al pasar el ratón se le pone color. Sin
       esto, un botón que se llena de blanco sobre un fondo claro se
       queda sin silueta y parece que ha desaparecido. */
    border: 1.5px solid transparent;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 14px;
    font-family: var(--font-serif);
    cursor: pointer;
    transition: background 0.2s;
  }

  .add-btn:hover { background: #1e2740; }

  /* ── HISTORIA ── */
  .historia {
    background: var(--dark);
    padding: 100px 48px;
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 100%;
  }

  .historia-img {
    width: 45%;
    max-width: 560px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
  }

  /* La altura sale de la proporción de la foto, no de un número fijo:
     así la imagen nunca se recorta por los lados en pantallas medianas. */
  .historia-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 522 / 466;
    object-fit: cover;
    border-radius: 4px;
  }

  .historia-placeholder {
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #3a7a5a, #2a5a3a);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .historia-placeholder::after {
    content: '🌿';
    font-size: 80px;
    opacity: 0.3;
  }

  .historia-content {
    color: var(--white);
    flex: 1;
  }

  .historia-content h2 {
    font-family: var(--font-serif);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 400;
    margin-bottom: 28px;
    line-height: 1.1;
  }

  .historia-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 40px;
    max-width: 480px;
  }

  .btn-outline {
    display: inline-block;
    background: var(--white);
    color: var(--text-dark);
    border: none;
    border-radius: 50px;
    padding: 16px 40px;
    font-size: 15px;
    font-family: var(--font-serif);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
  }

  .btn-outline:hover { background: #eee; }

  /* ── SOCIAL ── */
  .social {
    background: var(--cream);
    padding: 80px 48px;
    text-align: center;
  }

  .social h2 {
    font-family: var(--font-serif);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 48px;
    letter-spacing: -0.01em;
  }

  .social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto 48px;
  }

  .social-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
  }

  .social-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }

  .social-img:hover img { transform: scale(1.04); }

  .social-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
  }

  .sp1 { background: #5a7a6a; }
  .sp2 { background: #4a6070; }
  .sp3 { background: #d4905a; }
  .sp4 { background: #6a5a4a; }

  /* Es un enlace, no un botón: lleva al Instagram de la empresa */
  .btn-social {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background: var(--navy);
    color: var(--white);
    border: 1.5px solid transparent;
    border-radius: 50px;
    padding: 16px 40px;
    font-size: 15px;
    font-family: var(--font-serif);
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.2s;
  }

  .btn-social:hover { background: #1e2740; }

  /* ── CONTACT ── */
  .contact {
    background: var(--dark);
    padding: 100px 48px;
    display: flex;
    align-items: flex-start;
    gap: 80px;
  }

  .contact-left {
    flex: 0 0 38%;
    color: var(--white);
  }

  .contact-left h2 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4vw, 60px);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 24px;
  }

  .contact-left p {
    font-size: 15px;
    line-height: 1.7;
    color: #ccc;
  }

  .contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-group label {
    color: var(--white);
    font-size: 14px;
    font-family: var(--font-serif);
  }

  .form-group label span {
    color: #888;
    font-size: 13px;
    margin-left: 4px;
  }

  .form-group input,
  .form-group textarea {
    width: 100%;
    background: transparent;
    border: 1.5px solid #555;
    border-radius: 50px;
    padding: 14px 20px;
    color: var(--white);
    font-size: 15px;
    font-family: var(--font-serif);
    outline: none;
    transition: border-color 0.2s;
  }

  .form-group textarea {
    border-radius: 16px;
    resize: vertical;
    min-height: 140px;
  }

  .form-group input:focus,
  .form-group textarea:focus {
    border-color: var(--white);
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder { color: #555; }

  .btn-send {
    align-self: flex-start;
    background: var(--white);
    color: var(--text-dark);
    border: none;
    border-radius: 50px;
    padding: 16px 48px;
    font-size: 15px;
    font-family: var(--font-serif);
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn-send:hover { background: #eee; }

  /* ── FOOTER ── */
  footer {
    background: var(--cream);
    padding: 32px 48px;
    /* Tres columnas en vez de space-between: así los iconos quedan
       centrados de verdad, sin que los textos de los lados los desplacen */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }

  .footer-copy {
    font-size: 13px;
    color: var(--navy);
    font-family: var(--font-serif);
    text-align: left;
    justify-self: start;
    line-height: 1.5;
  }

  .footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-self: center;
  }

  .footer-social a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 20px;
    transition: color 0.2s;
  }

  .footer-social a:hover { color: var(--navy); }

  .footer-email { justify-self: end; }

  .footer-email a {
    color: var(--navy);
    font-size: 14px;
    font-family: var(--font-serif);
    text-decoration: underline;
  }

  /* Chocolate bar SVG mockup */
  .choc-bar-svg {
    width: 100%;
    height: 100%;
    padding: 24px;
  }

  /* ── PÁGINAS INTERIORES (Nuestra Historia, etc.) ── */
  .pagina {
    background: var(--cream);
    min-height: calc(100vh - 110px);
    margin-top: 110px;      /* deja pasar la barra de navegación fija */
    padding: 74px 60px 90px;
  }

  .pagina-titulo {
    font-family: var(--font-serif);
    font-size: clamp(40px, 4.2vw, 66px);
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1;
    max-width: 1340px;
    margin: 0 auto 54px 0;  /* alineado a la izquierda, como el original */
  }

  .pagina-cols {
    display: grid;
    grid-template-columns: 688fr 517fr;
    gap: 129px;
    align-items: start;
    max-width: 1340px;
    margin-right: auto;     /* alineado a la izquierda, como el original */
  }

  .pagina-texto p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-dark);
  }

  .pagina-texto p + p { margin-top: 56px; }

  .pagina-foto img {
    width: 100%;
    /* Tope de altura: una foto vertical, a todo el ancho de la columna,
       se estiraba casi 800px y dominaba la página */
    max-height: 540px;
    object-fit: cover;
    object-position: center 38%;
    display: block;
  }

  /* Marcador mientras no esté la foto real */
  .foto-pendiente {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(44, 53, 86, 0.05);
    border: 1.5px dashed rgba(44, 53, 86, 0.3);
    color: rgba(44, 53, 86, 0.55);
    font-family: var(--font-serif);
    font-size: 16px;
  }

  .foto-pendiente svg { width: 46px; height: 46px; }

  /* ── MÓVIL ── */
  @media (max-width: 900px) {
    .pagina-cols {
      grid-template-columns: 1fr;
      gap: 44px;
    }
    .pagina { padding: 48px 24px 64px; }
  }

  /* ── PÁGINAS DE TEXTO LARGO (privacidad) ──
     Texto corrido, alineado a la izquierda y en una sola columna. Nada
     centrado: una columna estrecha y centrada obliga a los ojos a saltar
     de un lado a otro en cada línea, y en un texto largo eso cansa.
     El ancho se topa en 42em, que son unas 75 letras por línea: el punto
     donde se lee más cómodo. */
  .legal {
    max-width: 42em;
    font-family: var(--font-serif);
    color: var(--text-dark);
  }

  .legal p,
  .legal li {
    font-size: 17px;
    line-height: 1.65;
  }

  .legal p { margin-bottom: 18px; }

  .legal-fecha {
    font-size: 15px;
    color: rgba(26, 26, 26, 0.55);
    margin-bottom: 30px;
  }

  .legal-lead {
    font-size: 20px;
    line-height: 1.5;
  }

  .legal h2 {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.25;
    margin: 44px 0 16px;
  }

  .legal ul {
    margin: 0 0 18px;
    padding-left: 22px;
  }

  .legal li { margin-bottom: 10px; }

  .legal strong { font-weight: 600; }

  .legal a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .legal a:hover { color: var(--orange); }

  /* -- La columna, centrada en la página --
     El resto de secciones van alineadas a la izquierda porque llevan una
     foto al lado que ocupa la otra mitad. Esta no: es texto y nada más,
     así que a la izquierda dejaba media pantalla vacía y la página se
     veía descolgada.
     Se centra el bloque entero. El texto sigue alineado a la izquierda
     dentro de él: en un texto largo, centrar cada línea obliga a buscar
     dónde empieza la siguiente.

     La medida va en rem y no en em a propósito: em se mide contra la
     letra del propio elemento, y el título es enorme, así que 42em ahí
     habrían sido más de 2000 puntos y no habría centrado nada. rem se
     mide siempre contra la misma referencia, así que los dos bloques
     salen del mismo ancho y quedan alineados entre sí. */
  .pagina-legal .pagina-titulo,
  .pagina-legal .legal {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  @media (max-width: 900px) {
    .legal p, .legal li { font-size: 16px; }
    .legal-lead { font-size: 18px; }
    .legal h2 { font-size: 23px; margin: 36px 0 14px; }
  }

  /* ── SECCIONES AÚN SIN CONTENIDO ── */
  .seccion-pendiente {
    max-width: 640px;
  }

  .seccion-pendiente p {
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-dark);
  }

  .seccion-pendiente .nota {
    margin-top: 18px;
    font-size: 16px;
    font-style: italic;
    color: rgba(26, 26, 26, 0.55);
  }

  /* ── BARRA DE NAVEGACIÓN EN PANTALLAS ESTRECHAS ── */
  @media (max-width: 1280px) {
    body > nav { padding: 26px 32px; gap: 20px; }
    .nav-links { gap: 20px; }
    .nav-links a { font-size: 15px; }
  }



  /* ── ICONOS DE LA DERECHA (buscar · cuenta · carrito) ── */
  .nav-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .icon-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s;
  }

  .icon-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
  .icon-btn:hover { color: var(--orange); }
  .icon-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

  .carrito-txt {
    font-family: var(--font-serif);
    font-size: 19px;
    letter-spacing: 0.01em;
  }

  /* ── DESPLEGABLE DE CUENTA ── */
  .cuenta-wrap { position: relative; }

  .menu-cuenta {
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px 0;
    display: flex;
    flex-direction: column;
    z-index: 120;
  }

  .menu-cuenta[hidden] { display: none; }

  /* Ancho completo: al agrupar las opciones en dos bloques (con sesión y
     sin ella) los botones dejaron de estirarse solos, y el resaltado al
     pasar el ratón se quedaba del tamaño de su texto */
  .menu-cuenta button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding: 14px 32px;
    cursor: pointer;
    transition: background 0.15s;
  }

  .menu-cuenta button:hover { background: rgba(255, 255, 255, 0.07); }

  /* ── PANEL LATERAL DE ACCESO ── */
  .panel-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .panel-fondo[hidden] { display: none; }
  .panel-fondo.visible { opacity: 1; }

  .panel-cuenta {
    position: fixed;
    top: 0; right: 0;
    width: 577px;
    max-width: 100%;
    height: 100dvh;
    background: var(--white);
    z-index: 210;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
    font-family: var(--font-sans);
  }

  .panel-cuenta[hidden] { display: none; }
  .panel-cuenta.visible { transform: translateX(0); }

  .panel-cerrar {
    position: absolute;
    top: 22px; right: 22px;
    width: 38px; height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .panel-cerrar svg { width: 17px; height: 17px; }
  .panel-cerrar:hover { background: rgba(255, 255, 255, 0.35); }

  .panel-cabecera {
    background:
      radial-gradient(120% 130% at 78% 115%, #6d6f5e 0%, transparent 60%),
      linear-gradient(135deg, #23231f 0%, #3a3b33 100%);
    color: var(--white);
    padding: 44px 40px 38px;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    flex-shrink: 0;
  }

  /* El ancho y el alto van también en el HTML, para que la cabecera no
     dé un salto cuando la imagen termine de cargar */
  .panel-logo {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    align-self: center;
  }

  .panel-cabecera ul { list-style: none; padding-top: 6px; }

  .panel-cabecera li {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 12px;
    white-space: nowrap;
  }

  .panel-cabecera a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .panel-cuerpo { padding: 0 40px 44px; }

  .panel-pestanas {
    display: flex;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 26px;
  }

  .panel-pestanas button {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 22px 0;
    font-family: var(--font-sans);
    font-size: 17px;
    color: #9a9a9a;
    cursor: pointer;
    transition: color 0.2s;
  }

  .panel-pestanas button.activa {
    color: #111;
    font-weight: 600;
    border-bottom-color: #111;
  }

  .aviso-demo {
    background: #FFF6E8;
    border-left: 3px solid var(--orange);
    padding: 13px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #7a5320;
    margin-bottom: 24px;
  }

  /* Campos con etiqueta flotante */
  .campo { position: relative; margin-bottom: 18px; }

  .campo-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .campo input {
    width: 100%;
    height: 62px;
    border: 1px solid #d5d5d5;
    background: var(--white);
    padding: 22px 20px 6px;
    font-family: var(--font-sans);
    font-size: 16px;
    color: #111;
  }

  .campo input:focus { outline: none; border-color: #111; }

  /* -- Un campo con problema --
     El borde se pone rojo y debajo aparece el motivo. El mensaje sale
     donde está el fallo y no arriba del formulario, que es donde no se
     mira. El margen del campo se recorta para que el texto quede
     pegado a su casilla y no flotando entre dos. */
  .campo.con-error { margin-bottom: 6px; }
  .campo.con-error input { border-color: #c0392b; }
  .campo.con-error input:focus { border-color: #c0392b; }

  .campo-error {
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    color: #c0392b;
  }

  .campo-error[hidden] { display: none; }

  .campo-error-enlace {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .campo-error-enlace:hover { color: var(--orange); }

  .campo label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    font-size: 16px;
    pointer-events: none;
    transition: top 0.15s, font-size 0.15s;
  }

  .campo input:focus + label,
  .campo input:not(:placeholder-shown) + label {
    top: 17px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
  }

  .ver-pass {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #666;
  }

  .ver-pass svg { width: 21px; height: 21px; display: block; }

  .fila-recordar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 6px 0 26px;
    font-size: 15px;
  }

  .check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    color: #333;
  }

  .check input {
    width: 18px; height: 18px;
    accent-color: #111;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .check-legal {
    font-size: 13.5px;
    line-height: 1.55;
    color: #555;
    margin: 4px 0 26px;
  }

  .check-legal a, .olvidada { color: inherit; text-underline-offset: 3px; }
  .olvidada { font-size: 15px; color: #111; }

  .btn-negro {
    width: 100%;
    height: 62px;
    background: #111;
    color: var(--white);
    border: 1.5px solid transparent;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn-negro:hover { background: #333; }

  .letra-legal {
    margin-top: 20px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #777;
    text-align: center;
  }

  .letra-legal a { color: #444; }

  @media (max-width: 760px) {
    footer {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 18px;
    }
    .footer-copy { text-align: center; justify-self: center; }
    .footer-email { justify-self: center; }
  }

  @media (max-width: 620px) {
    .panel-cabecera { flex-direction: column; padding: 40px 26px 30px; }
    .panel-cabecera h2 { font-size: 30px; }
    .panel-cabecera li { white-space: normal; }
    .panel-cuerpo { padding: 0 26px 36px; }
    .campo-fila { grid-template-columns: 1fr; gap: 0; }
    .carrito-txt { display: none; }
  }

  /* Variante con la foto a la izquierda (Our Cocoa) */
  .pagina-cols.foto-izquierda {
    grid-template-columns: 517fr 688fr;
  }

  .pagina-cols.foto-izquierda .pagina-foto { order: -1; }

  /* En el móvil esta variante también se apila.
     Va aquí y no arriba con el resto del móvil por un motivo: la regla
     de dos clases (.pagina-cols.foto-izquierda) pesa más que la de una
     sola (.pagina-cols), así que la de arriba no la tumbaba y la foto
     se quedaba en una tira estrecha con el texto espachurrado al lado. */
  @media (max-width: 900px) {
    .pagina-cols.foto-izquierda {
      grid-template-columns: 1fr;
      gap: 44px;
    }
  }

  /* Con textos largos la foto acompaña al desplazarse en vez de
     dejar un hueco vacío debajo */
  .pagina-foto.acompana {
    position: sticky;
    top: 140px;
  }

  /* ── PREMIOS ── */
  .premio { max-width: 1340px; }

  .premio + .premio {
    margin-top: 96px;
    padding-top: 90px;
    border-top: 1px solid rgba(26, 26, 26, 0.14);
  }

  .premio-titulo {
    font-family: var(--font-serif);
    font-size: clamp(28px, 2.4vw, 37px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--text-dark);
    margin-bottom: 10px;
  }

  .premio-meta {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: rgba(26, 26, 26, 0.55);
    margin-bottom: 40px;
  }

  /* Citas destacadas: rompen el texto largo y dan aire */
  .pagina-texto blockquote {
    margin: 40px 0;
    padding-left: 26px;
    border-left: 2px solid var(--orange);
    font-family: var(--font-serif);
    font-size: 21px;
    font-style: italic;
    line-height: 1.45;
    color: var(--text-dark);
  }

  .pagina-texto blockquote cite {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-style: normal;
    color: rgba(26, 26, 26, 0.6);
  }

  .pagina-texto blockquote + p { margin-top: 0; }

  .fuente {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid rgba(26, 26, 26, 0.12);
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: rgba(26, 26, 26, 0.55);
  }

  /* ── PROCESOS ── */
  /* Seis columnas, cada paso ocupa dos: así se ven tres por fila, pero
     queda media columna de margen para poder centrar la última fila */
  .procesos {
    list-style: none;
    counter-reset: paso;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 64px 40px;
    max-width: 1400px;
  }

  .proceso { counter-increment: paso; grid-column: span 2; }

  /* Los 8 pasos no llenan la última fila. Sin esto, los dos últimos se
     quedaban a la izquierda con un hueco vacío a la derecha. */
  .proceso:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }

  /* Y si algún día quedara uno solo suelto, al medio */
  .proceso:nth-child(3n+1):last-child { grid-column: 3 / span 2; }

  .proceso-titulo {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--font-serif);
    font-size: 27px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  /* El número del paso, para que se siga el recorrido del grano */
  .proceso-titulo::before {
    content: counter(paso, decimal-leading-zero);
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--orange);
    flex-shrink: 0;
  }

  .proceso-foto {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cream-oscuro);
    margin-bottom: 22px;
  }

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

  .proceso-foto .foto-pendiente { aspect-ratio: auto; height: 100%; }

  .proceso p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-dark);
  }

  .proceso p + p { margin-top: 18px; }

  /* ── GALERÍA ── */
  /* Mosaico a todo el ancho: se sale de los márgenes de la página y
     las fotos van pegadas, sin huecos */
  .galeria {
    margin: 96px 0 -90px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: none;
  }

  .galeria-titulo {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 34px;
  }

  .galeria-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .galeria-grid > * {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream-oscuro);
  }

  .galeria-grid img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .galeria-grid a:hover img { transform: scale(1.04); }
  .galeria-grid .foto-pendiente { aspect-ratio: auto; height: 100%; font-size: 13px; }
  .galeria-grid .foto-pendiente svg { width: 30px; height: 30px; }

  @media (max-width: 1100px) {
    /* Dos pasos por fila: los 8 la llenan justa, no hay nada que centrar */
    .procesos { grid-template-columns: repeat(4, 1fr); gap: 52px 32px; }
    .proceso:nth-child(3n+1):nth-last-child(2),
    .proceso:nth-child(3n+1):last-child { grid-column: span 2; }
    .galeria-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 700px) {
    .procesos { grid-template-columns: repeat(2, 1fr); }
    .galeria-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── CERTIFICADOS ── */
  .pagina-intro {
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-dark);
    max-width: 720px;
    margin: -26px 0 52px;
  }

  .certificados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 40px;
    max-width: 1400px;
  }

  .cert-titulo {
    font-family: var(--font-serif);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  /* Fondo blanco y sin recortar: los sellos oficiales no se deben
     deformar ni cortar */
  .cert-logo {
    background: var(--white);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    margin-bottom: 24px;
  }

  .cert-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .cert-logo .foto-pendiente {
    aspect-ratio: auto;
    width: 100%; height: 100%;
    background: none;
    border-color: rgba(44, 53, 86, 0.25);
  }

  .cert p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-dark);
  }

  .cert p + p { margin-top: 18px; }

  @media (max-width: 1100px) {
    .certificados { grid-template-columns: repeat(2, 1fr); gap: 46px 32px; }
  }

  @media (max-width: 700px) {
    .certificados { grid-template-columns: 1fr; }
  }

  /* ── UBICACIÓN ── */
  /* La página de Ubicación no lleva margen abajo: el mapa llega hasta el
     pie, y es la columna de datos la que pone su propio respiro */
  .pagina.ubicacion { padding-bottom: 0; }

  .ubicacion-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;   /* el mapa se estira a toda la altura */
  }

  .ubicacion-info { padding-bottom: 80px; }
  .ubicacion-info .pagina-titulo { margin-bottom: 34px; }

  .ubicacion-lead {
    font-family: var(--font-serif);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: 18px;
  }

  .ubicacion-info p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-dark);
    max-width: 460px;
  }

  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 40px;
    padding: 16px 30px;
    background: var(--white);
    color: var(--text-dark);
    border: 1.5px solid rgba(26, 26, 26, 0.18);
    border-radius: 50px;
    font-family: var(--font-serif);
    font-size: 17px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
  }

  .btn-whatsapp:hover { background: var(--cream-claro); border-color: rgba(26,26,26,0.4); }
  .btn-whatsapp svg { width: 22px; height: 22px; color: #25D366; flex-shrink: 0; }

  .bloque-dato + .bloque-dato { margin-top: 30px; }

  .bloque-dato h2 {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 8px;
  }

  .bloque-dato p, .bloque-dato a {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(26, 26, 26, 0.78);
  }

  /* Datos que aún no tenemos: se marcan para que no pasen a producción
     con información inventada */
  .dato-pendiente {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(200, 116, 26, 0.1);
    border: 1px dashed rgba(200, 116, 26, 0.5);
    border-radius: 3px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: #8a5715;
  }

  /* El mapa llega al borde derecho de la ventana y va del título al pie */
  .ubicacion-mapa {
    margin-right: -60px;
    min-height: 560px;
    overflow: hidden;
    background: var(--cream-oscuro);
  }

  .ubicacion-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
  .ubicacion-mapa .foto-pendiente { aspect-ratio: auto; height: 100%; }


  @media (max-width: 900px) {
    .ubicacion-cols { grid-template-columns: 1fr; gap: 40px; }
    .ubicacion-mapa {
      margin-left: -22px;
      margin-right: -22px;
      min-height: 0;
      height: 420px;
    }
    .ubicacion-info { padding-bottom: 0; }
    .pagina.ubicacion { padding-bottom: 0; }
  }

  /* ── PANTALLA DE CARGA ──────────────────────────────────────────────
     Telón negro con el logo que se retira dibujando la misma curva del
     hero. La animación es CSS pura: aunque el JavaScript falle, el telón
     se quita solo y la web nunca queda tapada.                        */
  .carga {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    animation: carga-salir 1.75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  }

  /* Ya se vio en esta visita: no se vuelve a mostrar al cambiar de página */
  .sin-carga .carga { display: none; }

  /* ── La variante clara, para la tienda ──
     Telón blanco y solo la Ö, en vez del logotipo entero sobre negro.
     La tienda se abre con una foto a toda pantalla; entrar por un telón
     blanco y limpio le sienta mejor que por uno negro, que compite con
     la foto que hay detrás.

     La Ö es images/oko-marca.png: el dibujo original de la marca, con el
     fondo negro quitado y recortada a la letra. Se guarda al triple del
     tamaño con el que se ve, de modo que sale nítida también en pantallas
     de alta densidad, y con paleta corta pesa 5 KB. */
  .carga-clara {
    background: #ffffff;
    gap: 26px;
  }

  .carga-marca {
    /* Alta y estrecha: manda el alto, y el ancho se ajusta solo */
    height: clamp(120px, 21vh, 178px);
    width: auto;
    animation: carga-logo 0.9s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* El hilo de debajo, más corto: bajo una letra estrecha, el largo de
     siempre parecía un subrayado suelto */
  .carga-clara .carga-linea { width: min(86px, 22vw); }

  .carga-logo {
    width: min(340px, 62vw);
    height: auto;
    animation: carga-logo 0.85s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Hilo naranja que se dibuja bajo el logo */
  .carga-linea {
    width: min(200px, 40vw);
    height: 1px;
    background: var(--orange);
    transform-origin: center;
    animation: carga-linea 1s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  .carga-curva {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 92px;
  }

  @keyframes carga-logo {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes carga-linea {
    from { transform: scaleX(0); opacity: 0.4; }
    to   { transform: scaleX(1); opacity: 1; }
  }

  @keyframes carga-salir {
    0%, 58%  { transform: translateY(0); }
    99%      { visibility: visible; }
    100%     { transform: translateY(calc(-100% - 94px)); visibility: hidden; }
  }

  /* Quien pide menos movimiento no ve el telón: una pantalla de carga es
     movimiento y nada más */
  @media (prefers-reduced-motion: reduce) {
    .carga { display: none; }
  }

  /* ── BOTÓN DE MENÚ (solo en móvil) ── */
  .btn-menu {
    display: none;
    background: none;
    border: none;
    padding: 6px 2px;
    cursor: pointer;
    width: 26px;
    flex-direction: column;
    gap: 5px;
  }

  .btn-menu span {
    display: block;
    height: 1.5px;
    width: 22px;
    background: var(--white);
    transition: transform 0.28s ease, opacity 0.2s ease;
  }

  /* Las tres rayas se convierten en una X al abrir */
  .menu-abierto .btn-menu span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-abierto .btn-menu span:nth-child(2) { opacity: 0; }
  .menu-abierto .btn-menu span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ══════════════════════════════════════════════════════════════════
     MÓVIL
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 1080px) {
    body > nav {
      grid-template-columns: auto 1fr;
      padding: 18px 22px;
      gap: 12px;
    }

    .btn-menu { display: flex; }
    .nav-logo { font-size: 20px; }
    .nav-actions { gap: 16px; }
    .carrito-txt { display: none; }
    .icon-btn svg { width: 21px; height: 21px; }

    /* El menú pasa a ser un panel desplegable a pantalla completa */
    .nav-links {
      position: fixed;
      top: 0; left: 0; right: 0;
      padding: 84px 22px 34px;
      background: var(--dark);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      z-index: -1;
      transform: translateY(-100%);
      transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
      max-height: 100dvh;
      overflow-y: auto;
    }

    .menu-abierto .nav-links { transform: translateY(0); }

    .nav-links li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .nav-links li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

    .nav-links a {
      display: block;
      padding: 17px 2px;
      font-size: 20px;
    }

    .nav-links a.active { text-decoration: none; color: var(--orange); }

    /* Sin desplazamiento del fondo con el menú abierto */
    .menu-abierto { overflow: hidden; }

    /* ── HERO ── */
    .hero {
      min-height: 74vh;
      padding-top: 96px;
      padding-bottom: 40px;
    }
    .hero-logo-img { width: 78vw; max-width: 460px; }

    /* ── PRODUCTOS ── */
    .products { padding: 52px 22px 64px; }

    .products-header {
      flex-direction: column;
      align-items: stretch;
      gap: 22px;
      margin-bottom: 34px;
    }

    .products-title { font-size: 32px; }

    .btn-adquirir {
      min-width: 0;
      width: 100%;
      padding: 15px 24px;
    }

    .products-grid { grid-template-columns: 1fr; gap: 40px; }

    .product-actions { flex-wrap: wrap; }
    .add-btn { flex: 1 1 auto; min-width: 150px; padding: 13px 20px; font-size: 15px; }

    /* ── SECCIÓN OSCURA DE LA PORTADA ── */
    .historia {
      flex-direction: column;
      padding: 60px 22px;
      gap: 34px;
    }
    .historia-img { width: 100%; max-width: none; }
    .historia-placeholder { height: auto; aspect-ratio: 4 / 3; }
    .historia-content h2 { font-size: 40px; margin-bottom: 18px; }
    .historia-content p { font-size: 16px; margin-bottom: 28px; }

    /* ── REDES ── */
    .social { padding: 56px 22px; }
    .social h2 { font-size: 32px; margin-bottom: 28px; }
    .social-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; }

    /* ── CONTACTO ── */
    /* Más aire por arriba: la sección es negra y la barra de navegación
       también, así que sin ese hueco "Get in touch" parecía pegado a la
       barra y las dos cosas se leían como un solo bloque */
    /* align-items pasa a stretch a propósito. En el ordenador la sección
       es una fila y flex-start alinea las dos columnas por arriba, que es
       lo que se quiere. Al pasar a columna, ese mismo flex-start deja de
       alinear por arriba y pasa a encoger a lo ancho: el formulario se
       quedaba en 219 de los 346 puntos disponibles, con los campos a dos
       tercios de la pantalla. */
    .contact {
      flex-direction: column;
      align-items: stretch;
      padding: 96px 22px 64px;
      gap: 30px;
    }
    .contact-left { flex: 1 1 auto; }
    .contact-left h2 { font-size: 34px; }
    .form-row { grid-template-columns: 1fr; gap: 24px; }

    /* ── PÁGINAS INTERIORES ── */
    .pagina { padding: 118px 22px 64px; margin-top: 0; min-height: 0; }
    .pagina-titulo { font-size: 38px; margin-bottom: 28px; }
    .pagina-intro { font-size: 17px; margin: -10px 0 34px; }
    .pagina-texto p + p { margin-top: 26px; }

    /* ── PREMIOS ── */
    .premio + .premio { margin-top: 54px; padding-top: 48px; }
    .premio-titulo { font-size: 26px; }
    .premio-meta { margin-bottom: 26px; }
    .pagina-texto blockquote { font-size: 18px; margin: 28px 0; padding-left: 18px; }

    /* ── PROCESOS ── */
    .procesos { gap: 44px; }
    .galeria { margin-top: 60px; margin-bottom: -64px; }
    .galeria-grid { grid-template-columns: repeat(2, 1fr); }

    /* La foto deja de acompañar al desplazarse: en móvil va apilada */
    .pagina-foto.acompana { position: static; }

    /* ── UBICACIÓN ── */
    .ubicacion-lead { font-size: 22px; }
  }

  @media (max-width: 420px) {
    .nav-logo { font-size: 18px; }
    .nav-actions { gap: 13px; }
    .hero-logo-img { width: 82vw; }
    .products-title, .pagina-titulo { font-size: 32px; }
    .historia-content h2, .social h2, .contact-left h2 { font-size: 32px; }
  }

  /* ── TIENDA POR SECCIONES ── */
  /* Al llegar desde el buscador, el título quedaba tapado por la barra
     fija de arriba. Este margen lo deja por debajo de ella. */
  .tienda-seccion { scroll-margin-top: 128px; }

  /* Lo mismo para el resto de destinos a los que se puede llegar con un
     enlace que salta dentro de la página. La barra de arriba va fija y
     flota sobre el contenido: sin este margen, el título al que saltas
     aparece justo debajo de ella, o directamente tapado. */
  #contacto,
  #shop,
  #inicio,
  .cuenta-seccion { scroll-margin-top: 120px; }

  .tienda-seccion + .tienda-seccion {
    margin-top: 80px;
    padding-top: 66px;
    border-top: 1px solid rgba(26, 26, 26, 0.13);
  }

  .tienda-titulo {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 34px;
  }

  a.product-card {
    text-decoration: none;
    display: block;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  a.product-card:hover { transform: translateY(-4px); }
  a.product-card .product-img-wrap { transition: box-shadow 0.28s ease; }
  a.product-card:hover .product-img-wrap {
    box-shadow: 0 12px 30px rgba(26, 26, 26, 0.14);
  }

  /* ── FICHA DE PRODUCTO ── */
  .producto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: calc(100vh - 100px);
    padding-top: 100px;   /* deja pasar la barra fija */
    background: var(--cream);
  }

  .prod-galeria {
    background: var(--cream-claro);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    /* La foto ya no va de borde a borde: se centra en el panel con aire
       alrededor. Ocupando toda la mitad de la pantalla parecía un
       cartel, no un producto. */
    padding: 48px;
  }

  .prod-galeria img {
    width: 100%;
    max-width: 440px;
    /* Sin esto la foto se quedaba con los 1254 px de alto del atributo
       height del HTML, que gana a la proporción de aquí abajo. Era la
       verdadera razón de que saliera tan larga. */
    height: auto;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  .prod-info { padding: 46px 60px 80px; }

  .miga {
    font-family: var(--font-serif);
    font-size: 16px;
    color: rgba(26, 26, 26, 0.62);
    margin-bottom: 22px;
  }

  .miga a { color: inherit; text-decoration: none; }
  .miga a:hover { text-decoration: underline; }
  .miga span { margin: 0 8px; }

  .prod-titulo {
    font-family: var(--font-serif);
    font-size: clamp(34px, 3.4vw, 52px);
    font-weight: 500;
    line-height: 1.08;
    color: var(--text-dark);
    margin-bottom: 18px;
  }

  .prod-precio {
    font-family: var(--font-serif);
    font-size: 21px;
    color: var(--text-dark);
    margin-bottom: 34px;
  }

  .prod-comprar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    max-width: 500px;
  }

  .prod-comprar .qty-control { flex-shrink: 0; }
  .prod-comprar .add-btn { padding: 15px 30px; font-size: 16px; }

  .prod-resumen {
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-dark);
    max-width: 460px;
    margin-bottom: 36px;
  }

  /* Ficha técnica */
  .prod-ficha {
    border-top: 1px solid rgba(26, 26, 26, 0.14);
    max-width: 500px;
  }

  .ficha-fila {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    font-family: var(--font-serif);
    font-size: 16px;
  }

  .ficha-fila dt { color: rgba(26, 26, 26, 0.58); }
  .ficha-fila dd { color: var(--text-dark); }

  .prod-nota {
    margin-top: 30px;
    max-width: 460px;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.55;
    color: rgba(26, 26, 26, 0.62);
  }

  .prod-nota a { color: var(--navy); }

  @media (max-width: 1080px) {
    .producto {
      grid-template-columns: 1fr;
      padding-top: 65px;
      min-height: 0;
    }
    .prod-galeria { padding: 28px 22px; gap: 14px; }
    .prod-galeria img { max-width: 340px; }
    .prod-info { padding: 30px 22px 60px; }
    .prod-titulo { font-size: 32px; }
    .prod-resumen { font-size: 17px; }
    .prod-comprar { flex-wrap: wrap; }
    .prod-comprar .add-btn { flex: 1 1 auto; min-width: 160px; }
    .ficha-fila { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
    .tienda-seccion + .tienda-seccion { margin-top: 54px; padding-top: 44px; }
  }

  .enlace-ruta { margin-top: 10px; }

  .enlace-ruta a {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--navy);
    text-underline-offset: 3px;
  }

  /* Enlace de rescate sobre el mapa: si el marco no cargara, sigue
     habiendo una forma de llegar */
  .ubicacion-mapa { position: relative; }

  .mapa-abrir {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    background: var(--white);
    color: var(--text-dark);
    font-family: var(--font-serif);
    font-size: 15px;
    padding: 9px 16px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  }

  .mapa-abrir:hover { background: #f2f2f0; }

  /* ── CARRITO ── */
  .carrito-btn { position: relative; }

  .carrito-num {
    position: absolute;
    top: -3px; right: -9px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 50px;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carrito-num[hidden] { display: none; }

  .panel-carrito {
    position: fixed;
    top: 0; right: 0;
    width: 480px;
    max-width: 100%;
    height: 100dvh;
    background: #0b0b0b;
    color: var(--white);
    z-index: 210;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .panel-carrito[hidden] { display: none; }
  .panel-carrito.visible { transform: translateX(0); }

  .carrito-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34px 34px 24px;
    flex-shrink: 0;
  }

  .carrito-cabecera h2 {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 500;
  }

  .carrito-cerrar {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 6px;
    display: flex;
  }

  .carrito-cerrar svg { width: 22px; height: 22px; }

  .carrito-lista {
    flex: 1;
    overflow-y: auto;
    padding: 0 34px;
  }

  .carrito-linea {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .carrito-linea img {
    width: 96px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #1a1a1a;
  }

  .carrito-nombre {
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--white);
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
  }

  .carrito-nombre:hover { color: var(--orange); }

  .carrito-precio {
    font-family: var(--font-serif);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 18px;
  }

  .carrito-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .carrito-cant {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 15px;
  }

  .carrito-cant button {
    background: none;
    border: none;
    color: var(--white);
    width: 28px; height: 28px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s;
  }

  .carrito-cant button:hover { background: rgba(255, 255, 255, 0.12); }
  .carrito-cant span { min-width: 24px; text-align: center; }

  .carrito-quitar {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-sans);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 4px;
  }

  .carrito-quitar:hover { color: var(--white); }

  .carrito-vacio {
    padding: 20px 34px 34px;
    font-family: var(--font-serif);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
  }

  .carrito-vacio[hidden] { display: none; }

  .carrito-pie {
    flex-shrink: 0;
    padding: 26px 34px 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .carrito-pie[hidden] { display: none; }

  .carrito-suma {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-serif);
    font-size: 19px;
    margin-bottom: 22px;
  }

  .btn-pedido {
    display: block;
    width: 100%;
    padding: 18px;
    background: var(--white);
    color: #0b0b0b;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
  }

  .btn-pedido:hover { background: #e4e4e2; }

  .carrito-nota {
    margin-top: 16px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
  }

  @media (max-width: 520px) {
    .carrito-cabecera { padding: 24px 22px 18px; }
    .carrito-cabecera h2 { font-size: 25px; }
    .carrito-lista { padding: 0 22px; }
    .carrito-pie, .carrito-vacio { padding-left: 22px; padding-right: 22px; }
    .carrito-linea { grid-template-columns: 76px 1fr; gap: 15px; }
    .carrito-linea img { width: 76px; }
  }


  /* ══════════════════════════════════════════════════════════════════
     ANIMACIONES
     ──────────────────────────────────────────────────────────────────
     Todo cuelga de la clase .anim-on, que el propio JavaScript pone en
     <html> nada más abrir la página. Si el JavaScript no llegara a
     cargar, no se oculta ni se mueve nada: la web se ve entera y quieta.

     Al final del bloque, quien tenga activado "reducir movimiento" en su
     ordenador o teléfono lo ve todo sin una sola animación.
     ══════════════════════════════════════════════════════════════════ */

  /* ── 1. Las secciones aparecen al bajar ── */
  .anim-on .anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0s);
  }

  .anim-on .anim.visto { opacity: 1; transform: none; }

  /* La foto que acompaña al desplazarse ya lleva su propia posición
     pegajosa: si además la movemos, las dos cosas se pelean */
  .anim-on .pagina-foto.acompana { transform: none !important; }


  /* ── 2. La barra de navegación se encoge al bajar ── */
  body > nav {
    transition: padding 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.34s ease;
  }

  .nav-logo { transition: font-size 0.34s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s; }

  .nav-compacta body > nav { padding-top: 16px; padding-bottom: 16px; }
  .nav-compacta .nav-logo { font-size: 19px; }

  @media (max-width: 1080px) {
    .nav-compacta body > nav { padding-top: 12px; padding-bottom: 12px; }
    .nav-compacta .nav-logo { font-size: 18px; }
  }


  /* ── 3. El carrito avisa: la foto vuela y el contador rebota ── */
  .foto-vuela {
    position: fixed;
    z-index: 300;
    border-radius: 4px;
    object-fit: cover;
    pointer-events: none;
    transform-origin: center;
    transition: transform 0.62s cubic-bezier(0.55, 0, 0.35, 1),
                opacity 0.62s cubic-bezier(0.55, 0, 0.35, 1);
  }

  @keyframes carrito-rebote {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.6); }
    70%  { transform: scale(0.92); }
    100% { transform: scale(1); }
  }

  .carrito-num.rebote { animation: carrito-rebote 0.5s cubic-bezier(0.22, 1, 0.36, 1); }


  /* ── 4. Tarjetas de producto: subrayado y segunda foto ── */
  .anim-on a.product-card .product-name {
    display: inline-block;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .anim-on a.product-card:hover .product-name { background-size: 100% 1px; }

  /* Los productos con una segunda foto la enseñan al pasar el ratón */
  .product-img-wrap { position: relative; }

  .foto-alterna {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  a.product-card:hover .foto-alterna { opacity: 1; }


  /* ── 5. Zoom lento en las fotos grandes ── */
  @keyframes zoom-lento {
    from { transform: scale(1); }
    to   { transform: scale(1.085); }
  }

  /* El zoom se sale del marco si no se recorta */
  .anim-on .pagina-foto { overflow: hidden; }

  .anim-on .historia-img img,
  .anim-on .pagina-foto img {
    animation: zoom-lento 28s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
  }


  /* ── 6. Profundidad: la foto se mueve más despacio que el texto ──
     El desplazamiento lo calcula el JavaScript y lo deja en --par.
     Aquí solo se anula la transición de la entrada, que si no lo
     arrastraría con retraso.                                        */
  .anim-on .paralaje {
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }


  /* ── 7. La galería de Our Process se desplaza sola ── */
  .galeria-cintas { display: flex; flex-direction: column; overflow: hidden; }

  .galeria-cinta {
    display: flex;
    width: max-content;
    animation: cinta var(--dur, 64s) linear infinite;
  }

  .galeria-cinta.al-reves { animation-direction: reverse; }

  .galeria-cinta > * {
    flex: 0 0 auto;
    width: 25vw;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream-oscuro);
  }

  .galeria-cinta img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .galeria-cinta a:hover img { transform: scale(1.04); }

  /* Se para al pasar el ratón, para poder mirar una foto */
  .galeria-cintas:hover .galeria-cinta { animation-play-state: paused; }

  @keyframes cinta { to { transform: translateX(-50%); } }

  @media (max-width: 1100px) { .galeria-cinta > * { width: 33.333vw; } }
  @media (max-width: 700px)  { .galeria-cinta > * { width: 50vw; } }


  /* ── 8. Los números de los procesos se cuentan solos ── */
  .anim-on .procesos.con-numeros .proceso-titulo::before { content: none; }

  .proceso-num {
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--orange);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }


  /* ── 9. El subrayado del menú se desliza ── */
  /* Solo en pantalla grande, y ojo con el porqué: en móvil .nav-links es
     el panel desplegable, que va "fixed" para salirse del flujo. Esta
     regla, sin encerrar, le ganaba por especificidad y lo devolvía al
     flujo: la barra pasaba de 65 a 660 px de alto y, aunque el panel se
     ve fuera de pantalla, su caja se tragaba los toques de casi toda la
     pantalla. El subrayado deslizante no existe en móvil, así que aquí
     no hace ninguna falta. */
  @media (min-width: 1081px) {
    .anim-on .nav-links { position: relative; }
  }

  .nav-marca {
    position: absolute;
    left: 0;
    bottom: -7px;
    height: 1px;
    width: 1px;
    background: var(--white);
    pointer-events: none;
    opacity: 0;
    transform-origin: 0 50%;
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.25s ease;
  }

  /* La vuelta a la sección en la que se está va más despacio que el ir
     de una a otra: al salir del menú, volver al mismo ritmo se sentía
     como un tirón */
  .nav-marca.volviendo { transition-duration: 0.85s, 0.25s; }

  .anim-on .nav-links.con-marca a.active { text-decoration: none; }

  /* En móvil el menú es un panel vertical: ahí el subrayado no aplica */
  @media (max-width: 1080px) { .nav-marca { display: none; } }


  /* ── 10. Los botones se llenan con una ola que sube ──
     Antes el relleno subía en línea recta. Ahora sube una elipse muy
     ancha, así que el borde que avanza es una curva: entra por el
     centro y termina de cerrar por los lados. Es el mismo gesto que
     hace una ola al subir por la arena.

     La elipse mide el doble de ancha que el botón y el triple de alta,
     y todo va en porcentaje, de modo que la curva se ve igual de suave
     en un botón pequeño que en uno que ocupa toda la columna.         */
  .anim-on .btn-adquirir,
  .anim-on .add-btn,
  .anim-on .btn-outline,
  .anim-on .btn-social,
  .anim-on .btn-send,
  .anim-on .btn-negro,
  .anim-on .btn-pedido,
  .anim-on .btn-whatsapp,
  .anim-on .cuenta-salir {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Al retirar el ratón el texto vuelve a su color enseguida. La
       espera solo hace falta al entrar, y va en la regla de :hover. */
    transition: color 0.14s ease;
  }

  .anim-on .btn-adquirir::before,
  .anim-on .add-btn::before,
  .anim-on .btn-outline::before,
  .anim-on .btn-social::before,
  .anim-on .btn-send::before,
  .anim-on .btn-negro::before,
  .anim-on .btn-pedido::before,
  .anim-on .btn-whatsapp::before,
  .anim-on .cuenta-salir::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 0;
    width: 200%;
    height: 170%;
    border-radius: 50%;
    background: var(--relleno);
    /* Empieza justo por debajo del botón, fuera de la vista */
    transform: translate(-50%, 100%);
    /* Una curva pareja de principio a fin. Con la de siempre —la que
       arranca disparada y frena al final— la ola llegaba arriba en dos
       décimas y no daba tiempo a verla subir. */
    transition: transform 0.45s cubic-bezier(0.45, 0.05, 0.25, 1);
  }

  /* Al pasar el ratón la elipse sube hasta quedar centrada, y en ese
     punto cubre el botón entero, esquinas incluidas */
  .anim-on .btn-adquirir:hover::before,
  .anim-on .add-btn:hover::before,
  .anim-on .btn-outline:hover::before,
  .anim-on .btn-social:hover::before,
  .anim-on .btn-send:hover::before,
  .anim-on .btn-negro:hover::before,
  .anim-on .btn-pedido:hover::before,
  .anim-on .btn-whatsapp:hover::before,
  .anim-on .cuenta-salir:hover::before { transform: translate(-50%, 20%); }

  /* ── El color de la ola ──
     En los botones oscuros la ola es blanca, que es el efecto de la
     referencia. Los que ya son blancos la llevan oscura: una ola blanca
     sobre un botón blanco no se vería, y un botón que no responde al
     ratón parece estropeado. */
  .anim-on .add-btn      { --relleno: var(--white); }
  .anim-on .btn-social   { --relleno: var(--white); }
  .anim-on .btn-negro    { --relleno: var(--white); }
  .anim-on .btn-adquirir { --relleno: var(--white); }

  .anim-on .btn-outline  { --relleno: var(--navy); }
  .anim-on .btn-send     { --relleno: var(--navy); }
  .anim-on .btn-pedido   { --relleno: #0b0b0b; }
  .anim-on .btn-whatsapp { --relleno: var(--navy); }
  .anim-on .cuenta-salir { --relleno: var(--navy); }

  /* ── El texto, al revés que la ola ──
     El cambio de color espera a que la ola le haya pasado por encima.
     Si no, la palabra se queda del color del relleno sobre el fondo
     antiguo y desaparece medio segundo.

     También se anula el cambio de fondo instantáneo que tenían antes:
     ahora quien pinta el fondo es la ola, no el botón. */
  .anim-on .btn-adquirir:hover,
  .anim-on .add-btn:hover,
  .anim-on .btn-outline:hover,
  .anim-on .btn-social:hover,
  .anim-on .btn-send:hover,
  .anim-on .btn-negro:hover,
  .anim-on .btn-pedido:hover,
  .anim-on .btn-whatsapp:hover,
  .anim-on .cuenta-salir:hover {
    transition: color 0.14s ease 0.26s, background 0.2s,
                border-color 0.2s, transform 0.12s ease;
  }

  .anim-on .add-btn:hover {
    background: var(--navy); color: var(--navy); border-color: var(--navy);
  }
  .anim-on .btn-social:hover {
    background: var(--navy); color: var(--navy); border-color: var(--navy);
  }
  .anim-on .btn-negro:hover {
    background: #111; color: #111; border-color: #111;
  }
  .anim-on .btn-adquirir:hover { background: transparent;  color: var(--navy); }

  .anim-on .btn-outline:hover  { background: var(--white); color: var(--white); }
  .anim-on .btn-send:hover     { background: var(--white); color: var(--white); }
  .anim-on .btn-pedido:hover   { background: var(--white); color: var(--white); }
  .anim-on .btn-whatsapp:hover {
    background: var(--white);
    color: var(--white);
    border-color: var(--navy);
  }
  .anim-on .cuenta-salir:hover {
    background: none;
    color: var(--white);
    border-color: var(--navy);
  }


  /* ── 11. Cambio suave al pasar de una página a otra ── */
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation-duration: 0.26s; }
  ::view-transition-new(root) { animation-duration: 0.26s; }


  /* ── En pantallas pequeñas, menos movimiento ──
     Es donde más se nota si algo va a tirones, así que las entradas
     son más cortas y el zoom lento se apaga. */
  @media (max-width: 1080px) {
    .anim-on .anim { transform: translateY(16px); transition-duration: 0.55s; }
    .anim-on .historia-img img,
    .anim-on .pagina-foto img { animation: none; }
  }


  /* ── Quien pide menos movimiento no ve ninguna animación ── */
  @media (prefers-reduced-motion: reduce) {
    .anim-on .anim {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .anim-on .historia-img img,
    .anim-on .pagina-foto img,
    .galeria-cinta { animation: none !important; }
    .anim-on .paralaje { transform: none !important; }
    /* La ola de los botones deja de subir: aparece de golpe. Quien pide
       menos movimiento sigue viendo que el botón responde, pero sin que
       nada se desplace por la pantalla. */
    .anim-on .btn-adquirir::before,
    .anim-on .add-btn::before,
    .anim-on .btn-outline::before,
    .anim-on .btn-social::before,
    .anim-on .btn-send::before,
    .anim-on .btn-negro::before,
    .anim-on .btn-pedido::before,
    .anim-on .btn-whatsapp::before,
    .anim-on .cuenta-salir::before { transition: none !important; }
    .nav-marca { display: none; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
  }


  /* ══════════════════════════════════════════════════════════════════
     BUSCADOR
     Panel lateral, igual mecánica que el del carrito y el de la cuenta.
     ══════════════════════════════════════════════════════════════════ */
  .panel-buscar {
    position: fixed;
    top: 0; right: 0;
    width: 520px;
    max-width: 100%;
    height: 100dvh;
    background: #0b0b0b;
    color: var(--white);
    z-index: 210;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .panel-buscar[hidden] { display: none; }
  .panel-buscar.visible { transform: translateX(0); }

  /* ── Campo de búsqueda ── */
  .buscar-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 30px 30px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
  }

  .buscar-lupa {
    width: 22px; height: 22px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
  }

  .buscar-cabecera input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 21px;
    padding: 4px 0;
  }

  .buscar-cabecera input:focus { outline: none; }
  .buscar-cabecera input::placeholder { color: rgba(255, 255, 255, 0.42); }
  /* La cruz que Chrome mete en los campos de búsqueda no encaja aquí */
  .buscar-cabecera input::-webkit-search-cancel-button { display: none; }

  .buscar-cerrar {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 6px;
    display: flex;
    flex-shrink: 0;
  }

  .buscar-cerrar svg { width: 22px; height: 22px; }

  /* ── Resultados ── */
  .buscar-cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: 8px 30px 34px;
  }

  .buscar-titulo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 30px 0 14px;
  }

  .buscar-cuantos {
    font-size: 13px;
    letter-spacing: 0;
    color: var(--orange);
  }

  .buscar-lista { list-style: none; }

  .buscar-lista a {
    display: block;
    padding: 11px 0;
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.2s, padding-left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .buscar-lista a:hover { color: var(--orange); padding-left: 8px; }

  .buscar-rejilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }

  .buscar-prod {
    display: block;
    text-decoration: none;
    color: var(--white);
  }

  .buscar-prod img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #1a1a1a;
    display: block;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .buscar-prod:hover img { transform: scale(1.04); }

  /* El recorte va en un marco aparte: si fuera en el enlace, el nombre
     de debajo también se recortaría al agrandar la foto */
  .buscar-prod { overflow: hidden; }

  .buscar-prod-nombre {
    display: block;
    font-family: var(--font-serif);
    font-size: 18px;
    margin-top: 12px;
    line-height: 1.25;
  }

  .buscar-prod:hover .buscar-prod-nombre { color: var(--orange); }

  .buscar-prod-precio {
    display: block;
    font-family: var(--font-serif);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
  }

  .buscar-aviso {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 26px;
  }

  .buscar-aviso a { color: var(--orange); }
  .buscar-aviso strong { color: var(--white); }

  @media (max-width: 520px) {
    .buscar-cabecera { padding: 24px 20px 18px; }
    .buscar-cabecera input { font-size: 19px; }
    .buscar-cuerpo { padding: 8px 20px 30px; }
    .buscar-rejilla { gap: 20px 14px; }
    .buscar-prod-nombre { font-size: 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .panel-buscar { transition: none; }
    .buscar-prod img, .buscar-lista a { transition: none; }
  }


  /* ══════════════════════════════════════════════════════════════════
     CUENTA
     ══════════════════════════════════════════════════════════════════ */

  /* ── Mensajes del panel de acceso ── */
  .panel-mensaje {
    display: none;
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.55;
    padding: 14px 16px;
    margin-bottom: 22px;
    border-left: 3px solid var(--orange);
    background: #fdf6ee;
    color: #4a3a28;
  }

  .panel-mensaje.visible { display: block; }
  .panel-mensaje.error { border-left-color: #b3261e; background: #fdeceb; color: #5c1d19; }
  .panel-mensaje.bien  { border-left-color: #2e6b40; background: #eef6f0; color: #1e4a2b; }

  /* El "Forgot Password?" es un botón, pero debe verse como el enlace
     que era antes */
  button.olvidada {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  button.olvidada:disabled { opacity: 0.55; cursor: default; }

  /* ── Menú de la cuenta cuando hay sesión ── */
  .menu-saludo {
    font-family: var(--font-sans);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 32px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    word-break: break-word;
  }

  .menu-cuenta a {
    display: block;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
    padding: 14px 32px;
    transition: background 0.15s;
  }

  .menu-cuenta a:hover { background: rgba(255, 255, 255, 0.07); }
  .menu-cuenta [hidden] { display: none; }

  /* ── Página de la cuenta ── */
  .cuenta-espera, .cuenta-vacio, .cuenta-cargando {
    font-family: var(--font-serif);
    font-size: 19px;
    color: rgba(26, 26, 26, 0.6);
  }

  .cuenta-vacio a { color: var(--orange); }

  .cuenta-aviso {
    max-width: 640px;
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.55;
  }

  .cuenta-aviso p + p { margin-top: 16px; }
  .cuenta-aviso a { color: var(--orange); }

  .cuenta-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
  }

  .btn-adquirir.chico {
    min-width: 0;
    padding: 11px 26px;
    font-size: 15px;
  }

  .cuenta-dentro {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: start;
    max-width: 1340px;
  }

  /* ── Menú lateral ── */
  .cuenta-menu { position: sticky; top: 128px; }

  .cuenta-quien {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.45;
    color: rgba(26, 26, 26, 0.62);
    padding-bottom: 20px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.15);
    word-break: break-word;
  }

  .cuenta-quien strong { color: var(--text-dark); font-weight: 500; font-size: 20px; }

  .cuenta-nav { display: flex; flex-direction: column; }

  .cuenta-nav button {
    background: none;
    border: none;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    text-align: left;
    padding: 15px 2px;
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--text-dark);
    cursor: pointer;
    transition: color 0.2s, padding-left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cuenta-nav button:hover { padding-left: 8px; }
  .cuenta-nav button.activa { color: var(--orange); }

  .cuenta-salir {
    margin-top: 26px;
    background: none;
    border: 1.5px solid rgba(26, 26, 26, 0.35);
    border-radius: 50px;
    padding: 11px 28px;
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }

  .cuenta-salir:hover { background: var(--cream-oscuro); border-color: rgba(26,26,26,0.55); }

  /* ── Contenido ── */
  .cuenta-titulo {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 28px;
  }

  .cuenta-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }

  .cuenta-cabecera .cuenta-titulo { margin-bottom: 28px; }

  /* ── Un pedido ── */
  .pedido {
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 4px;
    padding: 24px 26px;
    background: var(--cream-claro);
  }

  .pedido + .pedido { margin-top: 18px; }

  .pedido-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.12);
  }

  .pedido-numero {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--text-dark);
    margin-right: 14px;
  }

  .pedido-fecha {
    font-family: var(--font-serif);
    font-size: 16px;
    color: rgba(26, 26, 26, 0.55);
  }

  .pedido-estado {
    font-family: var(--font-sans);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(26, 26, 26, 0.08);
    color: rgba(26, 26, 26, 0.7);
    white-space: nowrap;
  }

  .estado-pending   { background: #f6ecdd; color: #7a5320; }
  .estado-confirmed { background: #e7f0e9; color: #1e4a2b; }
  .estado-shipped   { background: #e5ecf5; color: var(--navy); }
  .estado-cancelled { background: #f3e4e3; color: #7a2a24; }

  .pedido-articulos { list-style: none; padding: 16px 0; }

  .pedido-articulos li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-serif);
    font-size: 17px;
    padding: 5px 0;
  }

  .pedido-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(26, 26, 26, 0.12);
    font-family: var(--font-serif);
    font-size: 20px;
  }

  /* ── Una dirección ── */
  .direccion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 4px;
    padding: 22px 24px;
    background: var(--cream-claro);
  }

  .direccion + .direccion { margin-top: 16px; }
  .direccion.es-predeterminada { border-color: var(--orange); }

  .direccion-texto {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.5;
  }

  .direccion-texto strong { display: block; font-weight: 500; }

  .direccion-etiqueta {
    display: block;
    font-family: var(--font-sans);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.5);
    margin-bottom: 8px;
  }

  .direccion-etiqueta em {
    font-style: normal;
    color: var(--orange);
    margin-left: 8px;
  }

  .direccion-notas {
    display: block;
    margin-top: 8px;
    font-style: italic;
    color: rgba(26, 26, 26, 0.6);
    font-size: 16px;
  }

  .direccion-acciones { display: flex; flex-wrap: wrap; gap: 16px; }

  .direccion-acciones button {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--navy);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
  }

  .direccion-acciones button:hover { color: var(--orange); }
  .direccion-acciones button.borrar { color: #8a2a22; }
  .direccion-acciones button:disabled { opacity: 0.5; cursor: default; }

  /* ── Formularios ── */
  .direccion-form, .datos-form {
    max-width: 620px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid rgba(26, 26, 26, 0.15);
  }

  .direccion-form h3, .datos-form h3 {
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 22px;
  }

  /* Los campos con etiqueta flotante son los mismos del panel de acceso,
     pero allí van sobre blanco y aquí sobre el gris de la página */
  .cuenta .campo input { background: var(--cream-claro); }

  .cuenta-dato-fijo {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.5;
    margin: 6px 0 22px;
  }

  .cuenta-dato-fijo span {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: rgba(26, 26, 26, 0.55);
  }

  .datos-form .btn-negro { width: auto; padding: 0 40px; }

  .cuenta-mensaje {
    display: none;
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.55;
    padding: 12px 15px;
    margin-bottom: 18px;
    border-left: 3px solid var(--orange);
    background: #fdf6ee;
    color: #4a3a28;
  }

  .cuenta-mensaje.visible { display: block; }
  .cuenta-mensaje.error { border-left-color: #b3261e; background: #fdeceb; color: #5c1d19; }
  .cuenta-mensaje.bien  { border-left-color: #2e6b40; background: #eef6f0; color: #1e4a2b; }

  @media (max-width: 900px) {
    .cuenta-dentro { grid-template-columns: 1fr; gap: 40px; }
    .cuenta-menu { position: static; }
    .cuenta-nav { flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
    .cuenta-nav button { border-bottom: none; padding: 10px 0; }
    .cuenta-nav button:hover { padding-left: 0; }
    .cuenta-nav button.activa { text-decoration: underline; text-underline-offset: 6px; }
    .pedido-articulos li { font-size: 16px; }
  }


  /* ── Pie del diálogo del código ── */

  .codigo-pie {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
  }

  .codigo-pie button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 15px;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .codigo-pie button:hover { color: var(--orange); }
  .codigo-pie button:disabled { opacity: 0.55; cursor: default; }


  /* ══════════════════════════════════════════════════════════════════
     DIÁLOGO DEL CÓDIGO
     Centrado, no en el lateral: escribir seis cifras es el único asunto
     de ese momento y merece el medio de la pantalla.
     ══════════════════════════════════════════════════════════════════ */
  .dialogo-codigo {
    position: fixed;
    top: 50%; left: 50%;
    width: 480px;
    max-width: calc(100% - 32px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    z-index: 220;
    background: var(--white);
    padding: 48px 46px 40px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.24s ease;
  }

  .dialogo-codigo[hidden] { display: none; }
  .dialogo-codigo.visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }

  .dialogo-cerrar {
    position: absolute;
    top: 16px; right: 16px;
    background: none;
    border: none;
    color: rgba(26, 26, 26, 0.45);
    cursor: pointer;
    padding: 8px;
    display: flex;
    transition: color 0.2s;
  }

  .dialogo-cerrar:hover { color: var(--text-dark); }
  .dialogo-cerrar svg { width: 20px; height: 20px; }

  /* El ancho y el alto van también en el HTML: así el diálogo no da un
     salto cuando la imagen termina de cargar */
  .dialogo-logo {
    display: block;
    width: 180px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 24px;
  }

  .dialogo-titulo {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .dialogo-intro {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 30px;
  }

  .dialogo-intro strong { color: #111; word-break: break-word; }

  /* ── Las seis casillas ── */
  .codigo-cajas {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px;
  }

  /* Se reparten el ancho que haya. Con medida fija, en un móvil de 360
     px las seis se salían de la tarjeta. */
  .codigo-cajas input {
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    height: 66px;
    padding: 0;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 500;
    color: var(--text-dark);
    background: var(--cream-claro);
    border: 1.5px solid transparent;
    border-radius: 3px;
    transition: border-color 0.18s, background 0.18s;
    /* Las flechitas del campo numérico no pintan nada con una sola cifra */
    -moz-appearance: textfield;
  }

  .codigo-cajas input::-webkit-outer-spin-button,
  .codigo-cajas input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .codigo-cajas input:focus {
    outline: none;
    border-color: var(--orange);
    background: var(--white);
  }

  /* Código rechazado: se marcan en rojo un momento antes de vaciarse */
  .codigo-cajas input.mal {
    border-color: #b3261e;
    background: #fdeceb;
  }

  .dialogo-campo { text-align: left; margin-bottom: 22px; }

  .dialogo-codigo .cuenta-mensaje { text-align: left; }
  .dialogo-codigo .btn-negro { width: 100%; }

  .codigo-pie {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
  }

  .codigo-pie button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    color: #444;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
  }

  .codigo-pie button:hover { color: var(--orange); }
  .codigo-pie button:disabled { opacity: 0.55; cursor: default; }

  @media (max-width: 480px) {
    .dialogo-codigo { padding: 40px 22px 32px; }
    .dialogo-titulo { font-size: 27px; }
    .codigo-cajas { gap: 6px; }
    .codigo-cajas input { max-width: 52px; height: 58px; font-size: 26px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dialogo-codigo { transition: none; }
  }


  /* ══════════════════════════════════════════════════════════════════
     BOTONES: MISMA FORMA Y MISMA RESPUESTA
     Los del sitio ya eran ovalados; los negros de los formularios se
     quedaron cuadrados y desentonaban. Aquí se igualan todos y se les
     da el mismo acuse de recibo al pulsar.
     ══════════════════════════════════════════════════════════════════ */
  .btn-negro,
  .btn-pedido { border-radius: 50px; }

  /* El icono del ojo va dentro del campo, no sobre el botón */
  .dialogo-codigo .btn-negro,
  .datos-form .btn-negro { border-radius: 50px; }

  /* -- Se hunden al pulsar --
     El relleno que sube ya se ve al pasar el ratón, pero en el móvil no
     hay ratón: sin esto, tocar un botón no devuelve nada.

     Va con .anim-on porque el bloque del relleno ya declara ahí una
     transición solo de color, y con menos peso esta se perdería. */
  .anim-on .btn-adquirir,
  .anim-on .add-btn,
  .anim-on .btn-outline,
  .anim-on .btn-social,
  .anim-on .btn-send,
  .anim-on .btn-negro,
  .anim-on .btn-pedido,
  .anim-on .btn-whatsapp,
  .anim-on .cuenta-salir {
    transition: transform 0.12s ease, color 0.14s ease, background 0.2s,
                border-color 0.2s;
  }

  .btn-adquirir:active,
  .add-btn:active,
  .btn-outline:active,
  .btn-social:active,
  .btn-send:active,
  .btn-negro:active,
  .btn-pedido:active,
  .btn-whatsapp:active,
  .cuenta-salir:active { transform: scale(0.97); }

  /* Un botón bloqueado no debe responder: hacerlo prometería algo que
     no va a pasar */
  .btn-negro:disabled,
  .btn-pedido:disabled,
  .add-btn:disabled { transform: none; opacity: 0.6; cursor: default; }

  /* (El relleno de los botones negros ya no hace falta aclararlo: ahora
     la ola es blanca y se distingue de sobra sobre el #111.) */

  /* -- Las cruces de cerrar -- */
  .panel-cerrar,
  .carrito-cerrar,
  .buscar-cerrar,
  .dialogo-cerrar {
    border-radius: 50%;
    transition: background 0.2s, color 0.2s, transform 0.12s ease;
  }

  .carrito-cerrar:hover,
  .buscar-cerrar:hover { background: rgba(255, 255, 255, 0.1); }
  .dialogo-cerrar:hover { background: rgba(26, 26, 26, 0.07); }

  .panel-cerrar:active,
  .carrito-cerrar:active,
  .buscar-cerrar:active,
  .dialogo-cerrar:active { transform: scale(0.9); }

  /* -- El foco con teclado se ve en todos --
     Sin esto, quien navegue con tabulador no sabe dónde está */
  .btn-adquirir:focus-visible,
  .add-btn:focus-visible,
  .btn-outline:focus-visible,
  .btn-social:focus-visible,
  .btn-send:focus-visible,
  .btn-negro:focus-visible,
  .btn-pedido:focus-visible,
  .btn-whatsapp:focus-visible,
  .cuenta-salir:focus-visible,
  .panel-cerrar:focus-visible,
  .carrito-cerrar:focus-visible,
  .buscar-cerrar:focus-visible,
  .dialogo-cerrar:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .btn-adquirir, .add-btn, .btn-outline, .btn-social, .btn-send,
    .btn-negro, .btn-pedido, .btn-whatsapp, .cuenta-salir,
    .panel-cerrar, .carrito-cerrar, .buscar-cerrar, .dialogo-cerrar {
      transition: none;
    }
    .btn-adquirir:active, .add-btn:active, .btn-outline:active,
    .btn-social:active, .btn-send:active, .btn-negro:active,
    .btn-pedido:active, .btn-whatsapp:active, .cuenta-salir:active,
    .panel-cerrar:active, .carrito-cerrar:active, .buscar-cerrar:active,
    .dialogo-cerrar:active { transform: none; }
  }


  /* ── Formulario de contacto ── */
  /* La trampa para robots: fuera de la pantalla y fuera del recorrido
     del tabulador, pero no con display:none, que algunos robots detectan */
  .trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .contact-mensaje {
    display: none;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-left: 3px solid var(--orange);
    background: rgba(255, 255, 255, 0.07);
    color: #ddd;
  }

  .contact-mensaje.visible { display: block; }
  .contact-mensaje.error { border-left-color: #e07a72; }
  .contact-mensaje.bien  { border-left-color: #6fbf87; }

  /* Al enviarse, los campos se esconden y sólo queda el agradecimiento.
     El atributo hidden por sí solo no puede contra el display: flex de
     .form-group ni contra el display: grid de .form-row, así que hace
     falta decirlo aquí con más peso. */
  .contact-form [hidden] { display: none; }

  /* ── Aviso de cookies ── */
  /* Abajo a la izquierda, no en una franja que tape la portada. Se
     puede seguir leyendo la web sin contestar. */
  .cookies {
    position: fixed;
    left: 24px;
    bottom: 24px;
    /* Por encima del contenido y de la barra de arriba, pero por debajo
       del fondo oscuro (200) que sacan el carrito y el panel de cuenta:
       así el aviso se queda detrás cuando se abre uno de ellos, en vez
       de flotar encima */
    z-index: 150;
    width: min(420px, calc(100vw - 48px));
    padding: 26px 28px 24px;
    /* Negro pleno, sin dejar pasar nada de lo que hay detrás. Antes era
       casi negro con un desenfoque, y sobre una foto clara se le colaba
       el fondo y el texto perdía nitidez. */
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

    /* Entra desde abajo, despacio */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cookies.visible { opacity: 1; transform: none; }

  .cookies-texto {
    font-family: var(--font-serif);
    font-size: 15.5px;
    line-height: 1.65;
    color: #c9c9c9;
    margin-bottom: 20px;
  }

  .cookies-botones {
    display: flex;
    gap: 12px;
  }

  .cookies-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 18px;
    border-radius: 50px;
    font-family: var(--font-serif);
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: var(--white);
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.12s ease;
  }

  .cookies-si {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--text-dark);
  }

  @media (hover: hover) {
    .cookies-no:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
    .cookies-si:hover { background: var(--white); border-color: var(--white); }
  }

  .cookies-btn:active { transform: scale(0.97); }

  .cookies-btn:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
  }

  @media (max-width: 600px) {
    .cookies {
      left: 14px;
      right: 14px;
      bottom: 14px;
      width: auto;
      padding: 22px 22px 20px;
    }
    .cookies-texto { font-size: 15px; margin-bottom: 18px; }
  }

  /* A quien haya pedido menos movimiento se le enseña sin más */
  @media (prefers-reduced-motion: reduce) {
    .cookies { transition: opacity 0.2s ease; transform: none; }
  }

  /* ── "Pair it with…" al final de cada ficha de producto ── */
  .pareja {
    background: var(--cream);
    padding: 90px 60px 100px;
  }

  .pareja-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto 44px;
  }

  .pareja-titulo {
    font-family: var(--font-serif);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-dark);
  }

  .pareja-todos {
    flex: none;
    font-family: var(--font-serif);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--orange);
    transition: color 0.25s ease, border-color 0.25s ease;
  }

  @media (hover: hover) {
    .pareja-todos:hover { color: var(--text-dark); border-color: var(--text-dark); }
  }

  .pareja-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* La tarjeta es un div y el enlace va dentro: así el botón de añadir
     puede ser un botón de verdad y no un enlace dentro de otro enlace,
     que ni es válido ni se maneja bien con el teclado */
  .par-card {
    display: flex;
    flex-direction: column;
  }

  .par-card > .product-card {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
  }

  .par-marca {
    margin-top: 18px;
    font-family: var(--font-serif);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a8a86;
  }

  .par-card .product-name { margin-top: 6px; font-size: 20px; }
  .par-card .product-price { margin-top: 4px; }

  .par-add {
    flex: none;
    display: block;
    width: 100%;
    margin-top: 16px;
    text-align: center;
    text-decoration: none;
    /* Más discreto que el botón grande de la ficha: aquí acompaña, no
       es lo principal de la página */
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
    padding: 11px 18px;
  }

  @media (hover: hover) {
    .par-add:hover { background: var(--navy); color: var(--white); }
  }

  /* El relleno que sube al pasar el ratón (bloque de botones redondos)
     está pensado para fondos oscuros; aquí estorba */
  .anim-on .par-add::before { display: none; }

  @media (max-width: 1100px) {
    .pareja { padding: 70px 40px 80px; }
    .pareja-titulo { font-size: 38px; }
    .pareja-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  }

  @media (max-width: 700px) {
    .pareja { padding: 56px 20px 64px; }
    .pareja-cabecera { margin-bottom: 32px; }
    .pareja-titulo { font-size: 30px; }
    .pareja-todos { font-size: 13px; letter-spacing: 0.1em; }
    .pareja-grid { gap: 20px 16px; }
    .par-marca { margin-top: 14px; font-size: 11px; }
    .par-card .product-name { font-size: 17px; }
    .par-card .product-price { font-size: 14px; }
    .par-add { margin-top: 12px; padding: 10px 12px; font-size: 14px; }
  }

  /* ══ LA TIENDA: barra sobre la foto y logotipo centrado ══
     Todo lo de aquí abajo está sujeto a .nav-tienda o a .portada-tienda,
     que solo existen en shop.html. Ninguna otra sección cambia. */

  /* El logotipo pasa a ser la imagen de la marca en blanco */
  .nav-tienda .nav-logo img {
    display: block;
    height: 30px;
    width: auto;
    /* El trazo del logotipo es finísimo. Sobre una foto clara se
       desvanece por muy oscuro que sea el velo, así que se lleva su
       propia sombra y deja de depender de lo que haya detrás. */
    filter: drop-shadow(0 1px 9px rgba(0, 0, 0, 0.75));
  }

  /* Lo mismo para los enlaces y los iconos que flotan sobre la foto */
  @media (min-width: 1081px) {
    .nav-tienda:not(.nada) .nav-links a,
    .nav-tienda .carrito-txt {
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    }
    .nav-tienda .icon-btn svg {
      filter: drop-shadow(0 1px 7px rgba(0, 0, 0, 0.65));
      /* Los dibujos de los iconos caen 1,2px por debajo de la línea de
         las letras. Se mueve solo el dibujo, no el botón: si se moviera
         el grupo entero, la palabra "Cart" subiría de más y se
         descuadraría respecto a "Home". */
      transform: translateY(-1.2px);
    }
    /* Con la barra ya negra la sombra sobra */
    .nav-compacta .nav-tienda .nav-links a,
    .nav-compacta .nav-tienda .carrito-txt { text-shadow: none; }
    .nav-compacta .nav-tienda .icon-btn svg,
    .nav-compacta .nav-tienda .nav-logo img { filter: none; }
  }

  @media (min-width: 1081px) {
    /* Transparente sobre la foto. El degradado de la portada es lo que
       hace que se lea; sin él, letras blancas sobre una foto clara. */
    .nav-tienda { background: transparent; }

    /* Todo a la misma altura, en una sola línea. Con cuatro enlaces y
       el botón, el hueco de la izquierda es estrecho y el logotipo cabe
       centrado sin tocar nada. Se le saca de la rejilla y se le pone al
       50% de la barra: centrado dentro de su columna quedaría corrido,
       porque los enlaces y los iconos no ocupan lo mismo. */
    .nav-tienda { grid-template-columns: auto 1fr; gap: 20px; }
    /* El logotipo es todo mayúsculas; el menú es mixto, y la mayor parte
       de su mancha son minúsculas, que quedan por debajo de la línea de
       las mayúsculas. Alineando por mayúscula, el menú se ve bajo. Se
       sube 1px para que lo que se centre sea el cuerpo de las
       minúsculas, que es lo que el ojo lee como el medio de la palabra.
       Con transform y no con margen: al estar centrado por la rejilla,
       un margen negativo solo desplaza la mitad. */
    .nav-tienda .nav-links   { grid-row: 1; grid-column: 1; justify-self: start; gap: 19px;
                               transform: translateY(-1px); }
    .nav-tienda .carrito-txt { display: inline-block; transform: translateY(-1px); }
    .nav-tienda .nav-actions { grid-row: 1; grid-column: 2; justify-self: end; }
    .nav-tienda .nav-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .nav-tienda .nav-logo img { height: 36px; }
    /* Las mayúsculas ya van centradas dentro del propio archivo (se le
       añadió aire abajo para compensar los puntos de la Ö). Queda 1px:
       el texto del menú se mide por su línea base y su centro óptico
       cae un pelo más arriba que el del logotipo. */
    .nav-tienda .nav-logo { margin-top: -1.1px; }

    /* En la tienda sobra el enlace a la propia tienda */
    .nav-tienda .nav-fuera { display: none; }
    .nav-tienda .nav-links a { font-size: 15.5px; white-space: nowrap; }

    /* Al bajar, la barra se despega de la foto y necesita fondo propio */
    .nav-compacta .nav-tienda { background: var(--dark); }
    .nav-compacta .nav-tienda .nav-logo img { height: 28px; }
  }

  @media (max-width: 1080px) {
    .nav-tienda .nav-logo img { height: 30px; }
  }

  /* ── La portada ── */
  .portada-tienda {
    position: relative;
    /* Se mete debajo de la barra fija a propósito: la barra flota encima */
    margin-top: 0;
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--dark);
  }

  .portada-foto {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
  }

  /* Dos velos: uno arriba para que se lea la barra, otro por la
     izquierda para el título. En el centro y a la derecha la foto queda
     limpia, que es donde están los bombones. */
  .portada-tienda::before,
  .portada-tienda::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;          /* por encima de la foto */
    pointer-events: none;
  }

  /* Tiene que llegar hasta abajo de la barra: si se aclara antes, los
     iconos de la derecha se pierden sobre la parte blanca de la foto */
  .portada-tienda::before {
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.88) 0,
                rgba(0, 0, 0, 0.76) 88px,
                rgba(0, 0, 0, 0.4) 175px,
                rgba(0, 0, 0, 0) 330px);
  }

  .portada-tienda::after {
    background: linear-gradient(to right,
                rgba(0, 0, 0, 0.78) 0,
                rgba(0, 0, 0, 0.5) 34%,
                rgba(0, 0, 0, 0) 62%);
  }

  .portada-texto {
    position: relative;   /* por encima de los velos */
    z-index: 2;
    padding: 0 60px 64px;
    max-width: 680px;
  }

  .miga-clara { color: rgba(255, 255, 255, 0.7); }
  .miga-clara a { color: rgba(255, 255, 255, 0.7); }
  .miga-clara a:hover { color: var(--white); }

  .portada-titulo {
    font-family: var(--font-serif);
    font-size: 74px;
    font-weight: 400;
    line-height: 1;
    color: var(--white);
    margin-bottom: 18px;
  }

  .portada-intro {
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    max-width: 520px;
  }

  /* Atajos a cada familia: la tienda es larga y así no hay que bajar
     buscando */
  .portada-atajos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    margin-top: 30px;
  }

  .portada-atajos a {
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
    transition: border-color 0.25s ease, color 0.25s ease;
  }

  @media (hover: hover) {
    .portada-atajos a:hover { color: var(--orange); border-color: var(--orange); }
  }

  /* Sin la portada, main.pagina reservaba sitio para la barra fija.
     Aquí lo hace la portada, así que ese hueco sobra. */
  .pagina-tienda { padding-top: 48px; }

  /* Al saltar desde un atajo, el título no puede quedar debajo de la
     barra fija */
  .tienda-seccion { scroll-margin-top: 110px; }

  @media (max-width: 1080px) {
    /* Aquí la barra ya tiene fondo negro propio, así que el velo de
       arriba solo serviría para apagar la foto */
    .portada-tienda::before { background: none; }
    .portada-tienda { min-height: 520px; }
    .portada-texto { padding: 0 22px 44px; }
    .portada-titulo { font-size: 52px; }
    .portada-intro { font-size: 17px; }
    .pagina-tienda { padding-top: 48px; }
    .tienda-seccion { scroll-margin-top: 80px; }
  }

  @media (max-width: 700px) {
    .portada-tienda { min-height: 460px; }
    /* En vertical la foto se ve casi entera; el velo tiene que subir por
       abajo o el título se pierde sobre la parte clara */
    .portada-tienda::after {
      background: linear-gradient(to top,
                  rgba(0, 0, 0, 0.78) 0,
                  rgba(0, 0, 0, 0.34) 42%,
                  rgba(0, 0, 0, 0) 66%);
    }
    .portada-titulo { font-size: 42px; margin-bottom: 12px; }
    .portada-intro { font-size: 16px; }
    .portada-atajos { margin-top: 22px; gap: 8px 18px; }
    .portada-atajos a { font-size: 12.5px; letter-spacing: 0.12em; }
  }

  /* ── El botón de "más secciones" de la tienda ── */
  /* En el móvil no existe: allí el menú desplegable ya las enseña todas */
  .nav-mas { display: none; }

  @media (min-width: 1081px) {
    /* A la izquierda quedan Home, Our Story, Our Cocoa, Shop y Location.
       Las otras tres se recogen tras el botón. */
    .nav-tienda .nav-extra { display: none; }
    .nav-tienda .nav-mas {
      display: block;
      position: relative;
      /* Va delante de Home, con un poco más de aire: es un botón, no
         una sección más de la lista */
      margin-right: 9px;
    }

    .nav-mas-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      width: 22px;
      height: 18px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
    }

    /* El ☰ va dentro de la lista, así que ya sube con ella; no necesita
       ajuste propio o subiría el doble */

    .nav-mas-btn span {
      display: block;
      height: 1.4px;
      width: 100%;
      background: var(--white);
      transition: background 0.2s ease;
      filter: drop-shadow(0 1px 7px rgba(0, 0, 0, 0.65));
    }

    @media (hover: hover) {
      .nav-mas-btn:hover span { background: var(--orange); }
    }

    .nav-mas-btn:focus-visible {
      outline: 2px solid var(--orange);
      outline-offset: 5px;
      border-radius: 3px;
    }

    .menu-mas {
      position: absolute;
      top: calc(100% + 16px);
      /* Pegado al borde izquierdo del botón, no centrado bajo él: con el
         ☰ en el margen de la página, centrarlo lo sacaba de la pantalla */
      left: 0;
      min-width: 190px;
      list-style: none;
      background: #0a0a0a;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 14px 0;
      z-index: 120;
    }

    .menu-mas a {
      display: block;
      padding: 9px 22px;
      font-family: var(--font-serif);
      font-size: 15.5px;
      color: var(--white);
      text-decoration: none;
      white-space: nowrap;
      text-shadow: none;
      transition: color 0.2s ease;
    }

    @media (hover: hover) {
      .menu-mas a:hover { color: var(--orange); }
    }

    .nav-compacta .nav-mas-btn span { filter: none; }
  }

  /* ── La misma barra, pero sobre fondo sólido ── */
  /* En las fichas de producto no hay foto detrás, así que la barra
     mantiene su negro y sobran las sombras que se pusieron para que las
     letras se leyeran sobre la portada de la tienda. */
  @media (min-width: 1081px) {
    .nav-tienda.nav-solida { background: var(--dark); }
    .nav-tienda.nav-solida .nav-links a,
    .nav-tienda.nav-solida .carrito-txt { text-shadow: none; }
    .nav-tienda.nav-solida .icon-btn svg,
    .nav-tienda.nav-solida .nav-logo img,
    .nav-tienda.nav-solida .nav-mas-btn span { filter: none; }
  }