/* ═══════════════════════════════════════════════════════════════
   ARREGLOS DE LA CASA · sitio de Cartagena          Jairo 24-sep
   ---------------------------------------------------------------
   Lo que Jairo vio el día que salió al aire, mirando desde el
   celular. Va en un archivo APARTE y no dentro de style.css a
   propósito: el diseñador entrega su propio CSS en cada versión
   nueva, y todo lo que le metamos encima se pierde. Este archivo
   lo preserva `fusionar.mjs` y se vuelve a enlazar solo.

   Se carga DESPUÉS de style.css, así que gana sin tener que
   inventar selectores más pesados.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · LA INTRO SE VA CON UN FUNDIDO ────────────────────────────
   «se traba… y se cierra desde abajo y parece un error».
   La intro se cerraba animando `clip-path`: el borde de abajo subía
   hasta arriba, o sea que el atardecer se ENROLLABA hacia arriba y
   por debajo aparecía la página a medias. Eso es lo que se lee como
   error. Y animar clip-path a pantalla completa obliga al teléfono a
   repintar todo en cada cuadro — de ahí el trabe.
   Ahora se desvanece: opacidad, que el teléfono resuelve sin
   repintar nada. */
body.is-ready .loader{
  clip-path:inset(0 0 0 0);
  opacity:0;
  visibility:hidden;
  transition:opacity .85s ease, visibility 0s .85s;
}
/* El telón que vuelve a caer al entrar a una marca: el mismo fundido al revés. */
body.is-ready.is-saliendo .loader{
  clip-path:inset(0 0 0 0);
  opacity:1;
  visibility:visible;
  transition:opacity .45s ease;
}

/* Menos trabajo para el teléfono mientras corre el atardecer: el
   desenfoque de fondo del botón es de lo más caro que hay en móvil, y
   las capas del cielo se avisan como animadas para que el navegador
   las trate aparte. */
@media (max-width:700px){
  .loader__entrar{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(20,10,6,.42); }
  .loader__cielo::before, .loader__cielo::after, .loader__mar::before, .loader__estrellas{ will-change:opacity; }
  .loader__sol{ will-change:translate; }
  .loader__emblema{ will-change:clip-path, filter; }
}

/* ── 2 · QUE SE VEA QUE HAY MÁS PARA EL LADO ──────────────────────
   «en donde están las 4 experiencias no hay una flechita ni nada que
   indique que hay más restaurantes: se pierde Sombras y Otafuku».
   En el celular esas tarjetas son un carrusel horizontal con la barra
   de desplazamiento ESCONDIDA, así que no había ni una señal de que
   siguieran dos restaurantes más. Lo mismo pasa con las pestañas de
   la carta de la la la!.
   `js/arreglos.js` envuelve cada carrusel y le pone estas dos cosas. */
.ar-desliza{ position:relative; }
.ar-desliza__borde{
  position:absolute; z-index:5; top:0; bottom:0; right:0; width:54px;
  pointer-events:none; opacity:1; transition:opacity .35s ease;
  background:linear-gradient(90deg, rgba(246,235,216,0), var(--arena, #f6ebd8) 82%);
}
.ar-desliza--fin .ar-desliza__borde{ opacity:0; }
/* Sobre el amarillo de las pestañas de la la la!, el degradado es del amarillo. */
.ar-desliza--tabs .ar-desliza__borde{
  background:linear-gradient(90deg, rgba(247,213,107,0), #f7d56b 78%);
  border-radius:0 26px 0 0;
}
.ar-pista{
  display:inline-flex; align-items:center; gap:7px; margin:10px var(--pad) 0;
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(226,96,28,.32); background:rgba(255,248,238,.72);
  font:600 10.5px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase;
  color:var(--naranja, #e2601c);
  opacity:1; transition:opacity .4s ease;
}
.ar-pista i{ font-style:normal; animation:arDedo 1.5s ease-in-out infinite; }
@keyframes arDedo{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
.ar-pista--ida{ opacity:0; pointer-events:none; }
/* En pantalla grande no hay nada que deslizar: las cuatro caben. */
@media (min-width:701px){ .ar-pista{ display:none; } }

/* Con la tercera tarjeta asomando, el dedo entiende solo que hay más. */
@media (max-width:700px){
  .brand-item{ width:42vw; }
}

/* ── 3 · LA CARTA DE la la la! EN EL CELULAR ──────────────────────
   «no se está entendiendo bien el menú en versión celular, se ve
   corrido». Dos cosas: las pestañas de las secciones se van fuera de
   la pantalla (ahora tienen su señal, arriba), y el último plato
   quedaba tapado por la barra de reservar que vive pegada abajo. */
@media (max-width:700px){
  .lx-pizarra__cuerpo{ padding-bottom:78px; }
  .lx-platos li{ padding:13px 0; }
  .lx-platos b{ font-size:19px; }
  .lx-platos span{ font-size:13.5px; }
  /* Que el botón de la carta completa se vea como lo que es: donde
     están los precios. */
  .lx-menu__pdf{ display:flex; flex-wrap:wrap; gap:8px; }
}

/* ── 4 · LOS PRECIOS, AL LADO DE CADA PLATO ───────────────────────
   Jairo, 24-sep: «en cada plato». Salieron de la carta en PDF que
   subió ese mismo día. La lista de la página es un antojo, no la
   carta entera: los platos que no están aquí siguen en el PDF.

   El plato ya venía en una rejilla de dos columnas (la viñeta y el
   texto); el precio entra como una tercera, alineado a la derecha,
   para que la vista lo encuentre siempre en el mismo sitio. */
.lx-platos li{ grid-template-columns:auto 1fr auto; column-gap:12px; }
.lx-platos span{ grid-column:2 / -1; }
.lx-precio{
  grid-column:3; align-self:baseline; white-space:nowrap;
  font:600 13.5px/1.5 var(--f-ui); font-style:normal;
  color:var(--naranja, #e2601c); letter-spacing:.01em;
}
@media (max-width:700px){
  .lx-precio{ font-size:13px; }
  .lx-platos b{ padding-right:4px; }
}

/* ── 5 · EL PLAN DEL EMBUDO (29-sep) · ver js/arreglos.js ─────────
   La barra fija del celular, el selector de restaurante, WhatsApp,
   el precio antes del clic y el aviso de inglés. */

/* La barra fija: solo en el celular y solo en la portada. Va por
   debajo de la intro (200) y del menú del celular (99/100). */
.ar-barra{ display:none; }
@media (max-width:700px){
  .ar-barra{
    display:flex; gap:10px; align-items:center;
    position:fixed; z-index:95; left:0; right:0; bottom:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(43,23,16,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,248,238,.12);
    transform:translateY(110%); transition:transform .5s var(--out, ease);
  }
  body.is-ready .ar-barra{ transform:none; }
  body.ar-con-barra{ padding-bottom:74px; }
  .ar-barra__res{
    flex:1; min-height:48px; border:0; border-radius:999px; cursor:pointer;
    background:var(--naranja, #e2601c); color:#fff;
    font:600 13px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase;
  }
  .ar-barra__wa{
    width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:50%;
    background:#1f9d57; color:#fff;
  }
}

/* El selector: una hoja que sube desde abajo. */
.ar-hoja{ position:fixed; inset:0; z-index:210; display:flex; align-items:flex-end; justify-content:center; }
.ar-hoja[hidden]{ display:none; }
.ar-hoja__fondo{ position:absolute; inset:0; background:rgba(20,10,6,.55); opacity:0; transition:opacity .25s ease; }
.ar-hoja__caja{
  position:relative; width:min(520px,100%); max-height:88vh; overflow:auto;
  background:var(--espuma, #fff8ee); color:var(--tinta, #2b1710);
  border-radius:22px 22px 0 0; padding:22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:10px;
  transform:translateY(100%); transition:transform .3s var(--out, ease);
}
@media (min-width:701px){ .ar-hoja{ align-items:center; } .ar-hoja__caja{ border-radius:22px; } }
.ar-hoja.on .ar-hoja__fondo{ opacity:1; }
.ar-hoja.on .ar-hoja__caja{ transform:none; }
.ar-hoja__t{ margin:0 0 4px; font:italic 400 26px/1.15 var(--f-display); }
.ar-hoja__op{
  display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:2px; align-items:center;
  padding:14px 16px; border-radius:16px; text-decoration:none; color:inherit;
  background:#fff; border:1px solid rgba(43,23,16,.1);
}
.ar-hoja__op:hover, .ar-hoja__op:focus-visible{ border-color:var(--naranja, #e2601c); outline:none; }
.ar-hoja__op b{ font:600 17px/1.2 var(--f-ui); }
.ar-hoja__op span{ grid-column:1; font:400 13.5px/1.35 var(--f-ui); color:rgba(43,23,16,.68); }
.ar-hoja__op .ar-hoja__nota{ color:var(--naranja, #e2601c); font-weight:600; }
.ar-hoja__op .ar-hoja__nota:empty{ display:none; }
.ar-hoja__op i{ grid-column:2; grid-row:1 / span 3; font-style:normal; font-size:20px; color:var(--naranja, #e2601c); }
.ar-hoja__wa{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:4px;
  padding:13px; border-radius:999px; text-decoration:none;
  background:#1f9d57; color:#fff; font:600 14px/1 var(--f-ui);
}
.ar-hoja__cerrar{ border:0; background:none; padding:10px; cursor:pointer; font:500 14px/1 var(--f-ui); color:rgba(43,23,16,.6); }

/* WhatsApp en las páginas de marca: a la derecha, por encima del
   botón flotante de reservar de la marca (que va centrado abajo). */
.ar-wa{
  position:fixed; z-index:111; right:16px; bottom:84px;
  width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  background:#1f9d57; color:#fff; box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
}
@media (min-width:701px){ .ar-wa{ bottom:24px; right:24px; } }

/* El precio de lo que se paga al reservar. */
.ar-precio{ margin:8px 0 0; font:600 12.5px/1.4 var(--f-ui); color:var(--naranja, #e2601c); }
.ar-precio--cta{ color:inherit; opacity:.9; font-weight:500; }

/* La carta con salida: el botón toma el color de acento de cada marca. */
.ar-carta-res{ background:var(--acc, var(--naranja, #e2601c)); color:var(--acc-ink, #fff); border-color:transparent; }

/* ¿En inglés? */
.ar-idioma{
  position:fixed; z-index:96; left:50%; top:78px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; padding:8px 8px 8px 16px; border-radius:999px;
  background:var(--espuma, #fff8ee); color:var(--tinta, #2b1710); box-shadow:0 10px 30px -12px rgba(0,0,0,.4);
  font:500 13px/1 var(--f-ui); white-space:nowrap;
}
.ar-idioma a{ color:var(--naranja, #e2601c); font-weight:600; text-decoration:none; }
.ar-idioma button{ border:0; background:none; cursor:pointer; padding:6px 8px; color:rgba(43,23,16,.55); font-size:13px; }
@media (prefers-reduced-motion:reduce){ .ar-barra, .ar-hoja__caja, .ar-hoja__fondo{ transition:none; } }

/* ── El cotizador de eventos dentro de cada marca (30-sep, banner-eventos.mjs) ──
   Toma los colores de la marca: tinta de fondo, acento en el botón. */
.ar-ev__caja{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); border-radius:26px; overflow:hidden; background:var(--ink, #2b1710); color:var(--bg, #f6ebd8); }
.ar-ev__foto{ position:relative; min-height:340px; }
.ar-ev__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ar-ev__foto span{ position:absolute; top:16px; left:16px; padding:8px 12px; border-radius:999px; background:rgba(15,8,4,.62); color:#fff8ee; font:600 12px/1 var(--f-ui); letter-spacing:.04em; }
.ar-ev__txt{ padding:clamp(26px,4vw,52px); display:flex; flex-direction:column; gap:14px; }
.ar-ev__txt .eyebrow{ color:var(--acc, #e2601c); }
.ar-ev__t{ margin:0; font:400 clamp(30px,3.6vw,48px)/1.04 var(--f-display); letter-spacing:-.01em; text-wrap:balance; }
.ar-ev__t em{ font-style:italic; color:var(--acc, #e2601c); }
.ar-ev__txt p{ margin:0; max-width:52ch; font-size:15.5px; line-height:1.6; opacity:.82; }
.ar-ev__datos{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; }
.ar-ev__datos li{ display:flex; flex-direction:column; gap:2px; }
.ar-ev__datos b{ font:500 26px/1 var(--f-display); color:var(--acc, #e2601c); font-variant-numeric:tabular-nums; }
.ar-ev__datos span{ font:500 12.5px/1.3 var(--f-ui); opacity:.72; }
.ar-ev__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:8px; }
.ar-ev__btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 26px; border-radius:999px; background:var(--acc, #e2601c); color:var(--acc-ink, #fff8ee); font:600 15px/1 var(--f-ui); text-decoration:none; transition:transform .2s; }
.ar-ev__btn:hover{ transform:translateY(-2px); }
.ar-ev__mas{ color:inherit; font:600 14px/1.2 var(--f-ui); text-underline-offset:4px; opacity:.85; }
.ar-ev__mas:hover{ opacity:1; }
@media (max-width:760px){
  .ar-ev__caja{ grid-template-columns:1fr; }
  .ar-ev__foto{ min-height:220px; }
  .ar-ev__btn{ width:100%; }
}

/* En el atardecer de Viva: la hora de todo el año (atardecer.html). */
.ar-sol-anio{ display:block; margin-top:12px; color:inherit; font:600 13.5px/1.3 var(--f-ui); text-underline-offset:4px; opacity:.85; }


/* ══ 3-oct · LA PORTADA DE la la la!: la terraza al atardecer, y dos fotos
   que van cambiando detrás de la postal del video. Jairo: "esa es la más
   waow… pueden mostrarse ahí otras dos que vayan cambiando". ═══════════ */
.lx-hero{position:relative;isolation:isolate}
.lx-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lx-fondo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity 1.6s ease, transform 9s ease-out}
.lx-fondo__img.is-on{opacity:1;transform:scale(1)}
.lx-fondo__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,18,8,.58) 0%,rgba(26,18,8,.34) 38%,rgba(26,18,8,.62) 100%)}
.lx-hero .lx-hero__rayas{opacity:.18}
.lx-hero .mk-hero__in,.lx-hero .lx-hero__in{position:relative;z-index:2}
.lx-hero .lx-hero__nota .mk-hero__sub,.lx-hero .lx-hero__nota .lx-mano{color:#fff8ec;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.lx-hero .lx-hero__nota .btn--ink{background:#fff8ec;color:#1a1208;border-color:#fff8ec}
.lx-hero .lx-hero__nota .btn--line-ink{color:#fff8ec;border-color:rgba(255,248,236,.72)}
@media (prefers-reduced-motion:reduce){.lx-fondo__img{transition:none;transform:none}}

/* ══ 3-oct · LA MÚSICA DE la la la! ══════════════════════════════════════
   Jairo: "cuando la gente se meta en la página puedes ponerle una canción
   italiana que suene de fondo". Ningún navegador deja sonar música sola —
   la silencia y el visitante nunca entiende por qué el botón de su celular
   no la calla. Así que suena cuando ÉL la prende, con un botón que se nota.
   El botón solo aparece si el archivo de música existe. */
.lx-musica{
  position:fixed; z-index:111; left:16px; bottom:84px;
  display:flex; align-items:center; gap:0;
  height:52px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(23,20,13,.62); color:#fff8ec;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  font:600 13px/1 var(--f-ui); overflow:hidden;
  transition:background .25s ease, transform .25s ease, opacity .4s ease;
}
.lx-musica[hidden]{ display:none; }
@media (min-width:701px){ .lx-musica{ left:24px; bottom:24px; } }
.lx-musica:hover{ transform:translateY(-2px); background:rgba(23,20,13,.78); }
.lx-musica:focus-visible{ outline:2px solid #ffd76a; outline-offset:3px; }
.lx-musica__icono{ display:grid; place-items:center; width:52px; height:52px; flex:0 0 52px; font-size:19px; }
.lx-musica__txt{
  max-width:0; padding-right:0; white-space:nowrap; opacity:0;
  transition:max-width .35s ease, opacity .3s ease, padding .35s ease;
}
.lx-musica:hover .lx-musica__txt, .lx-musica:focus-visible .lx-musica__txt{ max-width:17ch; padding-right:18px; opacity:.95; }
/* El saludo "Un po' di musica?" solo se despliega donde hay sitio: en el
   celular taparía la letra a mano de la portada, así que allá el botón se
   anuncia con un latido y nada más. */
@media (min-width:701px){
  .lx-musica.is-aviso .lx-musica__txt{ max-width:17ch; padding-right:18px; opacity:.95; }
}
@media (max-width:700px){
  .lx-musica.is-aviso{ animation:lxLatido 2.2s ease-out 3; }
}
@keyframes lxLatido{
  0%{ box-shadow:0 12px 28px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(255,215,106,.55) }
  60%{ box-shadow:0 12px 28px -10px rgba(0,0,0,.45), 0 0 0 16px rgba(255,215,106,0) }
  100%{ box-shadow:0 12px 28px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(255,215,106,0) }
}
/* Suena: las tres rayitas se mueven como un ecualizador. */
.lx-musica.is-on{ background:rgba(226,96,28,.86); }
/* Apagada: una nota. Sonando: el ecualizador. */
.lx-musica__nota{ font-size:20px; line-height:1; }
.lx-musica.is-on .lx-musica__nota{ display:none; }
.lx-musica__barras{ display:none; align-items:flex-end; gap:2.5px; height:15px; }
.lx-musica.is-on .lx-musica__barras{ display:flex; }
.lx-musica__barras i{ display:block; width:3px; height:5px; border-radius:2px; background:currentColor; }
.lx-musica.is-on .lx-musica__barras i{ animation:lxEq .9s ease-in-out infinite; }
.lx-musica.is-on .lx-musica__barras i:nth-child(2){ animation-delay:.18s; }
.lx-musica.is-on .lx-musica__barras i:nth-child(3){ animation-delay:.36s; }
@keyframes lxEq{ 0%,100%{ height:5px } 50%{ height:15px } }
@media (prefers-reduced-motion:reduce){
  .lx-musica, .lx-musica__txt{ transition:none; }
  .lx-musica.is-aviso{ animation:none; }
  .lx-musica.is-on .lx-musica__barras i{ animation:none; height:11px; }
}

/* ── La Cofradía Gourmand en Cartagena (4-oct, banner-cofradia.mjs) ──
   Los colores son los de la Cofradía (noche y oro), no los de la marca: es la
   misma membresía en las tres ciudades y tiene que reconocerse igual. */
.ar-cof{ --cof-noche:#14100b; --cof-oro:#e7c98a; --cof-oro2:#c9a25e; --cof-crema:#f4ecdc; }
.ar-cof--inicio{ padding:clamp(48px,7vw,96px) 0 clamp(24px,4vw,48px); }
.ar-cof__caja{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); border-radius:26px; overflow:hidden; background:var(--cof-noche); color:var(--cof-crema); box-shadow:0 30px 60px -36px rgba(20,16,11,.55); }
.ar-cof__foto{ position:relative; min-height:420px; overflow:hidden; }
.ar-cof__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.6s cubic-bezier(.2,.7,.2,1); }
.ar-cof__caja:hover .ar-cof__foto img{ transform:scale(1.09); }
.ar-cof__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,11,0) 40%, rgba(20,16,11,.55) 100%), linear-gradient(90deg, rgba(20,16,11,0) 70%, rgba(20,16,11,.35) 100%); }
/* La tarjeta del Pasaporte: la misma del home de serattagroup.com, en chico. */
.ar-cof__tarjeta{ position:absolute; z-index:1; left:clamp(18px,3vw,32px); bottom:clamp(18px,3vw,32px); width:min(250px,68%); aspect-ratio:1.586; padding:14px 16px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; border-radius:14px; color:#f2efe6;
  background:radial-gradient(120% 90% at 0% 0%, rgba(231,201,138,.22), transparent 55%), linear-gradient(140deg,#1d1710 0%,#0d0a07 100%);
  border:1px solid rgba(231,201,138,.38); box-shadow:0 18px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,244,217,.12);
  transform:rotate(-4deg); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.ar-cof__caja:hover .ar-cof__tarjeta{ transform:rotate(-1.5deg) translateY(-4px); }
.ar-cof__k1, .ar-cof__k3{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ar-cof__k1 small{ font:600 7.5px/1 var(--f-ui); letter-spacing:.26em; text-transform:uppercase; color:rgba(242,239,230,.62); white-space:nowrap; }
.ar-cof__brujula{ width:26px; height:26px; flex:none; }
.ar-cof__aguja{ transform-origin:16px 16px; animation:arCofAguja 7s ease-in-out infinite; }
@keyframes arCofAguja{ 0%,100%{ transform:rotate(-14deg); } 50%{ transform:rotate(16deg); } }
.ar-cof__nombre{ font:400 23px/1 var(--f-display); letter-spacing:.01em; }
.ar-cof__nombre em{ font-style:italic; color:var(--cof-oro); }
.ar-cof__k3 span{ font:600 8px/1 var(--f-ui); letter-spacing:.22em; text-transform:uppercase; color:rgba(242,239,230,.7); white-space:nowrap; }
.ar-cof__k3 span:first-child{ color:var(--cof-oro); }
.ar-cof__txt{ padding:clamp(28px,4.2vw,56px); display:flex; flex-direction:column; gap:16px; }
.ar-cof__eyebrow{ font:600 12px/1 var(--f-ui); letter-spacing:.22em; text-transform:uppercase; color:var(--cof-oro); }
.ar-cof__t{ margin:0; font:400 clamp(32px,3.8vw,52px)/1.02 var(--f-display); letter-spacing:-.01em; text-wrap:balance; color:var(--cof-crema); }
.ar-cof__t em{ font-style:italic; color:var(--cof-oro); }
.ar-cof__txt > p{ margin:0; max-width:46ch; font-size:15.5px; line-height:1.6; opacity:.8; }
.ar-cof__lista{ list-style:none; margin:4px 0 0; padding:18px 0 0; border-top:1px solid rgba(231,201,138,.2); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; }
.ar-cof__lista li{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ar-cof__lista b{ font:400 30px/1 var(--f-display); color:var(--cof-oro); font-variant-numeric:tabular-nums; }
.ar-cof__lista span{ font:500 13px/1.35 var(--f-ui); opacity:.75; }
.ar-cof__txt > .ar-cof__precio{ margin:6px 0 0; font:500 14px/1.5 var(--f-ui); opacity:.9; }
.ar-cof__precio b{ color:var(--cof-crema); font-weight:700; font-variant-numeric:tabular-nums; }
.ar-cof__precio em{ font-style:normal; color:var(--cof-oro); }
.ar-cof__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.ar-cof__btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 26px; border-radius:999px; color:#1a1206; font:700 15px/1 var(--f-ui); text-decoration:none;
  background:linear-gradient(135deg,#fce6b7 0%,#c9a25e 55%,#f3d9a0 100%); background-size:200% 100%; box-shadow:0 10px 24px -12px rgba(231,201,138,.7); transition:transform .2s, background-position .6s; }
.ar-cof__btn:hover{ transform:translateY(-2px); background-position:100% 0; }
.ar-cof__mas{ color:var(--cof-oro); font:600 14px/1.2 var(--f-ui); text-decoration:underline; text-decoration-color:rgba(231,201,138,.4); text-underline-offset:4px; }
.ar-cof__mas:hover{ text-decoration-color:currentColor; }
.ar-cof__letra{ font:500 11.5px/1.4 var(--f-ui); opacity:.5; }
@media (max-width:760px){
  .ar-cof__caja{ grid-template-columns:1fr; }
  .ar-cof__foto{ min-height:300px; }
  .ar-cof__foto img{ object-position:var(--pos, 50% 40%); }
  .ar-cof__tarjeta{ width:min(196px,56%); padding:11px 13px; border-radius:11px; }
  .ar-cof__nombre{ font-size:18px; }
  .ar-cof__btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .ar-cof__aguja{ animation:none; }
  .ar-cof__foto img, .ar-cof__tarjeta{ transition:none; }
}

/* ══ 3-oct · LA HORA DEL ATARDECER, EN LA PORTADA ═══════════════════════════
   Jairo: «lo de "hoy se pone a las xx, falta tanto tiempo" en el home, eso es
   cool». La calcula js/atardecer.js (el mismo de atardecer.html) con la
   astronomía de Getsemaní y la hora de Colombia, y se repinta cada 30 s. */
.ar-sol-hoy{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin:12px 0 0;
  font:600 13.5px/1.35 var(--f-ui); color:#fff8ec; text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.ar-sol-hoy::before{
  content:''; width:9px; height:9px; border-radius:50%; flex:0 0 9px;
  background:#ffcf5c; box-shadow:0 0 0 4px rgba(255,207,92,.22);
}
.ar-sol-hoy b{ font-weight:700; }
.ar-sol-hoy span{ opacity:.82; font-weight:500; }
/* La cuenta regresiva en su propia línea: al lado del reloj se partía fea. */
@media (max-width:700px){ .ar-sol-hoy span, .ar-sol-hoy a{ flex:1 0 100%; } }
.ar-sol-hoy a{
  color:#ffcf5c; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,207,92,.45);
  padding-bottom:1px;
}
.ar-sol-hoy a:hover{ border-bottom-color:#ffcf5c; }
@media (max-width:700px){ .ar-sol-hoy{ font-size:12.5px; margin-top:10px; } }