/*
Theme Name: mytxuleta
Description: Tema propio de mytxuleta.com. Catalogo de alimentacion selecta, preparado
             para convertirse en tienda sin cambiar el diseno: el interruptor esta en
             functions.php, en MYTX_MODO.
Author: Elena Gonzalez Oviedo
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: mytxuleta
*/

/* ==========================================================================
   El diseno aprobado, tal cual salio del prototipo.
   Las clases .solo-catalogo y .solo-tienda las conmuta [data-modo] mas abajo.
   ========================================================================== */

:root {
    --noir: #170d0e;
    --noir-2: #211517;
    --noir-3: #2d1d20;
    --burdeos: #5c1b24;
    --oro: #b8955e;
    --oro-2: #d6bd8c;
    --sal: #e9d2c6;
    --marfil: #f6efe9;
    --marfil-2: #eee3db;
    --tinta: #1c1315;
    --gris: #75676a;
    --gris-osc: #ad9c95;
    --linea: #e2d4cc;
    --linea-osc: rgba(214, 189, 140, 0.16);
    --display: "Gilda Display", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
    --texto: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--noir); color: var(--marfil);
    font-family: var(--texto); font-size: 16px; line-height: 1.65; font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; padding: 0; }
  :focus-visible { outline: 1px solid var(--oro-2); outline-offset: 3px; }
  h1, h2, h3, p { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }

  [data-modo="catalogo"] .solo-tienda { display: none !important; }
  [data-modo="tienda"] .solo-catalogo { display: none !important; }

  .wrap { width: min(1320px, 100% - 72px); margin-inline: auto; }
  @media (max-width: 560px) { .wrap { width: calc(100% - 40px); } }

  .eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--oro); }
  .display { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: 0.005em; text-wrap: balance; }
  .h1 { font-size: clamp(42px, 6vw, 88px); }
  .h2 { font-size: clamp(34px, 4.3vw, 60px); }
  .h3 { font-size: clamp(24px, 2.3vw, 32px); }
  .lede { font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.75; font-weight: 300; color: var(--gris-osc); max-width: 56ch; text-wrap: pretty; }
  .light .lede { color: var(--gris); }

  .dark { background: var(--noir); color: var(--marfil); }
  .dark-2 { background: var(--noir-2); color: var(--marfil); }
  .light { background: var(--marfil); color: var(--tinta); }
  .pad { padding-block: clamp(80px, 10vw, 148px); }
  .cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); flex-wrap: wrap; }
  .cabeza .display { margin-top: 18px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 54px; padding: 0 32px; border: 1px solid var(--oro); color: var(--oro-2);
    font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    transition: background 0.35s, color 0.35s, border-color 0.35s;
  }
  .btn:hover { background: var(--oro); color: var(--noir); }
  .btn.solid { background: var(--oro); color: var(--noir); }
  .btn.solid:hover { background: var(--oro-2); border-color: var(--oro-2); }
  .light .btn { border-color: var(--tinta); color: var(--tinta); }
  .light .btn:hover { background: var(--tinta); color: var(--marfil); }
  .light .btn.solid { background: var(--tinta); color: var(--marfil); }
  .light .btn.solid:hover { background: var(--burdeos); border-color: var(--burdeos); }
  .enlace { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
  .dark .enlace, .dark-2 .enlace { color: var(--oro-2); }

  /* ---------- barra superior ---------- */
  .strip { background: var(--burdeos); color: var(--sal); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
  .strip .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
  .strip a { color: var(--oro-2); }
  @media (max-width: 560px) { .strip .largo { display: none; } }
  @media (max-width: 860px) { .strip .der { display: none; } .strip .wrap { justify-content: center; text-align: center; font-size: 10.5px; } }

  /* ---------- cabecera ---------- */
  .hd { position: sticky; top: 0; z-index: 40; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea-osc); }
  .hd .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; height: 92px; }
  .logo { align-self: center; justify-self: start; font-family: var(--display); font-size: 31px; line-height: 1; color: var(--marfil); letter-spacing: 0.01em; }
  .logo small { display: block; font-family: var(--texto); font-size: 9px; letter-spacing: 0.46em; text-transform: uppercase; color: var(--oro); margin-top: 7px; }
  .nav { display: flex; gap: 40px; }
  .nav > * { display: flex; align-items: center; }
  .nav a, .nav button { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sal); position: relative; height: 100%; display: flex; align-items: center; gap: 8px; transition: color 0.25s; }
  .nav a:hover, .nav button:hover, .nav .activo { color: var(--oro-2); }
  .nav .activo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30px; height: 1px; background: var(--oro); }
  .acciones { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
  .icono { width: 44px; height: 44px; display: grid; place-items: center; color: var(--sal); position: relative; transition: color 0.25s; }
  .icono:hover { color: var(--oro-2); }
  .contador { position: absolute; top: 5px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--oro); color: var(--noir); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; line-height: 1; }
  .contador:empty { display: none; }
  .acciones .btn { min-height: 44px; padding: 0 20px; font-size: 11px; }
  .hamb { display: none; }
  @media (max-width: 1100px) {
    .nav { display: none; }
    .hamb { display: grid; }
    .hd .wrap { display: flex; justify-content: space-between; height: 72px; }
    .logo { font-size: 25px; }
    .logo small { display: none; }
    .acciones .btn { display: none; }
  }

  /* ---------- menú colección ---------- */
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--noir-2); border-bottom: 1px solid var(--linea-osc); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; }
  .con-mega:hover .mega, .con-mega:focus-within .mega, .mega.abierto { opacity: 1; visibility: visible; transform: none; }
  .mega .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; height: auto; padding-block: 36px 40px; }
  .mega-item { display: flex; gap: 16px; align-items: center; padding: 8px 0; }
  .mega-item .mini { width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; position: relative; background: var(--noir-3); }
  .mega-item .mini img { width: 100%; height: 100%; object-fit: cover; }
  .mega-item b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--marfil); line-height: 1.2; }
  .mega-item span { font-size: 12.5px; color: var(--gris-osc); line-height: 1.45; }
  .mega-item:hover b { color: var(--oro-2); }
  .mega-todo { grid-column: 1 / -1; border-top: 1px solid var(--linea-osc); padding-top: 22px; margin-top: 8px; }

  /* ---------- menú móvil ---------- */
  .movil { position: fixed; inset: 0; z-index: 60; background: var(--noir); overflow-y: auto; transform: translateX(100%); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
  .movil.abierto { transform: none; }
  .movil-top { display: flex; justify-content: space-between; align-items: center; height: 72px; padding-inline: 20px; border-bottom: 1px solid var(--linea-osc); }
  .movil nav { padding: 18px 20px 120px; }
  .movil nav > a, .movil summary { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 30px; padding: 16px 0; border-bottom: 1px solid var(--linea-osc); cursor: pointer; list-style: none; }
  .movil summary::-webkit-details-marker { display: none; }
  .movil details[open] summary svg { transform: rotate(45deg); }
  .movil details a { display: block; padding: 11px 0 11px 4px; font-size: 15px; letter-spacing: 0.06em; color: var(--sal); }
  .movil details div { padding: 8px 0 14px; border-bottom: 1px solid var(--linea-osc); }
  .movil .movil-tel { margin-top: 34px; color: var(--gris-osc); font-size: 14px; }
  .movil .movil-tel a { color: var(--oro-2); display: block; font-size: 20px; margin-top: 6px; }

  /* ---------- foto pendiente ---------- */
  .pendiente { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 28% 18%, #3b2428 0%, #241719 55%, #1b1012 100%); overflow: hidden; }
  .pendiente::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--linea-osc); }
  .pendiente .ini { font-family: var(--display); font-size: clamp(90px, 10vw, 180px); line-height: 1; color: rgba(214, 189, 140, 0.13); }
  .pendiente .nota { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(233, 210, 198, 0.45); }
  .pendiente.arriba .nota { top: 30px; bottom: auto; }

  /* ---------- portada ---------- */
  .hero { position: relative; overflow: hidden; min-height: clamp(580px, 80vh, 840px); display: flex; align-items: flex-end; }
  .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; animation: acercar 20s ease-out both; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0,0.95) 0%, rgba(0, 0, 0,0.78) 34%, rgba(0, 0, 0,0.2) 70%, rgba(0, 0, 0,0.05) 100%), linear-gradient(0deg, rgba(0, 0, 0,0.9) 0%, rgba(0, 0, 0,0) 42%); }
  @keyframes acercar { from { transform: scale(1.08); } to { transform: scale(1); } }
  .hero .contenido { position: relative; z-index: 2; padding-block: 140px 64px; }
  .hero .display { margin: 26px 0 28px; max-width: 13ch; }
  .hero .botones { display: flex; align-items: center; gap: 34px; margin-top: 40px; flex-wrap: wrap; }
  .sellos { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--linea-osc); }
  .sellos li { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sal); display: flex; align-items: center; gap: 12px; }
  .sellos li::before { content: ""; width: 5px; height: 5px; background: var(--oro); transform: rotate(45deg); }
  @media (max-width: 700px) {
    .hero { min-height: 640px; }
    .hero > img { object-position: 70% 50%; }
    .hero::after { background: linear-gradient(0deg, rgba(0, 0, 0,0.97) 0%, rgba(0, 0, 0,0.85) 48%, rgba(0, 0, 0,0.25) 100%); }
    .hero .contenido { padding-block: 220px 48px; }
    .sellos { margin-top: 48px; flex-direction: column; }
  }

  .intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
  .intro .lede { margin-bottom: 30px; }
  @media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }

  .cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 21vw, 320px); gap: 14px; }
  .cat { position: relative; overflow: hidden; background: var(--noir-2); display: flex; align-items: flex-end; }
  .cat.grande { grid-column: span 2; grid-row: span 2; }
  .cat.ancha { grid-column: span 2; }
  .cat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
  .cat:hover > img { transform: scale(1.05); }
  .cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,11,12,0.88) 0%, rgba(20,11,12,0.25) 55%, rgba(20,11,12,0) 100%); pointer-events: none; }
  .cat .txt { position: relative; z-index: 2; padding: clamp(22px, 2.4vw, 34px); width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .cat .nombre { font-family: var(--display); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; color: var(--marfil); }
  .cat.grande .nombre { font-size: clamp(32px, 3.4vw, 52px); }
  .cat .lema { display: block; font-size: 13px; color: var(--sal); margin-top: 8px; font-weight: 300; }
  .cat .flecha { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(214,189,140,0.45); display: grid; place-items: center; color: var(--oro-2); transition: background 0.3s, color 0.3s; }
  .cat:hover .flecha { background: var(--oro); color: var(--noir); }
  @media (max-width: 860px) {
    .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
    .cat.grande { grid-row: span 1; }
    .cat .flecha { display: none; }
    .cat .lema { display: none; }
  }

  /* ---------- tarjetas de producto ---------- */
  .productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(18px, 2.2vw, 32px); }
  @media (max-width: 1000px) { .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .prod { display: flex; flex-direction: column; min-width: 0; }
  .prod .foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noir-2); }
  .prod .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
  .prod:hover .foto img { transform: scale(1.045); }
  .prod .meta { padding-top: 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  .prod .origen { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); }
  .light .prod .origen { color: #8f6f3c; }
  .prod .nombre { font-family: var(--display); font-size: clamp(20px, 1.75vw, 27px); line-height: 1.16; }
  .prod .pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea); }
  .dark .prod .pie, .dark-2 .prod .pie { border-color: var(--linea-osc); }
  .prod .cat-nom { font-size: 13px; color: var(--gris); }
  .dark .prod .cat-nom, .dark-2 .prod .cat-nom { color: var(--gris-osc); }
  .prod .precio { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
  .prod .precio small { display: block; font-size: 12px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
  .prod .mini-btn { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid currentColor; }
  .prod .mini-btn.caja { border: 1px solid currentColor; padding: 0 16px; }
  .prod .mini-btn:hover { color: var(--burdeos); }
  .dark .prod .mini-btn:hover, .dark-2 .prod .mini-btn:hover { color: var(--oro-2); }
  @media (max-width: 560px) {
    .productos { gap: 36px 14px; }
    .prod .nombre { font-size: 18px; }
    .prod .cat-nom { display: none; }
    .prod .pie { flex-direction: column; align-items: flex-start; gap: 4px; }
  }
  .dark .prod .meta, .dark-2 .prod .meta { color: var(--marfil); }

  /* ---------- temporada (portada) ---------- */
  .temp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
  .temp .foto-alta { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
  .lista-temp { margin: 34px 0 40px; border-top: 1px solid var(--linea-osc); }
  .lista-temp li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea-osc); }
  .lista-temp .n { font-family: var(--display); font-size: clamp(21px, 1.9vw, 27px); }
  .etiqueta { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro-2); border: 1px solid rgba(214,189,140,0.4); padding: 6px 10px; white-space: nowrap; }
  .light .etiqueta { color: var(--burdeos); border-color: rgba(0, 0, 0,0.35); }
  @media (max-width: 900px) { .temp { grid-template-columns: 1fr; } .temp .foto-alta { aspect-ratio: 16 / 11; order: -1; } }

  /* ---------- proceso ---------- */
  .pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
  .paso { padding-top: 26px; border-top: 1px solid var(--linea); }
  .dark .paso, .dark-2 .paso { border-color: var(--linea-osc); }
  .paso .num { font-family: var(--display); font-size: 46px; line-height: 1; color: var(--oro); }
  .light .paso .num { color: #9a7843; }
  .paso h3 { font-family: var(--display); font-weight: 400; font-size: 25px; margin: 22px 0 12px; }
  .paso p { font-size: 15px; line-height: 1.7; color: var(--gris); font-weight: 300; }
  .dark .paso p, .dark-2 .paso p { color: var(--gris-osc); }
  @media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

  /* ---------- bloques partidos ---------- */
  .partido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; }
  .partido .foto-lado { position: relative; min-height: 420px; overflow: hidden; }
  .partido .foto-lado > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .partido .texto-lado { padding: clamp(56px, 8vw, 120px) clamp(28px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
  .partido .texto-lado .display { margin: 20px 0 22px; }
  .ocasiones { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 42px; }
  .ocasiones li { font-size: 13px; letter-spacing: 0.08em; padding: 10px 16px; border: 1px solid var(--linea-osc); color: var(--sal); }
  @media (max-width: 900px) { .partido { grid-template-columns: 1fr; } }

  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .duo > div { padding: clamp(36px, 4.4vw, 64px); display: flex; flex-direction: column; }
  .duo .claro { background: #fffaf6; border: 1px solid var(--linea); }
  .duo .oscuro { background: var(--noir); color: var(--marfil); }
  .duo .display { margin: 18px 0 16px; font-size: clamp(28px, 2.8vw, 40px); }
  .duo p.txt { font-size: 16px; line-height: 1.75; font-weight: 300; color: var(--gris); margin-bottom: 34px; max-width: 46ch; }
  .duo .oscuro p.txt { color: var(--gris-osc); }
  .duo .abajo { margin-top: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .tel-grande { font-family: var(--display); font-size: clamp(26px, 2.6vw, 36px); color: var(--oro-2); }
  @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

  .lista-priv { background: var(--burdeos); color: var(--marfil); }
  .lista-priv .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: clamp(56px, 6vw, 84px); }
  .lista-priv p { color: var(--sal); font-weight: 300; margin-top: 12px; }
  .campo-linea { display: flex; border-bottom: 1px solid rgba(233,210,198,0.5); }
  .campo-linea input { flex: 1; min-width: 0; background: none; border: 0; padding: 16px 0; color: var(--marfil); font-size: 16px; outline: none; }
  .campo-linea input::placeholder { color: rgba(233,210,198,0.6); }
  .campo-linea button { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro-2); padding-left: 20px; min-height: 52px; }
  @media (max-width: 860px) { .lista-priv .wrap { grid-template-columns: 1fr; } }

  /* ---------- pie ---------- */
  .pie-web { background: var(--noir); color: var(--gris-osc); border-top: 1px solid var(--linea-osc); font-size: 14px; }
  .pie-web .rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 88px 64px; }
  .pie-web .logo { display: inline-block; margin-bottom: 20px; }
  .pie-web h4 { margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro); }
  .pie-web li { margin-bottom: 11px; }
  .pie-web a:hover { color: var(--oro-2); }
  .pie-web .legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 26px 90px; border-top: 1px solid var(--linea-osc); font-size: 12px; color: #7d6e69; }
  @media (max-width: 900px) { .pie-web .rejilla { grid-template-columns: 1fr 1fr; } .pie-web .rejilla > :first-child { grid-column: 1 / -1; } }

  /* ---------- cabecera de sección ---------- */
  .cabecera { position: relative; overflow: hidden; background: var(--noir); }
  .cabecera > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
  .cabecera::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0,0.96) 0%, rgba(0, 0, 0,0.7) 55%, rgba(0, 0, 0,0.35) 100%); }
  .cabecera .wrap { position: relative; z-index: 2; padding-block: clamp(64px, 8vw, 118px); }
  .cabecera .display { margin: 20px 0 20px; }
  .migas { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-osc); }
  .light .migas { color: var(--gris); }
  .migas a:hover { color: var(--oro-2); }
  .light .migas a:hover { color: var(--burdeos); }

  .chips { display: flex; gap: 10px; overflow-x: auto; padding: 36px 0 6px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--linea); font-size: 13px; letter-spacing: 0.04em; transition: border-color 0.25s; }
  .chips a:hover { border-color: var(--tinta); }
  .chips a span { font-size: 11px; color: var(--gris); }
  .chips a.sel { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }
  .chips a.sel span { color: var(--sal); }
  .barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 40px; font-size: 13px; color: var(--gris); }
  .barra select { background: transparent; border: 1px solid var(--linea); padding: 10px 14px; min-height: 44px; margin-left: 10px; color: var(--tinta); }

  /* ---------- ficha ---------- */
  .ficha-sec { padding-block: 36px clamp(80px, 9vw, 130px); }
  .ficha { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 5.5vw, 96px); align-items: start; margin-top: 34px; }
  .galeria .principal { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--noir-2); }
  .galeria .principal img { width: 100%; height: 100%; object-fit: cover; transition: object-position 0.6s ease; }
  .miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
  .miniaturas button { aspect-ratio: 1; overflow: hidden; border: 1px solid transparent; opacity: 0.72; transition: opacity 0.25s, border-color 0.25s; }
  .miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
  .miniaturas button.sel, .miniaturas button:hover { opacity: 1; border-color: var(--tinta); }
  .info { position: sticky; top: 124px; }
  .info .display { margin: 18px 0 22px; }
  .precio-grande { font-family: var(--display); font-size: 36px; margin-top: 30px; }
  .precio-grande small { font-family: var(--texto); font-size: 13px; color: var(--gris); margin-left: 10px; }
  .bloque { margin-top: 32px; }
  .etq { display: block; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; }
  .formatos { display: flex; flex-wrap: wrap; gap: 10px; }
  .formatos button { min-height: 48px; padding: 0 20px; border: 1px solid var(--linea); font-size: 14px; transition: border-color 0.25s; }
  .formatos button:hover { border-color: var(--tinta); }
  .formatos button.sel { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }
  .cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .cta .btn { flex: 1 1 260px; }
  .cta .nota { flex-basis: 100%; font-size: 14px; color: var(--gris); }
  .cta .nota a { color: var(--tinta); border-bottom: 1px solid currentColor; }
  .cantidad { display: flex; align-items: center; border: 1px solid var(--linea); min-height: 54px; }
  .cantidad button { width: 48px; height: 52px; font-size: 20px; }
  .cantidad span { width: 34px; text-align: center; font-weight: 500; }
  .garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; padding-block: 24px; border-block: 1px solid var(--linea); }
  .garantias div { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--gris); }
  .garantias svg { color: #9a7843; }
  .acordeon { margin-top: 12px; }
  .acordeon details { border-bottom: 1px solid var(--linea); }
  .acordeon summary { display: flex; justify-content: space-between; align-items: center; min-height: 64px; cursor: pointer; list-style: none; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
  .acordeon summary::-webkit-details-marker { display: none; }
  .acordeon summary svg { transition: transform 0.3s; }
  .acordeon details[open] summary svg { transform: rotate(45deg); }
  .acordeon p { padding-bottom: 24px; font-size: 15.5px; line-height: 1.8; font-weight: 300; color: #4d4244; max-width: 58ch; }
  .acordeon dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; padding-bottom: 24px; margin: 0; font-size: 15px; }
  .acordeon dt { color: var(--gris); }
  .acordeon dd { margin: 0; }
  @media (max-width: 900px) { .ficha { grid-template-columns: 1fr; } .info { position: static; } }
  @media (max-width: 560px) { .garantias { grid-template-columns: 1fr; } .garantias div { flex-direction: row; align-items: center; } }

  .maridaje .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1000px) { .maridaje .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- temporada (página) ---------- */
  .mes-grande { font-family: var(--display); font-size: clamp(48px, 7vw, 110px); line-height: 1; color: var(--oro-2); }
  .cab-temp { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 60px; flex-wrap: wrap; }
  .cab-temp > div:first-child { flex: 1 1 560px; max-width: 860px; }
  .cab-temp .mes-bloque { text-align: right; }
  @media (max-width: 900px) { .cab-temp .mes-bloque { text-align: left; } }
  .ahora { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .ahora a, .ahora div.item { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px; padding: 30px; background: #fffaf6; border: 1px solid var(--linea); transition: border-color 0.3s; }
  .ahora a:hover { border-color: var(--tinta); }
  .ahora .etiqueta { align-self: flex-start; }
  .ahora .n { font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
  .ahora .m { font-size: 13px; color: var(--gris); }
  @media (max-width: 900px) { .ahora { grid-template-columns: 1fr; } .ahora a, .ahora div.item { min-height: 0; } }
  .cal { overflow-x: auto; margin-top: 20px; padding-bottom: 8px; }
  .cal-grid { min-width: 760px; display: grid; grid-template-columns: 240px repeat(12, minmax(0, 1fr)); gap: 5px; align-items: center; }
  .cal-mes { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--gris); padding: 10px 0; }
  .cal-mes.hoy { color: var(--marfil); background: var(--tinta); }
  .cal-nombre { font-family: var(--display); font-size: 19px; padding-right: 18px; line-height: 1.2; }
  .cal-celda { height: 30px; background: var(--marfil-2); }
  .cal-celda.on { background: #b99a9a; }
  .cal-celda.hoy { outline: 1px solid var(--tinta); outline-offset: -1px; }
  .cal-celda.on.hoy { background: var(--burdeos); }
  .cal-leyenda { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--gris); }
  .cal-leyenda i { display: inline-block; width: 22px; height: 12px; margin-right: 9px; vertical-align: -1px; }
  .proximo { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 34px 38px; background: var(--noir); color: var(--marfil); }
  .proximo .display { font-size: clamp(24px, 2.4vw, 32px); margin-top: 10px; }
  .light .proximo .btn { border-color: var(--oro); color: var(--oro-2); background: transparent; }
  .light .proximo .btn:hover { background: var(--oro); color: var(--noir); }

  /* ---------- chef ---------- */
  .menu-ej { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px; }
  .carta { background: #fffaf6; border: 1px solid var(--linea); padding: clamp(36px, 5vw, 72px); text-align: center; }
  .carta .display { font-size: clamp(34px, 3.4vw, 48px); margin: 16px 0 40px; }
  .carta .tiempo { margin-bottom: 30px; }
  .carta .tiempo span { display: block; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #9a7843; margin-bottom: 10px; }
  .carta .tiempo p { font-family: var(--display); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; }
  .carta .filete { width: 60px; height: 1px; background: var(--oro); margin: 0 auto 30px; }
  .incluye { background: var(--noir); color: var(--marfil); padding: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; gap: 34px; }
  .incluye h3 { font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro); margin-bottom: 16px; }
  .incluye li { padding: 10px 0; border-bottom: 1px solid var(--linea-osc); font-size: 15px; color: var(--sal); font-weight: 300; }
  @media (max-width: 900px) { .menu-ej { grid-template-columns: 1fr; } }

  /* ---------- la casa ---------- */
  .origenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea-osc); }
  .origenes li { padding: 26px 0; border-bottom: 1px solid var(--linea-osc); display: flex; flex-direction: column; gap: 6px; }
  .origenes li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--linea-osc); }
  .origenes b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); }
  .origenes span { font-size: 13px; color: var(--gris-osc); }
  @media (max-width: 760px) { .origenes { grid-template-columns: 1fr; } .origenes li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } }

  /* ---------- contacto ---------- */
  .contacto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
  .form .ancho { grid-column: 1 / -1; }
  .form label { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
  .form input, .form select, .form textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #cdbdb4; padding: 12px 0; font-size: 16px; color: var(--tinta); outline: none; border-radius: 0; }
  .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--tinta); }
  .form textarea { min-height: 120px; resize: vertical; }
  .form .check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--gris); text-transform: none; letter-spacing: 0; }
  .form .check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--burdeos); }
  .lateral { background: var(--noir); color: var(--marfil); padding: clamp(32px, 4vw, 52px); }
  .lateral .bloque-l { padding-block: 22px; border-bottom: 1px solid var(--linea-osc); }
  .lateral .bloque-l:last-child { border-bottom: 0; padding-bottom: 0; }
  .lateral p { font-size: 15px; color: var(--gris-osc); font-weight: 300; margin-top: 8px; }
  .gracias { grid-column: 1 / -1; padding: 48px; background: #fffaf6; border: 1px solid var(--linea); }
  .gracias .display { font-size: clamp(30px, 3vw, 42px); margin: 14px 0 12px; }
  @media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

  /* ---------- cesta, buscador y avisos ---------- */
  .velo { position: fixed; inset: 0; z-index: 65; background: rgba(10, 6, 7, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
  .velo.abierto { opacity: 1; visibility: visible; }
  .cesta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100%); background: var(--marfil); color: var(--tinta); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
  .cesta.abierto { transform: none; }
  .cesta-top { display: flex; justify-content: space-between; align-items: center; padding: 26px 28px; border-bottom: 1px solid var(--linea); }
  .cesta-lista { flex: 1; overflow-y: auto; padding: 8px 28px; }
  .linea-c { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linea); align-items: center; }
  .linea-c .mini { width: 72px; height: 88px; position: relative; overflow: hidden; background: var(--noir-2); }
  .linea-c .mini img { width: 100%; height: 100%; object-fit: cover; }
  .linea-c .mini .pendiente .ini { font-size: 34px; }
  .linea-c .mini .pendiente .nota, .linea-c .mini .pendiente::before { display: none; }
  .linea-c b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.2; }
  .linea-c small { display: block; color: var(--gris); font-size: 13px; margin-top: 4px; }
  .linea-c button { font-size: 12px; color: var(--gris); border-bottom: 1px solid currentColor; }
  .cesta-pie { padding: 24px 28px 30px; border-top: 1px solid var(--linea); }
  .cesta-pie .total { display: flex; justify-content: space-between; font-family: var(--display); font-size: 24px; margin-bottom: 8px; }
  .cesta-pie p { font-size: 13px; color: var(--gris); margin-bottom: 20px; }
  .cesta-pie .btn { width: 100%; }
  .vacia { padding: 60px 0; text-align: center; color: var(--gris); }

  .buscador { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.985); overflow-y: auto; }
  .buscador .wrap { padding-block: 34px 80px; }
  .busca-top { display: flex; justify-content: space-between; align-items: center; }
  .busca-campo { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--oro); margin-top: 60px; }
  .busca-campo input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 18px 0; font-family: var(--display); font-size: clamp(30px, 4vw, 54px); color: var(--marfil); }
  .busca-campo input::placeholder { color: rgba(233,210,198,0.3); }
  .resultados { margin-top: 30px; }
  .resultados a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--linea-osc); }
  .resultados a:hover b { color: var(--oro-2); }
  .resultados b { font-family: var(--display); font-weight: 400; font-size: 24px; }
  .resultados span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-osc); }

  .aviso { position: fixed; left: 50%; bottom: 84px; z-index: 95; transform: translate(-50%, 20px); background: var(--tinta); color: var(--marfil); padding: 14px 22px; font-size: 14px; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; max-width: calc(100% - 40px); text-align: center; }
  .aviso.visible { opacity: 1; transform: translate(-50%, 0); }

  /* control del prototipo: deliberadamente fuera del diseño */
  .proto { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #ffffff; color: #262626; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38); font: 500 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .proto .seg { display: flex; background: #eeeeee; border-radius: 999px; padding: 3px; }
  .proto .seg button { font: inherit; padding: 9px 13px; border-radius: 999px; color: #555555; }
  .proto .seg button.sel { background: #262626; color: #ffffff; }
  .proto .ej { color: #8a8a8a; font-size: 11px; padding-right: 8px; }
  @media (max-width: 560px) { .proto { left: 50%; transform: translateX(-50%); bottom: 10px; } .proto .lbl { display: none; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

  /* ==========================================================================
     PORTADA — los recursos de la versión oscura.

     Se añade al final, sin tocar ni una línea de lo aprobado. Solo suma lo
     que la portada necesitaba y no existía: el antetítulo centrado con su
     filete ornamental, el héroe centrado, el bloque editorial con fotos
     superpuestas y sello, y las listas tipo carta de restaurante.
     ========================================================================== */

  /* ---------- antetítulo centrado + filete ornamental ---------- */
  .ante { text-align: center; margin-bottom: clamp(34px, 3.6vw, 52px); }
  .ante .eyebrow { display: block; }
  .ante .display { margin-top: 22px; }
  .ante .lede { margin: 20px auto 0; }
  .ante-pie { text-align: center; margin-top: clamp(38px, 4.2vw, 60px); }

  .filete { display: block; width: 74px; height: 1px; margin: 16px auto 0; background: var(--oro); position: relative; }
  .ante .filete::before, .ante .filete::after,
  .hero .filete::before, .hero .filete::after {
    content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
    background: var(--oro); transform: translateY(-50%) rotate(45deg);
  }
  .ante .filete::before, .hero .filete::before { left: -13px; }
  .ante .filete::after, .hero .filete::after { right: -13px; }
  /* Variante alineada a la izquierda, para los bloques partidos. */
  .filete-izq { margin-inline: 0 auto; width: 54px; margin-top: 14px; }

  /* ---------- héroe centrado ---------- */
  .hero.centro { align-items: center; text-align: center; }
  .hero.centro::after {
    /* Velo doble: una viñeta central que sostiene el texto sobre la parte
       clara de la foto, y el degradado vertical de siempre. */
    background:
      radial-gradient(74% 64% at 50% 54%, rgba(0, 0, 0,0.78) 0%, rgba(0, 0, 0,0.34) 60%, rgba(0, 0, 0,0) 100%),
      linear-gradient(0deg, rgba(0, 0, 0,0.94) 0%, rgba(0, 0, 0,0.4) 42%, rgba(0, 0, 0,0.46) 66%, rgba(0, 0, 0,0.88) 100%);
  }
  .hero.centro > img { object-position: 50% 50%; }
  .hero.centro .contenido { padding-block: clamp(112px, 13vw, 176px); }
  .hero.centro .display { margin: 28px auto 26px; max-width: 16ch; }
  .hero.centro .lede { margin-inline: auto; }
  .hero.centro .botones { justify-content: center; }
  .hero.centro .sellos { justify-content: center; }
  @media (max-width: 700px) {
    .hero.centro .contenido { padding-block: 150px 56px; }
    .hero.centro .sellos { align-items: center; }
  }

  /* ---------- bloque editorial: texto a un lado, fotos al otro ---------- */
  .editorial {
    display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(44px, 6vw, 104px); align-items: center;
  }
  .editorial .texto .lede + .lede { margin-top: 20px; }
  .editorial .texto .enlace { margin-top: 34px; }

  .editorial-fotos { position: relative; padding: 0 0 clamp(46px, 6vw, 84px) clamp(42px, 6vw, 88px); }
  .editorial-fotos .marco { position: relative; overflow: hidden; background: var(--noir-3); }
  .editorial-fotos .marco > img { width: 100%; height: 100%; object-fit: cover; }
  .editorial-fotos .alta { aspect-ratio: 4 / 5; }
  .editorial-fotos .baja {
    position: absolute; left: 0; bottom: 0; z-index: 2;
    width: clamp(160px, 36%, 280px); aspect-ratio: 1;
    border: 7px solid var(--noir-2);
  }
  .editorial-fotos .baja .pendiente .ini { font-size: 54px; }
  .editorial-fotos .baja .pendiente::before { inset: 8px; }

  .sello-anio {
    position: absolute; z-index: 3; top: -16px; right: -14px;
    width: clamp(106px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-content: center; justify-items: center; gap: 5px;
    background: var(--noir); border: 1px solid var(--oro); color: var(--oro-2);
    text-align: center;
  }
  .sello-anio::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(214,189,140,0.32); border-radius: 50%; }
  .sello-anio b { font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
  .sello-anio em { font-family: var(--display); font-style: normal; font-size: clamp(26px, 3vw, 38px); line-height: 1; }

  @media (max-width: 900px) {
    .editorial { grid-template-columns: 1fr; }
    .editorial-fotos { order: -1; padding-bottom: 40px; padding-left: 36px; }
  }
  @media (max-width: 560px) {
    .sello-anio { top: -10px; right: -6px; width: 96px; }
    .editorial-fotos .baja { width: 42%; border-width: 5px; }
  }

  /* ---------- listas tipo carta de restaurante ---------- */
  .carta-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 5vw, 88px); }
  .carta-menu > li { border-bottom: 1px solid var(--linea-osc); }
  .carta-menu > li:nth-child(1), .carta-menu > li:nth-child(2) { border-top: 1px solid var(--linea-osc); }
  @media (max-width: 860px) {
    .carta-menu { grid-template-columns: 1fr; }
    .carta-menu > li:nth-child(2) { border-top: 0; }
  }

  .carta-item { display: flex; align-items: baseline; gap: 12px; padding: 19px 2px; }
  .carta-item .izq { min-width: 0; }
  .carta-item .n { font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.18; transition: color 0.25s; }
  .carta-item .origen { display: block; font-size: 12.5px; font-weight: 300; color: var(--gris-osc); margin-top: 5px; }
  .carta-item .puntos { flex: 1 1 auto; min-width: 20px; align-self: center; height: 1px; border-bottom: 1px dotted rgba(214,189,140,0.32); }
  .carta-item .der { flex: 0 0 auto; text-align: right; }
  .carta-item .cat-nom { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris-osc); }
  .carta-item .precio { font-size: 16.5px; font-weight: 500; color: var(--oro-2); }
  .carta-item:hover .n { color: var(--oro-2); }
  .carta-item:hover .puntos { border-color: rgba(214,189,140,0.6); }
  @media (max-width: 420px) {
    .carta-item { flex-wrap: wrap; gap: 4px 12px; }
    .carta-item .puntos { display: none; }
    .carta-item .der { flex-basis: 100%; text-align: left; }
  }

  /* La lista de temporada usa la misma línea de carta dentro de .lista-temp. */
  .lista-temp .carta-item { flex: 1; padding-block: 0; }
  .lista-temp .carta-item .der { display: flex; align-items: center; gap: 12px; }

  /* ---------- duo, en oscuro de principio a fin ---------- */
  .duo .tenue { background: var(--noir-2); color: var(--marfil); border: 1px solid var(--linea-osc); }
  .duo .tenue p.txt { color: var(--gris-osc); }
  .duo .tenue .abajo { gap: 18px 24px; }

  /* ---------- bloque partido: el filete también a la izquierda ---------- */
  .partido .texto-lado .filete-izq { margin-bottom: 4px; }

  /* ---------- la lista de temporada (bloque burdeos) ---------- */
  .lista-priv .wrap > div:last-child { display: flex; justify-content: flex-start; }
  @media (min-width: 861px) { .lista-priv .wrap > div:last-child { justify-content: flex-end; } }


/* === MODO PIZARRA ============================================================
   La web, oscura de principio a fin. Decidido el 2026-09-20.
   Orden: conversion -> secciones nuevas de portada -> correcciones de
   contraste de la revision. Las correcciones van al final a proposito:
   son las que tienen que ganar.
   ========================================================================== */

/* ==========================================================================
   MODO PIZARRA — la web, oscura de principio a fin
   --------------------------------------------------------------------------
   Este bloque no reescribe el diseño aprobado: lo vuelve del revés.
   La idea de fondo es que la clase .light deje de significar "banda clara"
   y pase a significar "banda oscura de tono alterno". Así el HTML no se toca,
   el ritmo de bandas que da estructura a la página se conserva, y si mañana
   la clienta quiere volver atrás basta con borrar todo lo que hay debajo.

   Regla que se ha seguido en todo el bloque: donde antes había tinta sobre
   marfil ahora hay marfil sobre pizarra, y donde el acento era burdeos sobre
   claro pasa a ser oro. El burdeos no desaparece — sigue siendo la banda de
   la lista privada y el acento de marca — pero sobre negro no se lee como
   texto, solo funciona como superficie.
   ========================================================================== */

:root {
  /* Los cuatro dorados y el burdeos siguen intactos. Solo añadimos lo que
     el diseño claro resolvía con blancos y grises y aquí no tiene equivalente. */

  /* Las tarjetas que eran #fffaf6 (carta del chef, fichas de temporada,
     mensaje de gracias, columna clara del duo). Un punto por encima del
     fondo de banda: tienen que leerse como papel apoyado, no como agujero. */
  --panel: #2a1a1d;

  /* --linea-osc (0.16) es correcta para separar filas dentro de una banda,
     pero se queda corta cuando la línea ES el control: el subrayado de un
     campo de formulario o el borde de un chip tienen que verse sin buscarlos. */
  --linea-fuerte: rgba(214, 189, 140, 0.34);

  /* Los estados hover/seleccionado usaban var(--tinta): casi negro. Sobre
     pizarra eso es invisible, así que el foco de interacción pasa al oro. */
  --borde-activo: var(--oro);
}

/* Le decimos al navegador que el documento es oscuro. Sin esto, los
   desplegables nativos de <select>, los checkbox y las barras de scroll
   siguen dibujándose en claro y rompen la página por dentro. */
html { color-scheme: dark; }

::selection { background: var(--oro); color: var(--noir); }

/* ==========================================================================
   1. LAS BANDAS
   ========================================================================== */

/* .light ya no es marfil. Se le da --noir-2 para que siga alternando con las
   bandas .dark (--noir): el contraste entre ambas es sutil pero suficiente
   para que la página respire por bandas, que es lo que sostenía el diseño. */
.light { background: var(--noir-2); color: var(--marfil); }

/* Problema derivado: .dark-2 ya era --noir-2. Allí donde .dark-2 toca una
   banda .light convertida, las dos quedarían del mismo tono y se fundirían
   en un bloque único. En esos contactos concretos —y solo ahí— .dark-2 sube
   al tercer oscuro, así que la alternancia nunca se pierde.

   Van en dos reglas separadas a propósito: si se juntasen en una lista con
   coma, un navegador antiguo que no entienda :has() tiraría las dos a la vez
   y la primera, que es la que salva la portada, dejaría de aplicarse. */
.light + .dark-2 { background: var(--noir-3); }
.dark-2:has(+ .light) { background: var(--noir-3); }

/* Los paneles oscuros que antes iban incrustados en una banda clara
   (.duo .oscuro, la caja de "incluye", el lateral de contacto, el aviso de
   próximo mes) se distinguían por el simple salto claro→oscuro. Ahora flotan
   sobre oscuro, así que necesitan un filo de oro que les devuelva el borde. */
.duo .oscuro,
.incluye,
.lateral,
.proximo { border: 1px solid var(--linea-osc); }

/* ==========================================================================
   2. TEXTO — todo lo que estaba en oscuro sobre claro
   --------------------------------------------------------------------------
   --gris (#75676a) era texto secundario legible sobre marfil; sobre pizarra
   desaparece. Su equivalente exacto es --gris-osc, que ya existía para eso
   mismo en las bandas oscuras. No hace falta inventar un token nuevo.
   ========================================================================== */

.light .lede { color: var(--gris-osc); }
.light .migas { color: var(--gris-osc); }
.prod .cat-nom { color: var(--gris-osc); }
.prod .precio small { color: var(--gris-osc); }
.paso p { color: var(--gris-osc); }
.duo p.txt { color: var(--gris-osc); }
.chips a span { color: var(--gris-osc); }
.barra { color: var(--gris-osc); }
.precio-grande small { color: var(--gris-osc); }
.etq { color: var(--gris-osc); }
.cta .nota { color: var(--gris-osc); }
.garantias div { color: var(--gris-osc); }
.acordeon dt { color: var(--gris-osc); }
.acordeon p { color: var(--gris-osc); }
.ahora .m { color: var(--gris-osc); }
.cal-mes { color: var(--gris-osc); }
.cal-leyenda { color: var(--gris-osc); }
.form label { color: var(--gris-osc); }
.form .check { color: var(--gris-osc); }
.linea-c small { color: var(--gris-osc); }
.linea-c button { color: var(--gris-osc); }
.cesta-pie p { color: var(--gris-osc); }
.vacia { color: var(--gris-osc); }

/* La letra pequeña del pie ya vivía sobre negro con #7d6e69 y se quedaba
   en 3.9:1. Aprovechamos la revisión para dejarla por encima del umbral. */
.pie-web .legal { color: var(--gris-osc); }

/* Peso mínimo: sobre fondo claro una 300 se lee fina y elegante; sobre
   pizarra el trazo se adelgaza ópticamente y el párrafo se deshilacha.
   Subimos a 400 solo donde había texto corrido, no en los titulares. */
.lede,
.paso p,
.duo p.txt,
.acordeon p,
.cat .lema,
.incluye li,
.lateral p,
.lista-priv p { font-weight: 400; }

/* Mismo motivo, pero este párrafo lleva el peso en un style= dentro de
   footer.php, así que la hoja de estilos no puede ganarle sin !important. */
.pie-web .rejilla > div > p { font-weight: 400 !important; }

/* ==========================================================================
   3. ACENTOS DORADOS — los marrones "oro oscurecido" del modo claro
   --------------------------------------------------------------------------
   #8f6f3c y #9a7843 eran el oro rebajado para que no cegara sobre marfil.
   Sobre pizarra se quedan en 3.8:1 y el texto en versalitas deja de leerse:
   vuelven al oro de marca, que sobre --noir-2 da 6.3:1.
   ========================================================================== */

.light .prod .origen { color: var(--oro); }
.light .paso .num { color: var(--oro); }
.carta .tiempo span { color: var(--oro); }
.garantias svg { color: var(--oro); }

/* El burdeos como TEXTO sobre oscuro da 1.4:1 — es ilegible. Donde se usaba
   como color de letra o de borde fino pasa a oro; como fondo de banda
   (.lista-priv) se queda exactamente igual, que ahí sí funciona. */
.light .etiqueta { color: var(--oro-2); border-color: rgba(214, 189, 140, 0.4); }
.light .migas a:hover { color: var(--oro-2); }
.prod .mini-btn:hover { color: var(--oro-2); }
.cta .nota a { color: var(--oro-2); }

/* .enlace heredaba la tinta de la banda clara. Ahora necesita color propio. */
.light .enlace { color: var(--oro-2); }

/* ==========================================================================
   4. BOTONES
   --------------------------------------------------------------------------
   En claro el botón era una caja de tinta; en oscuro el patrón ya resuelto
   por el diseño es el filo de oro que se rellena al pasar por encima.
   Se replica tal cual para que no haya dos gramáticas de botón en la web.
   ========================================================================== */

.light .btn { border-color: var(--oro); color: var(--oro-2); background: transparent; }
.light .btn:hover { background: var(--oro); color: var(--noir); }
.light .btn.solid { background: var(--oro); color: var(--noir); border-color: var(--oro); }
.light .btn.solid:hover { background: var(--oro-2); border-color: var(--oro-2); color: var(--noir); }

/* ==========================================================================
   5. LÍNEAS Y BORDES
   --------------------------------------------------------------------------
   --linea (#e2d4cc) es un gris rosado pensado para restar sobre marfil.
   Sobre pizarra sería una raya clarísima que grita. Se sustituye por el
   filo dorado translúcido que ya usaban las bandas oscuras.
   ========================================================================== */

.prod .pie { border-top-color: var(--linea-osc); }
.paso { border-top-color: var(--linea-osc); }
.cantidad { border-color: var(--linea-osc); }
.garantias { border-block-color: var(--linea-osc); }
.acordeon details { border-bottom-color: var(--linea-osc); }
.cesta-top { border-bottom-color: var(--linea-osc); }
.cesta-pie { border-top-color: var(--linea-osc); }
.linea-c { border-bottom-color: var(--linea-osc); }

/* Estos bordes no decoran: delimitan algo en lo que se puede hacer clic.
   Por eso van con --linea-fuerte y no con la línea de separación. */
.chips a,
.formatos button,
.barra select { border-color: var(--linea-fuerte); }

/* El hover marcaba el foco poniendo el borde casi negro. Sobre negro eso es
   nada, así que el foco se señala subiendo al oro. */
.chips a:hover,
.formatos button:hover,
.ahora a:hover,
.miniaturas button.sel,
.miniaturas button:hover { border-color: var(--borde-activo); }

/* ==========================================================================
   6. SUPERFICIES CLARAS INCRUSTADAS
   --------------------------------------------------------------------------
   Las tarjetas #fffaf6 eran "papel sobre marfil": un punto más claras que la
   banda. Se traduce literalmente —un punto más claras que la pizarra— para
   que sigan leyéndose como objeto apoyado y no como hueco recortado.
   ========================================================================== */

.duo .claro,
.ahora a,
.ahora div.item,
.carta,
.gracias {
  background: var(--panel);
  border-color: var(--linea-osc);
  color: var(--marfil);
}

/* El aviso de próximo mes era negro sobre banda clara: contraste máximo.
   Ahora es negro sobre pizarra, así que se apoya en el filo (arriba) y se
   deja en --noir para que siga siendo el punto más profundo de la sección. */
.proximo { background: var(--noir); }

/* ==========================================================================
   7. SELECCIONADO / ESTADO ACTIVO
   --------------------------------------------------------------------------
   El estado "elegido" se pintaba con var(--tinta) de fondo: una pastilla casi
   negra que sobre marfil saltaba a la vista. Sobre pizarra se borra. El oro
   hace el mismo trabajo y además refuerza la marca en la parte funcional.
   ========================================================================== */

.chips a.sel { background: var(--oro); color: var(--noir); border-color: var(--oro); }
.chips a.sel span { color: rgba(0, 0, 0, 0.82); }
.formatos button.sel { background: var(--oro); color: var(--noir); border-color: var(--oro); }

/* ==========================================================================
   8. CALENDARIO DE TEMPORADA
   --------------------------------------------------------------------------
   Es la única pieza donde el fondo claro llevaba información: celda apagada
   (--marfil-2) frente a celda en temporada (#b99a9a). Se invierte la base
   pero se mantiene el rosa: sobre pizarra da 6.2:1 y las barras de temporada
   se leen de un vistazo, que es justo para lo que está la tabla.
   ========================================================================== */

.cal-celda { background: var(--noir-3); }
.cal-mes.hoy { background: var(--oro); color: var(--noir); }
.cal-celda.hoy { outline-color: var(--oro); }

/* El mes en curso CON producto en temporada era burdeos sobre marfil. Sobre
   pizarra el burdeos es más oscuro que las celdas normales: el dato más
   importante del calendario se leería como un hueco. Pasa a oro. */
.cal-celda.on.hoy { background: var(--oro); }

/* ==========================================================================
   9. FORMULARIOS
   --------------------------------------------------------------------------
   La parte más delicada del cambio: aquí el usuario tiene que ver dónde
   escribe y qué ha escrito. Nada de líneas al 16%.
   ========================================================================== */

.form input,
.form select,
.form textarea {
  border-bottom-color: var(--linea-fuerte);
  color: var(--marfil);
  background: transparent;
}
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--oro); }
.form ::placeholder { color: rgba(233, 210, 198, 0.55); }

/* El desplegable nativo hereda el fondo del <select>; si se deja transparente,
   algunos navegadores pintan la lista en blanco y el texto marfil desaparece. */
.barra select,
.form select { background-color: var(--noir-2); color: var(--marfil); }
.barra select option,
.form select option { background: var(--noir-2); color: var(--marfil); }

/* Autorrelleno de Chrome: impone un fondo azul claro y texto negro por encima
   de cualquier regla. El truco del box-shadow interior es la única forma de
   que el campo autorrellenado no quede como un parche blanco. */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.campo-linea input:-webkit-autofill {
  -webkit-text-fill-color: var(--marfil);
  -webkit-box-shadow: 0 0 0 1000px var(--noir-2) inset;
  caret-color: var(--marfil);
  transition: background-color 9999s ease-in-out 0s;
}

/* El burdeos de la casilla de verificación sobre pizarra queda por debajo del
   propio fondo: marcada y sin marcar se ven igual. El oro sí se distingue. */
.form .check input { accent-color: var(--oro); }

/* ==========================================================================
   10. CESTA, VELO Y AVISOS
   --------------------------------------------------------------------------
   El cajón de la cesta era la única superficie marfil a pantalla completa.
   Pasa a pizarra con filo dorado y sombra para que se despegue de la página,
   que ahora tiene su mismo tono.
   ========================================================================== */

.cesta {
  background: var(--noir-2);
  color: var(--marfil);
  border-left: 1px solid var(--linea-osc);
  box-shadow: -28px 0 60px rgba(0, 0, 0, 0.5);
}

/* El velo al 55% bastaba para apagar una página clara. Sobre una página que
   ya es oscura casi no se nota que hay algo detrás desactivado. */
.velo { background: rgba(6, 3, 4, 0.72); }

/* El toast era tinta sobre marfil: ahora sería negro sobre negro. Se sube al
   tercer oscuro y se le pone filo de oro para que se lea como algo que flota. */
.aviso {
  background: var(--noir-3);
  color: var(--marfil);
  border: 1px solid var(--oro);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Nota: el widget .proto (el interruptor catálogo/tienda del prototipo) se
   deja en blanco a propósito. Está fuera del diseño y tiene que seguir
   viéndose como lo que es: una herramienta, no parte de la web. */

/* ==========================================================================
   11. SEIS COLORES QUE VIVEN EN EL HTML, NO EN LA HOJA
   --------------------------------------------------------------------------
   El prototipo lleva seis style="" incrustados con colores claros. Una hoja
   de estilos no puede ganarle a un atributo style sin !important, así que
   esta es la única sección del bloque que lo usa. Los selectores apuntan al
   propio atributo para que se vea de un vistazo a qué está parcheando cada
   línea — y para que, el día que esos style="" se borren de las plantillas,
   la regla deje de aplicarse sola sin dejar rastro.

   Es un parche, no la solución: lo correcto es quitar esos colores del
   marcado. Mientras estén, sin estas seis reglas quedan un botón negro sobre
   negro, un aspa invisible y una muestra blanca en la leyenda del calendario.
   ========================================================================== */

/* Aspa de cerrar la cesta: iba en tinta porque el cajón era marfil. */
.cesta [data-cerrar="cesta"] { color: var(--sal) !important; }

/* Botón de finalizar pedido: caja de tinta sobre marfil. Es el botón más
   importante de la web; en negro sobre pizarra desaparecería del todo. */
.cesta [data-finalizar] {
  background: var(--oro) !important;
  color: var(--noir) !important;
  border-color: var(--oro) !important;
}

/* Antetítulo de la portada con el oro rebajado para marfil (3.8:1). */
.eyebrow[style*="8f6f3c"] { color: var(--oro) !important; }

/* "Presupuesto a medida" del chef, en --gris sobre lo que ya es pizarra. */
[style*="color:var(--gris)"],
[style*="color: var(--gris)"] { color: var(--gris-osc) !important; }

/* Leyenda del calendario. Las dos muestras tienen que seguir diciendo la
   verdad sobre lo que pinta la tabla: fuera de temporada ya no es marfil,
   y el mes en curso con producto ya no es burdeos, es oro. */
.cal-leyenda i[style*="marfil-2"] { background: var(--noir-3) !important; }
.cal-leyenda i[style*="burdeos"] { background: var(--oro) !important; }


/* === SECCIONES NUEVAS DE LA PORTADA ====================================== */


  /* ==========================================================================
     PORTADA — los recursos de la versión oscura.

     Se añade al final, sin tocar ni una línea de lo aprobado. Solo suma lo
     que la portada necesitaba y no existía: el antetítulo centrado con su
     filete ornamental, el héroe centrado, el bloque editorial con fotos
     superpuestas y sello, y las listas tipo carta de restaurante.
     ========================================================================== */

  /* ---------- antetítulo centrado + filete ornamental ---------- */
  .ante { text-align: center; margin-bottom: clamp(34px, 3.6vw, 52px); }
  .ante .eyebrow { display: block; }
  .ante .display { margin-top: 22px; }
  .ante .lede { margin: 20px auto 0; }
  .ante-pie { text-align: center; margin-top: clamp(38px, 4.2vw, 60px); }

  .filete { display: block; width: 74px; height: 1px; margin: 16px auto 0; background: var(--oro); position: relative; }
  .ante .filete::before, .ante .filete::after,
  .hero .filete::before, .hero .filete::after {
    content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
    background: var(--oro); transform: translateY(-50%) rotate(45deg);
  }
  .ante .filete::before, .hero .filete::before { left: -13px; }
  .ante .filete::after, .hero .filete::after { right: -13px; }
  /* Variante alineada a la izquierda, para los bloques partidos. */
  .filete-izq { margin-inline: 0 auto; width: 54px; margin-top: 14px; }

  /* ---------- héroe centrado ---------- */
  .hero.centro { align-items: center; text-align: center; }
  .hero.centro::after {
    /* Velo doble: una viñeta central que sostiene el texto sobre la parte
       clara de la foto, y el degradado vertical de siempre. */
    background:
      radial-gradient(74% 64% at 50% 54%, rgba(0, 0, 0,0.78) 0%, rgba(0, 0, 0,0.34) 60%, rgba(0, 0, 0,0) 100%),
      linear-gradient(0deg, rgba(0, 0, 0,0.94) 0%, rgba(0, 0, 0,0.4) 42%, rgba(0, 0, 0,0.46) 66%, rgba(0, 0, 0,0.88) 100%);
  }
  .hero.centro > img { object-position: 50% 50%; }
  .hero.centro .contenido { padding-block: clamp(112px, 13vw, 176px); }
  .hero.centro .display { margin: 28px auto 26px; max-width: 16ch; }
  .hero.centro .lede { margin-inline: auto; }
  .hero.centro .botones { justify-content: center; }
  .hero.centro .sellos { justify-content: center; }
  @media (max-width: 700px) {
    .hero.centro .contenido { padding-block: 150px 56px; }
    .hero.centro .sellos { align-items: center; }
  }

  /* ---------- bloque editorial: texto a un lado, fotos al otro ---------- */
  .editorial {
    display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(44px, 6vw, 104px); align-items: center;
  }
  .editorial .texto .lede + .lede { margin-top: 20px; }
  .editorial .texto .enlace { margin-top: 34px; }

  .editorial-fotos { position: relative; padding: 0 0 clamp(46px, 6vw, 84px) clamp(42px, 6vw, 88px); }
  .editorial-fotos .marco { position: relative; overflow: hidden; background: var(--noir-3); }
  .editorial-fotos .marco > img { width: 100%; height: 100%; object-fit: cover; }
  .editorial-fotos .alta { aspect-ratio: 4 / 5; }
  .editorial-fotos .baja {
    position: absolute; left: 0; bottom: 0; z-index: 2;
    width: clamp(160px, 36%, 280px); aspect-ratio: 1;
    border: 7px solid var(--noir-2);
  }
  .editorial-fotos .baja .pendiente .ini { font-size: 54px; }
  .editorial-fotos .baja .pendiente::before { inset: 8px; }

  .sello-anio {
    position: absolute; z-index: 3; top: -16px; right: -14px;
    width: clamp(106px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-content: center; justify-items: center; gap: 5px;
    background: var(--noir); border: 1px solid var(--oro); color: var(--oro-2);
    text-align: center;
  }
  .sello-anio::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(214,189,140,0.32); border-radius: 50%; }
  .sello-anio b { font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
  .sello-anio em { font-family: var(--display); font-style: normal; font-size: clamp(26px, 3vw, 38px); line-height: 1; }

  @media (max-width: 900px) {
    .editorial { grid-template-columns: 1fr; }
    .editorial-fotos { order: -1; padding-bottom: 40px; padding-left: 36px; }
  }
  @media (max-width: 560px) {
    .sello-anio { top: -10px; right: -6px; width: 96px; }
    .editorial-fotos .baja { width: 42%; border-width: 5px; }
  }

  /* ---------- listas tipo carta de restaurante ---------- */
  .carta-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 5vw, 88px); }
  .carta-menu > li { border-bottom: 1px solid var(--linea-osc); }
  .carta-menu > li:nth-child(1), .carta-menu > li:nth-child(2) { border-top: 1px solid var(--linea-osc); }
  @media (max-width: 860px) {
    .carta-menu { grid-template-columns: 1fr; }
    .carta-menu > li:nth-child(2) { border-top: 0; }
  }

  .carta-item { display: flex; align-items: baseline; gap: 12px; padding: 19px 2px; }
  .carta-item .izq { min-width: 0; }
  .carta-item .n { font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.18; transition: color 0.25s; }
  .carta-item .origen { display: block; font-size: 12.5px; font-weight: 300; color: var(--gris-osc); margin-top: 5px; }
  .carta-item .puntos { flex: 1 1 auto; min-width: 20px; align-self: center; height: 1px; border-bottom: 1px dotted rgba(214,189,140,0.32); }
  .carta-item .der { flex: 0 0 auto; text-align: right; }
  .carta-item .cat-nom { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris-osc); }
  .carta-item .precio { font-size: 16.5px; font-weight: 500; color: var(--oro-2); }
  .carta-item:hover .n { color: var(--oro-2); }
  .carta-item:hover .puntos { border-color: rgba(214,189,140,0.6); }
  @media (max-width: 420px) {
    .carta-item { flex-wrap: wrap; gap: 4px 12px; }
    .carta-item .puntos { display: none; }
    .carta-item .der { flex-basis: 100%; text-align: left; }
  }

  /* La lista de temporada usa la misma línea de carta dentro de .lista-temp. */
  .lista-temp .carta-item { flex: 1; padding-block: 0; }
  .lista-temp .carta-item .der { display: flex; align-items: center; gap: 12px; }

  /* ---------- duo, en oscuro de principio a fin ---------- */
  .duo .tenue { background: var(--noir-2); color: var(--marfil); border: 1px solid var(--linea-osc); }
  .duo .tenue p.txt { color: var(--gris-osc); }
  .duo .tenue .abajo { gap: 18px 24px; }

  /* ---------- bloque partido: el filete también a la izquierda ---------- */
  .partido .texto-lado .filete-izq { margin-bottom: 4px; }

  /* ---------- la lista de temporada (bloque burdeos) ---------- */
  .lista-priv .wrap > div:last-child { display: flex; justify-content: flex-start; }
  @media (min-width: 861px) { .lista-priv .wrap > div:last-child { justify-content: flex-end; } }


/* === CORRECCIONES DE CONTRASTE Y ACCESIBILIDAD =========================== */
/* Salidas de la revision adversarial: 12 fallos, 4 graves. Van al final
   para ganar en especificidad a lo de arriba. */

/* .campo-linea input:-webkit-autofill — alta */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--marfil);
  -webkit-box-shadow: 0 0 0 1000px var(--noir-2) inset;
  caret-color: var(--marfil);
  transition: background-color 9999s ease-in-out 0s;
}
/* La lista privada es burdeos, no pizarra: su autorrelleno va aparte. */
.campo-linea input:-webkit-autofill,
.campo-linea input:-webkit-autofill:hover,
.campo-linea input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--marfil);
  -webkit-box-shadow: 0 0 0 1000px var(--burdeos) inset;
  caret-color: var(--marfil);
  transition: background-color 9999s ease-in-out 0s;
}

/* .duo .oscuro, .incluye, .lateral, .proximo — alta */
.duo .oscuro,
.incluye,
.lateral,
.proximo { border: 1px solid var(--linea-fuerte); }

/* :root { --linea-fuerte } — alta */
:root { --linea-fuerte: rgba(214, 189, 140, 0.5); }

/* .campo-linea input, .busca-campo input — alta */
.campo-linea input:focus-visible,
.busca-campo input:focus-visible {
  outline: 1px solid var(--oro-2);
  outline-offset: 3px;
}
.campo-linea:focus-within { border-bottom-color: var(--marfil); }

/* .form input:focus, .form select:focus, .form textarea:focus — media */
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-bottom-width: 2px;
  border-color: var(--oro-2);
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 1px solid var(--oro-2);
  outline-offset: 3px;
}

/* .duo .claro, .ahora a, .ahora div.item, .carta, .gracias — media */
.duo .claro,
.ahora a,
.ahora div.item,
.carta,
.gracias {
  background: var(--panel);
  border-color: var(--linea-fuerte);
  color: var(--marfil);
}

/* .cesta [data-finalizar] — media */
.cesta [data-finalizar]:hover,
.cesta [data-finalizar]:focus-visible {
  background: var(--oro-2) !important;
  border-color: var(--oro-2) !important;
  color: var(--noir) !important;
}

/* .cesta [data-cerrar="cesta"] — media */
.cesta [data-cerrar="cesta"]:hover,
.cesta [data-cerrar="cesta"]:focus-visible { color: var(--oro-2) !important; }

/* .cantidad — media */
.chips a,
.formatos button,
.barra select,
.cantidad { border-color: var(--linea-fuerte); }

/* .cesta — media */
.cesta {
  background: var(--noir-2);
  color: var(--marfil);
  border-left: 1px solid var(--linea-fuerte);
  box-shadow: -28px 0 60px rgba(0, 0, 0, 0.8);
}

/* .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce table.shop_table, .woocommerce form .form-row input.input-text, .select2-container--default .select2-selection--single — media */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-results > .select2-results__options {
  background: var(--noir-2) !important;
  color: var(--marfil) !important;
  border-color: var(--linea-fuerte) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--oro) !important; }

/* .light — baja */
.light { background: var(--noir-2); color: var(--marfil); box-shadow: inset 0 1px 0 var(--linea-osc), inset 0 -1px 0 var(--linea-osc); }


/* === SINCRONIZADO CON EL PROTOTIPO ==================================
   23 de septiembre de 2026. El prototipo fijó tres reglas que este tema
   todavía no cumplía. Van al final para ganar a todo lo anterior.
   ========================================================================== */

/* 1 · NEGRO PURO, ORO COMO ÚNICO ACENTO.
   El prototipo aplana los cuatro oscuros y el granate a #000000. No es un
   atajo: es la decisión de que el fondo sea continuo, una mesa negra sin
   costuras, y que el color lo ponga solo el producto y el oro. El granate se
   neutraliza aquí en vez de borrarse del CSS para que las reglas que lo
   nombran sigan siendo válidas si algún día se recupera. */
:root {
  --noir:    #000000;
  --noir-2:  #000000;
  --noir-3:  #000000;
  --burdeos: #000000;
  --panel:   #000000;
}

body { background: #000000; }

/* 2 · SIN SEPARACIONES ENTRE SECCIONES.
   El sábado le puse a .light dos filetes internos para que se distinguiera
   de las bandas contiguas. Sobraba: con el fondo aplanado no hay bandas que
   separar, y un separador dorado ya se probó y se descartó por romper
   justamente esa continuidad. */
.light {
  background: #000000;
  color: var(--marfil);
  box-shadow: none;
}
.light + .dark-2,
.dark-2:has(+ .light) { background: #000000; }

/* Los paneles que flotaban sobre banda clara ya no necesitan filo: sobre
   negro continuo se sostienen solos con su propio contenido. */
.duo .oscuro,
.incluye,
.lateral,
.proximo { border: none; }

/* 3 · SIN MOVIMIENTO.
   Ni transiciones ni animaciones en toda la web. Se respeta el foco visible,
   que no es decoración sino accesibilidad: quien navega con teclado tiene
   que ver dónde está. */
*, *::before, *::after {
  transition: none !important;
  animation: none !important;
}
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Lo que no viene del prototipo: el aviso del formulario de contacto, que en
   el prototipo era un toast de JavaScript y aquí es una recarga de verdad.
   --------------------------------------------------------------------------- */
.form .enviado {
    margin: 0 0 6px;
    padding: 16px 20px;
    border: 1px solid var(--oro);
    color: var(--oro-2);
    background: rgba(184, 149, 94, 0.08);
    font-size: 15px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   El aviso de cookies. No viene del prototipo: allí no había cookies que
   consentir. Abajo y discreto, sin tapar el contenido ni bloquear la web.
   --------------------------------------------------------------------------- */
.cookies {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 140%);
    z-index: 60;
    width: min(760px, calc(100vw - 36px));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px 26px;
    align-items: center;
    padding: 20px 24px;
    background: var(--noir-2);
    border: 1px solid var(--linea-osc);
    transition: transform 0.3s ease;
}
.cookies.visible { transform: translate(-50%, 0); }
.cookies-txt p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gris-osc); }
.cookies-txt p strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 17px;
    color: var(--marfil);
    letter-spacing: 0.01em;
}
.cookies-txt a { color: var(--oro-2); text-decoration: underline; text-underline-offset: 2px; }
.cookies-btn { display: flex; gap: 10px; flex-wrap: wrap; }
.cookies-btn .btn { white-space: nowrap; }

@media (max-width: 640px) {
    .cookies { grid-template-columns: 1fr; bottom: 12px; padding: 18px 20px; }
    .cookies-btn .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Páginas de texto (legales). La política de cookies lleva tablas, que el
   diseño del catálogo no contemplaba.
   --------------------------------------------------------------------------- */
.pagina .contenido h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 30px);
    margin: 52px 0 16px;
}
.pagina .contenido h3 {
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oro);
    margin: 38px 0 14px;
}
.pagina .contenido p,
.pagina .contenido li { line-height: 1.8; font-weight: 300; }
.pagina .contenido ul { padding-left: 20px; margin: 16px 0; }
.pagina .contenido li { margin-bottom: 8px; }
.pagina .contenido a { color: var(--oro); text-decoration: underline; text-underline-offset: 2px; }
.pagina .contenido code {
    font-size: 0.92em;
    padding: 2px 6px;
    background: rgba(184, 149, 94, 0.12);
    color: var(--oro-2);
}
.pagina .contenido table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 26px;
    font-size: 14.5px;
}
.pagina .contenido th,
.pagina .contenido td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linea-osc);
    vertical-align: top;
}
.pagina .contenido th {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-osc);
}
@media (max-width: 600px) {
    .pagina .contenido table, .pagina .contenido thead,
    .pagina .contenido tbody, .pagina .contenido tr,
    .pagina .contenido th, .pagina .contenido td { display: block; }
    .pagina .contenido thead { display: none; }
    .pagina .contenido tr { border-bottom: 1px solid var(--linea-osc); padding: 10px 0; }
    .pagina .contenido td { border: 0; padding: 4px 0; }
}