/* =====================================================================
   Faros de los Arroyos — estilos del sitio
   Paleta tomada del MANUAL DE MARCA (assets/RECURSOS.pdf):
     · Oro   #FBD101   · Tinta #231F20   · Plata #BDBFC1
   Titulares: Sora · Texto: DM Sans (ambas auto-hospedadas, ver @font-face abajo).
   NOTA: la fuente de marca es Cocogoose Pro, pero la versión *trial* mete una
   marca de agua en los números/glifos ("TRIAL ONLY · ZETAFONTS.COM") → no es
   usable. Cuando se licencie, agregar los @font-face de Cocogoose y apuntar la
   variable --head a ella. Ver CLAUDE.md.
   ===================================================================== */

/* ─── Fuentes auto-hospedadas (woff2, subset latin, font-display:swap) ───
   Titulares: Sora · Texto: DM Sans. Al licenciar Cocogoose Pro, agregar sus
   @font-face y apuntar --head a ella (swap de una línea). Ver CLAUDE.md. */
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Sora-700.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Sora-800.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/DMSans-300.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/DMSans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/DMSans-500.woff2') format('woff2')}

:root {
  /* ─── Color de marca ──────────────────────────────────────── */
  --gold:       #FBD101;
  --gold-dim:   rgba(251, 209, 1, 0.18);
  --gold-glow:  rgba(251, 209, 1, 0.08);
  --ink:        #231F20;                    /* negro cálido del logo */
  --bg:         #0C0C12;                    /* noche del sitio */
  --bg-soft:    #14141d;
  --cream:      #EDE8DC;                    /* texto cálido legible */
  --cream-dim:  rgba(237, 232, 220, 0.55);
  --line:       rgba(251, 209, 1, 0.14);
  --wa:         #25D366;                    /* verde WhatsApp (reconocibilidad) */

  /* ─── Rampa metálica (plata) — identidad "metalizado" ─────── */
  --silver:     #BDBFC1;                    /* plata de marca */
  --silver-dim: rgba(189, 191, 193, 0.45);
  --silver-100: #E9EBED;
  --silver-300: #BDBFC1;
  --silver-500: #8A8D90;
  --silver-700: #54575A;
  --sheen-chrome: linear-gradient(120deg, var(--silver-100), var(--silver-500) 45%, var(--silver-100));
  --sheen-gold:   linear-gradient(120deg, #FFF6C8, var(--gold) 45%, #A97E00);

  /* ─── Tipografía ──────────────────────────────────────────── */
  --head:  'Sora', system-ui, sans-serif;
  --body:  'DM Sans', system-ui, sans-serif;
  --mono:  'Consolas', ui-monospace, 'Courier New', monospace;
  --fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2.1rem, 5vw, 3.4rem);
  --fs-h2:      clamp(1.75rem, 4vw, 2.75rem);
  --fs-h3:      clamp(1.15rem, 2vw, 1.4rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.8125rem;
  --fs-eyebrow: 0.7rem;

  /* ─── Espaciado (base 4px) ────────────────────────────────── */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;

  /* ─── Radios / sombras / transición ───────────────────────── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 100px;
  --e1: 0 4px 14px rgba(0,0,0,.4);
  --e2: 0 14px 40px rgba(0,0,0,.5);
  --glow-gold: 0 0 28px rgba(251,209,1,.35);
  --tr: .25s ease;

  --maxw: 1200px;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* Foco visible accesible en cualquier interactivo (tema oscuro custom). */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* Skip-link: invisible hasta recibir foco por teclado. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink); text-decoration: none;
  font-family: var(--head); font-weight: 600; font-size: .82rem;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ─── Capas de fondo reutilizables (faro) ─────────────────────────── */
.bg-grid, .bg-grid::before, .bg-grid::after {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: 480px 320px;
  background-repeat: repeat;
}
.bg-grid::before, .bg-grid::after { content: ''; }
.bg-grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cpath d='M0,40 C30,26 30,26 60,40 C90,54 90,54 120,40 C150,26 150,26 180,40 C210,54 210,54 240,40 C270,26 270,26 300,40 C330,54 330,54 360,40' fill='none' stroke='%23FBD101' stroke-opacity='0.04' stroke-width='1.4'/%3E%3C/svg%3E");
  animation: bg-drift 100s linear infinite;
}
.bg-grid::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cpath d='M0,120 C30,106 30,106 60,120 C90,134 90,134 120,120 C150,106 150,106 180,120 C210,134 210,134 240,120 C270,106 270,106 300,120 C330,134 330,134 360,120' fill='none' stroke='%23FBD101' stroke-opacity='0.04' stroke-width='1.4'/%3E%3C/svg%3E");
  animation: bg-drift 65s linear infinite reverse;
}
.bg-grid::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cpath d='M0,200 C30,186 30,186 60,200 C90,214 90,214 120,200 C150,186 150,186 180,200 C210,214 210,214 240,200 C270,186 270,186 300,200 C330,214 330,214 360,200' fill='none' stroke='%23FBD101' stroke-opacity='0.04' stroke-width='1.4'/%3E%3C/svg%3E");
  animation: bg-drift 150s linear infinite;
}
@keyframes bg-drift {
  from { background-position: 0 0; }
  to   { background-position: 480px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-grid, .bg-grid::before, .bg-grid::after { animation: none; }
}
.bg-glow {
  position: fixed; top: -10%; left: 50%; transform: translateX(-50%);
  width: 760px; height: 760px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(251,209,1,.10) 0%, rgba(251,209,1,.03) 42%, transparent 70%);
}
.bg-spot { /* spotlight dorado que sigue el cursor (lo crea site.js) */
  position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;
  width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(251,209,1,.075) 0%, rgba(251,209,1,.025) 45%, transparent 70%);
  mix-blend-mode: screen; will-change: transform;
  opacity: 0; transition: opacity .5s ease;
}
.bg-spot.on { opacity: 1; }
body::after { /* grano de película */
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") repeat;
}
@media (pointer: coarse) { /* mix-blend fullscreen es caro en mobile */
  body::after { display: none; }
}

/* ─── Layout base ─────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
main { position: relative; z-index: 10; }
section { padding: 4.5rem 0; }
.section-divider { border-top: 1px solid var(--line); }
.section-divider:nth-of-type(even) { background: var(--bg); }

.section-head { margin-bottom: var(--space-6); }
.section-cta { margin-top: var(--space-6); }
.section-head--center { text-align: center; }
.section-head--center .rule { margin-left: auto; margin-right: auto; }
.eyebrow {
  font-family: var(--head); font-size: var(--fs-eyebrow); letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .9rem;
}
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.14; letter-spacing: -.01em; }
.section-title { font-size: var(--fs-h2); color: var(--cream); margin-bottom: .6rem; }
.section-sub { color: var(--cream-dim); max-width: 60ch; }
.rule { width: 64px; height: 2px; background: linear-gradient(to right, var(--gold), transparent); margin: 1.4rem 0; }
.lead { color: var(--cream); font-size: 1.06rem; line-height: 1.7; max-width: 64ch; }

/* ─── Header / navegación ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,12,18,.78); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-logo { position: relative; display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; overflow: hidden; }
.brand-mark {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 78px; height: 26px; color: var(--gold); overflow: visible; z-index: 0;
}
.brand-mark .nav-beam {
  transform-origin: 108px 22px;
  animation: nav-beam-sweep 9s ease-in-out infinite;
}
@keyframes nav-beam-sweep {
  0%, 75%  { transform: rotate(0deg); }
  100%     { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark .nav-beam { animation: none; }
}
/* Faros alterna color cada vez que el haz pasa por arriba (cada barrido,
   en el punto medio de cada ciclo de 9s de nav-beam-sweep: 7.875s y 16.875s). */
.brand-faros { animation: brand-faros-color 18s linear infinite; }
@keyframes brand-faros-color {
  0%, 43.65%     { color: var(--gold); }
  43.75%, 93.65% { color: var(--cream); }
  93.75%, 100%   { color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-faros { animation: none; }
}
.brand-text {
  position: relative; z-index: 1; margin-left: calc(78px + .6rem);
  font-family: var(--head); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--cream-dim);
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  transition: color .25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
/* Estado activo perceptible más allá del color (a11y): subrayado dorado. */
.nav-links a.active > span { box-shadow: 0 2px 0 var(--gold); }
.nav-links .nav-wa { color: var(--wa); }
.nav-links a > span {
  position: relative; z-index: 1; background: var(--bg);
  padding: 0 .03em; border-radius: 3px;
}
/* Anillo de los links de la nav: la rueda de trazos radiales (SVG con <use>).
   Cada trazo nace desplazado 55px hacia afuera en su propia dirección radial
   y converge al centro con fade-in al hover/focus (rotate(--a) + translateX
   reemplazan al transform de atributo del <use>). */
.nav-link-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3.6em; height: 3.6em; z-index: 0; pointer-events: none;
}
.nav-link-ring .ri-spin { stroke-width: 3.4; }
.rueda-intermitente.nav-link-ring .ri-base {
  opacity: 0;
  transform: rotate(var(--a)) translateX(55px);
  transform-origin: 150px 150px;
  transition: transform .26s ease-in, opacity .26s ease-in;
}
.nav-link-ring.is-active .ri-base {
  opacity: .42;
  transform: rotate(var(--a));
  transition: transform .32s ease-out, opacity .32s ease-out;
}
.nav-toggle { display: none; background: none; border: 0; color: var(--gold); font-size: 1.5rem; cursor: pointer; }

/* Selector de idioma (ES / EN). Va sin anillo a propósito: es un control de
   la interfaz, no un destino más de la navegación, y el anillo lo pondría
   al mismo peso visual que Catálogo o Contacto. El idioma activo se marca
   con el mismo subrayado dorado que el link activo de la nav — color solo
   no alcanza para distinguirlo (a11y). */
.nav-lang { display: flex; align-items: center; gap: .3rem; }
.nav-links .lang-link {
  font-size: .74rem; letter-spacing: .1em; padding: 0 .1rem;
}
.nav-links .lang-link.is-on { color: var(--gold); box-shadow: 0 2px 0 var(--gold); }
.lang-sep { color: var(--cream-dim); opacity: .45; font-size: .7rem; }

/* ─── Botones ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.6rem; border: 1px solid var(--gold); border-radius: var(--r-sm);
  color: var(--gold); text-decoration: none; cursor: pointer;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
  background: transparent; transition: background var(--tr), color var(--tr), box-shadow var(--tr);
}
.btn:hover { background: var(--gold); color: var(--ink); box-shadow: var(--glow-gold); }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn-solid { background: var(--gold); color: var(--ink); }
.btn-solid:hover { box-shadow: 0 0 28px rgba(251,209,1,.45); }
.btn-wa { border-color: var(--wa); color: var(--wa); }
.btn-wa:hover { background: var(--wa); color: #04210f; box-shadow: 0 0 24px rgba(37,211,102,.4); }

/* ─── Hero (home) ─────────────────────────────────────────────────── */
.hero {
  --ring: min(640px, 96vw);
  position: relative; text-align: center;
  padding: clamp(3rem, 9vh, 6rem) 0 4rem;
  min-height: calc(var(--ring) + clamp(0px, 4vh, 40px) + 2rem);
  overflow: hidden;
}
.hero-video-bg {
  /* El poster (assets/img/hero-poster.jpg = primer frame del loop) sobre un
     gradiente de marca es el FALLBACK visible cuando el video no reproduce:
     autoplay bloqueado (Low Power iOS, Data Saver, navegador in-app de
     Instagram/Facebook), prefers-reduced-motion, red lenta/2G o JS caído.
     Así el hero nunca queda en negro liso. */
  position: absolute; inset: 0; overflow: hidden;
  background:
    url('../img/hero-poster.jpg') center / cover no-repeat,
    radial-gradient(120% 90% at 50% 0%, rgba(251,209,1,.10), transparent 60%),
    var(--bg);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease;
}
/* Al reproducir cubre el poster por completo; el atenuado lo da .hero-video-overlay. */
.hero-video.is-active { opacity: 1; }
.hero-video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,18,.4), rgba(12,12,18,.7));
}
.hero-burst {
  position: absolute; top: clamp(0px, 4vh, 40px); left: 50%; transform: translateX(-50%);
  width: var(--ring); height: var(--ring); opacity: .32; pointer-events: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-brand { position: relative; width: min(460px, 84vw); margin: 0 auto 1.8rem; }
.hero-logo { /* SVG de marca inlineado: isotipo oro (var(--gold)) + texto crema */
  display: block; width: 100%; height: auto;
  color: var(--cream);
  filter: drop-shadow(0 10px 34px rgba(251,209,1,.16));
}
.brand-sheen { /* barrido especular periódico, recortado a la forma del logo */
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url('../img/logo.svg') center / contain no-repeat;
          mask: url('../img/logo.svg') center / contain no-repeat;
}
.brand-sheen i {
  position: absolute; top: -15%; bottom: -15%; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(233,235,237,.4) 50%, transparent);
  transform: translateX(-220%) skewX(-16deg);
  animation: brand-sheen 8s ease-in-out infinite;
}
@keyframes brand-sheen {
  0%, 58%   { transform: translateX(-220%) skewX(-16deg); }
  82%, 100% { transform: translateX(560%) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-sheen i { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* No animamos video, pero conservamos el backdrop del .hero-video-bg
     (antes se ocultaba todo y el hero quedaba en negro). */
  .hero-video { display: none; }
}
.hero-logo #haz { animation: haz-breathe 6s ease-in-out infinite; }
@keyframes haz-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo #haz { animation: none; }
}
.hero h1 {
  font-size: clamp(1.7rem, 5vw, 3.1rem); color: var(--gold);
  text-shadow: 0 0 24px rgba(251,209,1,.3); letter-spacing: 0;
}
.hero p { color: rgba(237,232,220,.85); max-width: 54ch; margin: 1.2rem auto 2rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* Ubicación bajo la tagline: dato de decisión para un taller físico.
   Con .hero p delante para ganarle en especificidad a la regla genérica. */
.hero p.hero-loc {
  color: var(--cream-dim); font-family: var(--head); font-weight: 600;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  margin: -1.2rem auto 2rem;
}
/* Camino directo al trabajo real desde el primer viewport (link terciario:
   dos botones + un link es jerarquía, tres botones sería ruido). */
.hero-link {
  display: inline-block; margin-top: 1.4rem;
  color: var(--cream-dim); text-decoration: none; font-size: .85rem;
  border-bottom: 1px solid transparent;
  transition: color var(--tr), border-color var(--tr);
}
.hero-link:hover, .hero-link:focus-visible { color: var(--gold); border-color: var(--gold-dim); }

/* ─── Tira de métricas / confianza ────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 .5rem; }
.stat {
  flex: 1 1 150px; min-width: 130px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 8px; background: rgba(255, 255, 255, .02); padding: .7rem .9rem;
}
.stat b {
  display: block; font-family: var(--head); font-weight: 700; color: var(--gold);
  font-size: clamp(1.3rem, 3.2vw, 1.75rem); line-height: 1.1; letter-spacing: -.01em;
  /* El valor es editable desde el panel (texto plano, sin &nbsp;): si en un
     teléfono angosto entra en dos líneas, que queden parejas. */
  text-wrap: balance;
}
.stat span { display: block; color: var(--cream-dim); font-size: .8rem; letter-spacing: .02em; margin-top: .2rem; }

/* ─── Layout a dos columnas (teasers) ─────────────────────────────── */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.split-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.split-media img, .split-media .rueda-intermitente { width: min(360px, 80%); height: min(360px, 80%); opacity: .9; }

/* ─── Timeline (trayectoria Gidan → Faros) ────────────────────────── */
.split--top { align-items: start; }
.timeline { list-style: none; position: relative; padding-left: var(--space-6); }
.timeline::before { /* eje vertical: haz de luz que se apaga hacia el pasado */
  content: ''; position: absolute; top: 6px; bottom: 6px; left: 4px; width: 1px;
  background: linear-gradient(to bottom, var(--line), var(--gold-dim) 65%, var(--gold));
}
.timeline-item { position: relative; padding-bottom: var(--space-5); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { /* nodo */
  content: ''; position: absolute; top: 7px; left: calc(var(--space-6) * -1);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--silver-500); box-shadow: 0 0 0 3px var(--bg-soft);
}
.timeline-item:last-child::before { background: var(--gold); box-shadow: 0 0 12px rgba(251,209,1,.55); }
.timeline-item b {
  display: block; font-family: var(--head); font-weight: 700;
  color: var(--cream); font-size: .95rem; letter-spacing: .02em;
}
.timeline-item span { display: block; color: var(--cream-dim); font-size: .88rem; line-height: 1.6; margin-top: .2rem; }
.timeline-item span strong { color: var(--cream); font-weight: 500; }
/* Cross-link del hito hacia el bloque proceso de #servicios. */
.hito-link { color: rgba(251,209,1,.72); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--tr), border-color var(--tr); }
.hito-link::after { content: ' →'; }
.hito-link:hover, .hito-link:focus-visible { color: var(--gold); border-color: var(--gold-dim); }

/* ─── Rueda intermitente (anillo de trazos, reutilizable, ver hero/Nosotros) */
.hero-burst svg, .split-media svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rueda-intermitente .ri-spin { transform-origin: 150px 150px; animation: ri-spin 90s linear infinite; }
@keyframes ri-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rueda-intermitente .ri-base { stroke: var(--gold); opacity: .22; }
.rueda-intermitente .ri-chase {
  stroke: var(--gold); opacity: 0;
  animation: ri-chase 8s linear infinite;
  animation-delay: calc(var(--i) * (8s / var(--n)));
}
@keyframes ri-chase {
  0%   { opacity: .5; }
  10%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rueda-intermitente .ri-chase, .rueda-intermitente .ri-spin { animation: none; }
}

/* ─── Fondo de aros en #servicios: decoran sin resaltar. Estáticos por
   defecto; site.js los gira con el scroll y bajo el cursor. ─────────── */
.has-ring-bg { position: relative; overflow: hidden; }
.has-ring-bg > .wrap { position: relative; z-index: 1; }
.ring-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ring-bg-item {
  position: absolute;
  width: var(--size, 200px); height: var(--size, 200px);
  transform: translate(-50%, -50%) rotate(var(--rot0, 0deg));
  opacity: var(--op, .07);
  transition: opacity .8s ease;
}
.ring-bg-item.is-hover { opacity: calc(var(--op, .07) * 1.8); }
.ring-bg-item .rueda-intermitente { display: block; width: 100%; height: 100%; }
.ring-bg-item .ri-spin { animation: none; } /* el giro lo maneja site.js */
.ring-bg-item .ri-base { opacity: 1; }      /* la transparencia vive en el item */
@media (max-width: 720px) {
  .ring-bg-item.ring-desktop { display: none; }
  /* La grilla de destacados es solo desktop, pero el título y el botón
     "Ver catálogo completo" siguen visibles: el camino al catálogo no
     desaparece del one-pager en mobile. */
  #destacados .grid { display: none; }
}

/* Aro por card de Qué hacemos: centrado en un vértice y recortado por la
   card (overflow hidden) → siempre se ve 1/4 del anillo, llegando hasta la
   mitad. Gira con el scroll y bajo hover de la card (site.js). */
.feature-ring {
  position: absolute; width: 100%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(var(--rot0, 0deg));
  opacity: .18; transition: opacity .8s ease;
  pointer-events: none;
}
.feature-ring.corner-tl { top: 0;    left: 0;    }
.feature-ring.corner-tr { top: 0;    left: 100%; }
.feature-ring.corner-bl { top: 100%; left: 0;    }
.feature-ring.corner-br { top: 100%; left: 100%; }
.feature:hover .feature-ring { opacity: .22; }
.feature-ring .rueda-intermitente { display: block; width: 100%; height: 100%; }
.feature-ring .ri-spin { animation: none; } /* el giro lo maneja site.js */
/* Plata metalizada en reposo; se enciende a oro con el hover de la card. */
.feature-ring .ri-base { opacity: 1; stroke: var(--silver); transition: stroke .45s ease; }
.feature:hover .feature-ring .ri-base { stroke: var(--gold); }
.feature > :not(.feature-ring) { position: relative; z-index: 1; }

/* ─── Reveals por luz al scroll (clase puesta por JS; sin JS no existe) ─ */
.reveal {
  transition: opacity .6s ease var(--rv-d, 0ms), transform .6s ease var(--rv-d, 0ms);
}
.reveal:not(.in) { opacity: 0; transform: translateY(16px); }
/* Sheen metálico one-shot sobre el titular cuando su bloque se revela. */
.section-head.reveal.in .section-title {
  background: linear-gradient(100deg, var(--cream) 38%, #fff 50%, var(--cream) 62%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: title-sheen 1.2s ease .15s both;
}
@keyframes title-sheen {
  from { background-position: 115% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal:not(.in) { opacity: 1; transform: none; transition: none; }
  .section-head.reveal.in .section-title { animation: none; }
}

/* ─── Servicios / features ────────────────────────────────────────── */
.feature-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.feature {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-6); position: relative; overflow: hidden;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.feature::before { /* barra de acento metálica (oro especular) */
  content: ''; position: absolute; top: 0; left: 0; width: 38px; height: 3px; background: var(--sheen-gold);
}
.feature:hover { transform: translateY(-4px); border-color: var(--gold-dim); box-shadow: var(--e2); }
.feature-num { font-family: var(--head); font-weight: 700; color: var(--gold); font-size: .82rem; letter-spacing: .14em; }
.feature h3 { font-weight: 700; color: var(--cream); font-size: 1.12rem; margin: .55rem 0 .5rem; }
.feature p { color: var(--cream-dim); font-size: .92rem; line-height: 1.65; }

/* Foto del servicio: sangra hasta los bordes de la card (compensa el padding)
   y se funde abajo con el fondo vía viñeta. La barra dorada del ::before pasa
   POR ENCIMA de la foto como firma de marca. Los aros de las cards usan solo
   vértices inferiores para no quedar tapados por la foto (ver index.php). */
.feature::before { z-index: 2; }
.feature-media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  /* misma base metálica que .card-media: unifica fotos de estudio y de taller */
  background: radial-gradient(120% 90% at 50% 0%, #20222a 0%, #0a0a10 72%);
}
.feature-media img, .feature-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.9) saturate(.94);
  transition: filter var(--tr), transform .6s ease;
}
.feature:hover .feature-media img, .feature:hover .feature-media video { filter: brightness(1) saturate(1.06); transform: scale(1.03); }
.feature-media::after { /* viñeta: funde la foto con la card */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,16,.18), transparent 40%, rgba(20,20,29,.8) 97%);
}
@media (prefers-reduced-motion: reduce) {
  .feature:hover .feature-media img, .feature:hover .feature-media video { transform: none; }
}

/* ─── Carrusel de trabajo real en las cards de Qué hacemos ──────────
   Crossfade entre fotos, comparadores antes/después arrastrables y loops
   de video mudos, con puntos y rótulo por pieza. Navegable a mano por
   swipe/arrastre (pan-y respeta el scroll vertical). Sin JS queda el
   primer slide fijo (el video nunca va primero). */
.feature-media--slides { cursor: grab; touch-action: pan-y pinch-zoom; }
.feature-media--slides:active { cursor: grabbing; }
.feature-media--slides .slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .7s ease, filter var(--tr), transform .6s ease;
  /* Solo el slide activo recibe gestos: los tapados no roban el drag
     del comparador ni el swipe. */
  pointer-events: none;
}
.feature-media--slides .slide.is-on { opacity: 1; pointer-events: auto; }
/* El paso antes→después se saborea: crossfade largo cuando entra el
   "después" (clase puesta por site.js). El fundido ES la transformación. */
.feature-media--slides.is-slow .slide { transition-duration: 1.1s; }
/* Producto de estudio con proporción extrema (paragolpes 2.5–3.5:1,
   brazos 1:1): la pieza ENTERA sobre campo blanco, no un recorte cover. */
.feature-media--slides img.slide--contain {
  object-fit: contain; background: #fff; padding: 4% 5%;
}
/* Sobre slides de fondo blanco (producto / comparador) la viñeta fuerte
   ensucia: fundido mínimo al pie. is-light la pone PHP en el primer slide
   y site.js al navegar. */
.feature-media--slides.is-light::after {
  background: linear-gradient(180deg, transparent 74%, rgba(20,20,29,.55) 98%);
}

/* Comparador antes/después como slide del carrusel (drag con Pointer
   Events; el <input range> oculto aporta teclado y lectores de pantalla). */
.slide-ba .ba-frame {
  --pos: 50%;
  position: absolute; inset: 0; cursor: ew-resize;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.ba-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
/* Los slides claros no llevan el filtro de brillo (el campo "blanco"
   quedaba gris y flasheaba en hover); el zoom de hover tampoco va en las
   .ba-img: escalaría el clip pero no la manija, y la costura se corre. */
.feature .feature-media--slides img.slide--contain { filter: none; }
.feature .feature-media--slides img.ba-img { filter: none; transform: none; }
.ba-top { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  margin-left: -1px; background: var(--gold);
  box-shadow: 0 0 14px rgba(251,209,1,.55); pointer-events: none;
}
.ba-handle::after { /* empuñadura */
  content: '‹ ›'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,18,.82); border: 1px solid var(--gold);
  color: var(--gold); font-family: var(--head); font-weight: 700;
  font-size: .72rem; letter-spacing: .05em; line-height: 1;
}
.ba-tag {
  position: absolute; top: .6rem; z-index: 2; pointer-events: none;
  font-family: var(--head); font-weight: 600; font-size: .55rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 3px;
}
.ba-tag-a { left: .6rem; background: rgba(12,12,18,.72); color: var(--silver); border: 1px solid rgba(189,191,193,.35); }
.ba-tag-d { right: .6rem; background: rgba(251,209,1,.92); color: var(--ink); }
.ba-range { /* oculto pero enfocable: ← → mueven la línea */
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip-path: inset(50%);
}
/* En slides tapados el range no debe ser tabulable. */
.feature-media--slides .slide:not(.is-on) .ba-range { visibility: hidden; }
.slide-ba:focus-within .ba-frame { outline: 2px solid var(--gold); outline-offset: -3px; }
.slide-tag {
  position: absolute; left: .6rem; bottom: .55rem; z-index: 2; pointer-events: none;
  font-family: var(--head); font-weight: 600; font-size: .55rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 3px;
  background: rgba(12,12,18,.72); color: var(--silver);
  border: 1px solid rgba(189,191,193,.35);
}
/* Código cromático de marca: "antes" en plata, "después" en oro. */
.slide-tag.is-gold { background: rgba(251,209,1,.92); color: var(--ink); border-color: transparent; }
.slide-dots { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; display: flex; gap: .45rem; }
.slide-dots button {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--silver-dim); background: rgba(12,12,18,.55);
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.slide-dots button:hover { border-color: var(--silver); }
.slide-dots button.is-on { background: var(--gold); border-color: var(--gold); transform: scale(1.2); }
/* Punto de video: anillo hueco — anticipa qué slide es video y cuál foto. */
.slide-dots button.is-video { background: transparent; }
.slide-dots button.is-video.is-on { background: transparent; border-color: var(--gold); box-shadow: 0 0 6px rgba(251,209,1,.5); }
@media (max-width: 720px) {
  /* Cards de hasta 5 slides a 92vw: puntos un toque más chicos. */
  .slide-dots { gap: .4rem; }
  .slide-dots button { width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-media--slides .slide { transition: none; }
}

/* ─── Proceso del metalizado (pasos numerados con hilo dorado) ────── */
.section-intro { margin: calc(var(--space-5) * -1) 0 var(--space-6); }
/* scroll-margin: al llegar por #proceso (hito de Nosotros), que el título
   no quede tapado por el header sticky de 64px. */
.process { margin-top: var(--space-8); scroll-margin-top: 84px; }
.process-title { color: var(--cream); font-size: var(--fs-h3); margin-bottom: var(--space-5); }
.process-steps {
  list-style: none; counter-reset: paso;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.process-step { position: relative; padding-top: var(--space-5); }
.process-step::before { /* hilo que une los pasos */
  content: ''; position: absolute; top: 6px; left: 14px; right: calc(var(--space-5) * -1);
  height: 1px; background: linear-gradient(to right, var(--gold-dim), var(--line));
}
.process-step:last-child::before { right: 0; }
.process-step::after { /* nodo del hilo */
  content: ''; position: absolute; top: 2px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px rgba(251,209,1,.5);
}
.process-num {
  display: block; font-family: var(--head); font-weight: 700;
  color: var(--gold); font-size: var(--fs-small); letter-spacing: .14em;
}
.process-step b {
  display: block; font-family: var(--head); font-weight: 600;
  color: var(--cream); font-size: .98rem; margin: .3rem 0 .35rem;
}
.process-desc { display: block; color: var(--cream-dim); font-size: .85rem; line-height: 1.55; }

/* Split del proceso: video real del taller (click-to-play, preload=none) o
   póster estático si el .mp4 no está en el server, junto a los pasos. */
.process-body {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--space-6); align-items: center;
}
.process-media {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--bg-soft); box-shadow: var(--e1);
}
.process-chip { /* costo del click a la vista: pasos, duración, sin audio */
  position: absolute; left: .7rem; top: .6rem; pointer-events: none;
  font-family: var(--head); font-weight: 600; font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .24rem .55rem; border-radius: 3px;
  background: rgba(12,12,18,.72); color: var(--silver);
  border: 1px solid rgba(189,191,193,.35);
}
.process-media video, .process-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
@media (max-width: 860px) {
  .process-body { grid-template-columns: 1fr; }
}

/* ─── Caso real (flotas): loop liviano data-lazy-video + copy ─────── */
.caso { align-items: center; }
.caso-media {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg-soft); box-shadow: var(--e2);
}
.caso-media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.caso-copy .section-head { margin-bottom: var(--space-4); }
.caso-cta { margin-top: var(--space-5); }
@media (max-width: 860px) {
  .caso .caso-media { order: -1; }
}

/* ─── Banda CTA (contacto) ────────────────────────────────────────── */
.cta-band {
  text-align: center; border: 1px solid var(--gold-dim); border-radius: 12px;
  padding: clamp(2rem, 5vw, 3.2rem); position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(251,209,1,.10), transparent 60%),
    var(--bg-soft);
}
.cta-band h2 { color: var(--cream); margin: 0 0 .5rem; }
.cta-band p { color: var(--cream-dim); max-width: 52ch; margin: 0 auto 1.6rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* Cuarto de aro dorado en el vértice de la banda: la firma visual del sitio
   también cierra la página. Mismo motor de inercia que .feature-ring. */
.cta-band > :not(.feature-ring) { position: relative; z-index: 1; }
.cta-band .cta-ring { width: min(380px, 68vw); opacity: .14; }
.cta-band .cta-ring .ri-base { stroke: var(--gold); }

/* ─── Contenido editable en prosa (historia / servicios admin) ────── */
.content { color: var(--cream-dim); max-width: 72ch; line-height: 1.8; }
.content p { margin-bottom: 1.05rem; }
.content p:first-child { color: var(--cream); font-size: 1.08rem; }
.content strong { color: var(--cream); font-weight: 500; }
.content em { color: var(--silver); font-style: italic; }
.content h3 { color: var(--cream); font-size: 1.18rem; margin: 1.8rem 0 .6rem; }

/* ─── Grilla de catálogo ──────────────────────────────────────────── */
.catalog-toolbar {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  justify-content: space-between; margin-bottom: 2rem;
}
.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-chip {
  padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 100px;
  background: transparent; color: var(--cream-dim); text-decoration: none;
  font-size: .76rem; letter-spacing: .04em; transition: all .2s;
}
.filter-chip:hover { border-color: var(--gold); color: var(--cream); }
.filter-chip.active { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 400; }
.search { display: flex; align-items: center; gap: .5rem; }
.search input {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 3px;
  color: var(--cream); padding: .55rem .8rem; font-family: inherit; font-size: .85rem; min-width: 200px;
}
.search input:focus { outline: none; border-color: var(--gold); }

.grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.card:hover { transform: translateY(-4px); border-color: var(--gold-dim); box-shadow: var(--e2), var(--glow-gold); }
/* ── Panel de producto: SIEMPRE la pieza completa sobre blanco ───────────
   Estandarizado en jul-2026. Las 17 fotos del catálogo son recortes con
   TRANSPARENCIA (alpha, verificado con GD): antes flotaban sobre un
   degradado metálico oscuro y, desde que las de proporción extrema pasaron
   a `contain` sobre blanco, la grilla quedaba mezclada — unas cards claras
   y otras oscuras. Con un único panel blanco:
     · la pieza entra entera (contain), nunca recortada;
     · al ser recortes transparentes no hay costura ni caja visible, así que
       la proporción de cada foto deja de importar;
     · la grilla se lee uniforme, como catálogo de producto.
   El degradado casi imperceptible da la sensación del ciclorama de estudio
   sin ensuciar el blanco. Vale igual para lo que suba el cliente: una foto
   con fondo propio se sigue viendo completa dentro del panel. */
.card-media {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f1f2f4 100%);
  border-bottom: 1px solid rgba(12,12,18,.10);
}
.card-media img {
  width: 100%; height: 100%; object-fit: contain; padding: 6% 7%;
}
.card-media::before { /* sombra de apoyo: despega la pieza del blanco plano */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 18% at 50% 92%, rgba(12,12,18,.10), transparent 70%);
}
.card-ph { /* placeholder sin foto: isotipo del faro como marca de agua */
  width: 62%; max-width: 170px; aspect-ratio: 585 / 95;
  /* sobre blanco la plata desaparecía: se usa la tinta de marca al 22% */
  background: var(--ink); opacity: .22;
  -webkit-mask: url("../img/isotipo.svg") center/contain no-repeat;
          mask: url("../img/isotipo.svg") center/contain no-repeat;
}
.card-badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 2; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(251,209,1,.92); color: var(--ink);
  padding: .2rem .5rem; border-radius: 3px; font-weight: 400;
}
.card-body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-cat { font-family: var(--head); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.card-title { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .98rem; color: var(--cream); line-height: 1.3; }
.card-meta { font-size: .74rem; color: var(--cream-dim); display: flex; gap: .5rem; flex-wrap: wrap; }
.card-meta span { white-space: nowrap; }
.card-code { font-family: 'Consolas', ui-monospace, 'Courier New', monospace; color: var(--silver); }
.card-foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-price { color: var(--cream); font-size: .9rem; }
.card-price.consultar { color: var(--silver-dim); font-style: italic; font-size: .8rem; }
.card-wa {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  color: var(--wa); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(37,211,102,.4); border-radius: var(--r-sm); padding: .35rem .6rem; transition: all .2s;
}
.card-wa:hover { background: var(--wa); color: #04210f; }
.card-wa svg { width: 13px; height: 13px; fill: currentColor; }

/* ─── Novedades (contenido del equipo de redes) ───────────────────── */
.grid--nov { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* Material de redes con proporción dispar (1:1, 4:5, 9:16): entra entero
   sobre la base metálica oscura (la clase la decide PHP midiendo el archivo). */
.nov-media--contain img { object-fit: contain; }

/* Foto clickeable → post de Instagram (pedido del cliente, jul-2026). El
   <a> es un atajo de mouse: va aria-hidden + tabindex=-1 en el HTML, y el
   link accesible sigue siendo «Ver publicación ↗» del pie de la tarjeta. */
.nov-media-link { display: block; }
.card-media .nov-media-link { width: 100%; height: 100%; }
.nov-frame .nov-media-link { width: 100%; }
.nov-media-link img { transition: transform var(--tr); }
.nov-card:hover .nov-media-link img, .nov-media-link:focus-visible img { transform: scale(1.035); }

/* Novedad con video: el panel blanco de producto no corresponde (es material
   de redes filmado, no una pieza recortada de estudio) y acá el clic tiene
   que REPRODUCIR, no navegar — por eso la media con video nunca es un link. */
.nov-media--video { background: #07070b; }
.nov-media--video::before { display: none; }   /* sin la sombra de apoyo del panel blanco */
.card-media.nov-media--video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.nov-peso, .nov-sonido { /* costo del click a la vista, igual criterio que .process-chip */
  position: absolute; left: .7rem; top: .6rem; z-index: 2; pointer-events: none;
  font-family: var(--head); font-weight: 600; font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .24rem .55rem; border-radius: 3px;
  background: rgba(12,12,18,.72); color: var(--silver);
  border: 1px solid rgba(189,191,193,.35);
}
/* La destacada arranca sola y MUTEADA (única forma de que un navegador deje
   autoplay). El peso deja de tener sentido —la descarga ya está pasando— y en
   su lugar site.js pone este botón: en un video con voz, "activar sonido"
   tiene que ser un blanco grande y visible, no el altavoz diminuto de los
   controles nativos. Existe solo cuando el JS lo crea: sin JS no hay autoplay
   y el play manual ya trae audio. */
.nov-sonido {
  pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .6rem; padding: .36rem .7rem;
  background: rgba(12,12,18,.82); color: var(--cream);
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.nov-media--video.is-auto .nov-peso { display: none; }
.nov-sonido svg { width: 13px; height: 13px; fill: currentColor; }
.nov-sonido:hover, .nov-sonido:focus-visible { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Novedad destacada: la más reciente, a lo ancho arriba de la grilla. El
   marco NO impone proporción (a diferencia de .card-media 4:3) porque el
   material de redes suele ser vertical: en 4:3 un 9:16 quedaba minúsculo. */
/* La media pesa un poco MÁS que la columna de texto (era .8fr contra 1fr): lo
   que se publica acá es la pieza de redes, el texto la acompaña. Con media
   vertical manda --vert (max-content) y el ancho lo fija NOV_ALTO_MAX. */
.nov-featured { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.nov-featured--solo { grid-template-columns: 1fr; }
/* Con media vertical la columna se ajusta al marco (max-content) en vez de
   estirarse: si no, el video queda flotando en el medio de una columna ancha
   y el texto termina lejos, del otro lado de un vacío. */
.nov-featured--vert { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.nov-frame {
  position: relative; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg-soft); box-shadow: var(--e2);
}
/* Sin object-fit y sin tope de alto propio: el marco YA viene con el ancho
   exacto que corresponde a la proporción real de la pieza (PHP lo calcula en
   novedad_media_html() leyendo el mp4), así que dejar que el alto salga solo
   es lo que garantiza que no haya ni franjas negras ni recorte. */
.nov-frame img, .nov-frame video { display: block; width: 100%; height: auto; }
.nov-frame video { background: #000; }
/* Media vertical (reel/story/speech filmado con el celular parado): el marco
   se angosta —el max-width inline lo fija PHP— y se centra en su columna. */
.nov-frame--vertical { margin-inline: auto; }
.nov-featured-copy { display: grid; gap: .7rem; justify-items: start; }
.nov-featured-titulo {
  font-family: var(--head); font-weight: 600; color: var(--cream);
  font-size: clamp(1.3rem, 3.2vw, 1.9rem); line-height: 1.2; text-wrap: balance;
}
.nov-featured .nov-cuerpo { font-size: .96rem; max-width: 58ch; }
.nov-featured-cta { margin-top: .3rem; }
.nov-featured + .grid--nov { margin-top: var(--space-7); }
@media (max-width: 860px) {
  /* Explícito (no por orden de cascada): en una sola columna, siempre. */
  .nov-featured, .nov-featured--vert { grid-template-columns: 1fr; gap: var(--space-5); }
  .nov-featured + .grid--nov { margin-top: var(--space-6); }
}
.nov-fecha {
  font-family: var(--head); font-weight: 600; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.nov-card .card-title { font-size: 1.05rem; }
.nov-cuerpo { color: var(--cream-dim); font-size: .9rem; line-height: 1.65; white-space: pre-line; }
/* En el teaser del home los textos largos de redes se recortan; el texto
   completo vive en novedades.php. */
#novedades .nov-cuerpo {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* La destacada tiene lugar de sobra al costado de la media: se recorta más tarde. */
#novedades .nov-featured .nov-cuerpo { -webkit-line-clamp: 7; }
.nov-link {
  color: var(--gold); text-decoration: none; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: border-color var(--tr);
}
.nov-link:hover, .nov-link:focus-visible { border-color: var(--gold); }
.paginado {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: var(--space-7); flex-wrap: wrap;
}
.paginado-info {
  color: var(--cream-dim); font-size: var(--fs-small);
  letter-spacing: .06em; text-transform: uppercase;
}

.results-count {
  color: var(--cream-dim); font-size: var(--fs-small); letter-spacing: .06em;
  text-transform: uppercase; margin: calc(var(--space-4) * -1) 0 var(--space-5);
}
.empty { text-align: center; color: var(--cream-dim); padding: 3rem 0; }
.empty b { color: var(--cream); font-weight: 500; }
.empty .btn { margin-top: var(--space-4); }

/* ─── Contacto ────────────────────────────────────────────────────── */
.contact-grid {
  display: grid; grid-template-columns: minmax(280px, 400px) 1fr;
  gap: var(--space-7); align-items: start;
}
.contact-item { margin-bottom: var(--space-5); }
.contact-item h2 {
  font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: var(--space-2);
}
.contact-item p, .contact-item div { color: var(--cream); }
.contact-item a { color: var(--cream); transition: color var(--tr); }
.contact-item a:hover { color: var(--gold); }
.contact-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.map-frame { /* mapa oscuro: se invierte y desatura el embed claro de Google */
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg-soft); box-shadow: var(--e1);
}
.map-frame iframe {
  display: block; width: 100%; height: 420px; border: 0;
  filter: grayscale(1) invert(.92) hue-rotate(185deg) saturate(.35) brightness(.92) contrast(.95);
}
/* Horarios de atención: toma el carácter de la placa de redes (día en
   mayúsculas espaciadas, hora grande en oro) pero como TEXTO real —
   seleccionable, indexable y editable desde el panel. El contenido viene de
   un campo HTML, así que si el admin cambia la estructura degrada a párrafos
   normales sin romperse. */
.contact-horarios p { margin-bottom: .55rem; }
.contact-horarios p:last-child { margin-bottom: 0; }
.contact-horarios b {
  display: block; font-family: var(--head); font-weight: 600;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim);
}
.contact-horarios p { color: var(--gold); font-size: 1.05rem; }

.place-photo { margin-top: var(--space-6); }
.place-photo img {
  border: 1px solid var(--line); border-radius: var(--r-md);
  aspect-ratio: 3 / 2; object-fit: cover;
}
.place-photo figcaption { color: var(--cream-dim); font-size: .78rem; margin-top: .5rem; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .map-frame iframe { height: 320px; }
}

/* ─── Avisos ──────────────────────────────────────────────────────── */
.notice {
  background: rgba(251,209,1,.07); border: 1px dashed var(--gold-dim); border-radius: 6px;
  padding: 1rem 1.2rem; color: var(--cream-dim); font-size: .85rem; margin-bottom: 1.5rem;
}
.pending { font-style: italic; color: var(--cream-dim); }

/* ─── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line); margin-top: 2rem;
  padding: 2.5rem 0; color: var(--cream-dim); font-size: .8rem;
  /* Fondo negro sólido: tapa las sinusoides fijas globales. */
  background: var(--bg); position: relative; z-index: 1;
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.footer-social { display: flex; gap: 1.2rem; align-items: center; }
.footer-social a { color: var(--cream-dim); transition: color .25s; }
.footer-social a:hover { color: var(--gold); }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-horarios { color: var(--gold); }
.footer-legal { margin-top: 1.5rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,232,220,.5); }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split-media { order: -1; min-height: 0; }
  .split-media img { width: min(150px, 40%); opacity: .6; }
}
/* Entre el menú mobile (≤720px) y el desktop holgado, la nav de 6 links
   (se sumó Novedades) queda al filo: se achican gap y tipografía antes de
   que el wordmark tenga que recortarse con ellipsis. */
@media (min-width: 721px) and (max-width: 1000px) {
  .nav-links { gap: .95rem; }
  .nav-links a { font-size: .75rem; letter-spacing: .05em; }
}
@media (max-width: 720px) {
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: rgba(12,12,18,.97);
    border-bottom: 1px solid var(--line); padding: .5rem 1.5rem 1rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .catalog-toolbar { flex-direction: column; align-items: stretch; }
  .search input { width: 100%; }
  section { padding: 3rem 0; }
  .wrap { padding: 0 1.15rem; }
  .hero { padding-top: 2.5rem; }
}
@media (max-width: 420px) {
  .brand-text { font-size: .76rem; letter-spacing: .02em; }
  .brand-mark { height: 22px; }
  .hero h1 { font-size: 1.6rem; }
}

/* ─── WhatsApp flotante (mobile): el CTA ya existe en header/hero/CTA-band,
   pero en pantallas chicas queda lejos mientras se navega el catálogo o
   scrollea Nosotros. Sticky, solo mobile, oculto en desktop. ────────────── */
.wa-float {
  display: none;
  position: fixed; right: 1rem; bottom: 1rem; z-index: 150;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wa); color: #04210f;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  text-decoration: none; transition: transform var(--tr);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 26px; height: 26px; fill: currentColor; }
@media (max-width: 720px) {
  .wa-float { display: flex; }
}