/* ================================================================
   REYESGRAPHIC v3 — capa visual "como los posts" (oct 2026)
   Grafito calido, fotos reales, titulares Anton en mayusculas con la
   segunda linea en lima, etiqueta con raya lima y firma R en rojo.
   Va DESPUES de v2.css y solo cambia la apariencia: no toca textos,
   enlaces, formularios, chat ni medicion.
   ================================================================ */
:root{
  --ink:   #2A2D30;
  --ink-2: #33373B;
  --ink-3: #3C4045;
  --ink-4: #4A4E52;
  --bone:  #F2F1EC;
  --bone-2:#E6E4DC;
  --text-dark: #22252A;
  --text-dark-mid: rgba(34,37,42,.72);
  --paper-mid: rgba(244,244,239,.74);
  --paper-dim: rgba(244,244,239,.6);
  --hairline:   rgba(244,244,239,.10);
  --hairline-2: rgba(244,244,239,.2);
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --card-shadow: 0 24px 60px -30px rgba(0,0,0,.55);
}

body{
  font-family:var(--font-body);
  background:linear-gradient(180deg, #34383C 0%, var(--ink) 40%);
}

/* ---------- Titulares como en los posts ---------- */
.display, .hero-title, .section-head h2, .process-sticky h2, .rail-head h2,
.closer h2, .pillar h3, .stat b, .reviews-score b, .manifesto p{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.display, .section-head h2, .process-sticky h2, .rail-head h2{ line-height:1.02; }
.hero-title em, .closer h2 em{ color:var(--lime); font-style:normal; }

/* Etiqueta: raya lima + categoria (igual que el post) */
.eyebrow{
  font-family:var(--font-body); font-weight:600;
  font-size:.74rem; letter-spacing:.08em;
  color:var(--paper);
}
.eyebrow::before{ width:30px; height:3px; border-radius:2px; background:var(--lime); }

/* ---------- Logo con la R roja de la marca ---------- */
.nav-logo img, .foot-brand img{ filter:none; height:44px; }
.foot-brand img{ height:52px; }
@media (max-width:820px){ .nav-logo img{ height:38px; } }

/* ---------- Menu ---------- */
.nav{
  top:14px; left:50%; right:auto; transform:translateX(-50%);
  width:min(calc(100% - 28px), 1240px);
  padding:10px 10px 10px 22px; border-radius:999px;
  background:rgba(42,45,48,.78);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--hairline);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.6);
}
.nav.is-stuck{ background:rgba(42,45,48,.9); padding-block:10px; }
.nav.is-hidden{ transform:translate(-50%, calc(-100% - 20px)); }
.nav-menu a{ color:rgba(244,244,239,.82); font-weight:500; }

/* ================================================================
   HERO: texto a la izquierda, foto real a la derecha
   ================================================================ */
.hero{ padding-top:120px; }
.hero-fallback, .hero-veil, .hero-noise{ display:none; }
.hero-title{
  font-size:clamp(3rem, 6.8vw, 7rem) !important;
  line-height:.98 !important;
  max-width:9.5ch;
  position:relative; z-index:2;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hero-foot, .hero-scroll, .hero-ticker{ position:relative; z-index:2; }
.hero-lede{ max-width:42ch; color:rgba(244,244,239,.85); }
.hero-ticker{ border-color:var(--hairline); }

.hero-photo{
  position:absolute; z-index:0; margin:0;
  right:max(calc((100vw - var(--maxw)) / 2 + var(--gut)), var(--gut));
  top:120px; bottom:clamp(110px, 16vh, 150px);
  width:min(40vw, 600px);
}
.hero-photo picture{ display:block; width:100%; height:100%; overflow:hidden; border-radius:28px; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.hero-photo img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center 35%;
  animation:v3-zoom 18s ease-out both;
}
@keyframes v3-zoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

/* Tarjetas sobre la foto (como un WhatsApp de verdad) */
.gcard{
  position:absolute; z-index:3;
  border-radius:16px; padding:12px 14px;
  font-size:.8rem; line-height:1.3; color:var(--text-dark);
  background:rgba(250,250,247,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  opacity:0; translate:0 14px;
  animation:v3-in .9s var(--out) forwards, v3-float 7s ease-in-out infinite;
}
.gcard b{ font-weight:600; }
.gcard small{ display:block; color:rgba(34,37,42,.62); font-size:.7rem; }
.gcard .gi{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:#25D366; color:#fff;
}
.gcard .live{ width:8px; height:8px; border-radius:50%; background:#25D366; animation:v3-ping 2s var(--out) infinite; }
.gcard--a{ top:18%; left:-14%; animation-delay:.6s, .6s; }
.gcard--b{ bottom:14%; right:-6%; animation-delay:.9s, 2.4s; }
@keyframes v3-in{ to{ opacity:1; translate:0 0; } }
@keyframes v3-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes v3-ping{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70%,100%{ box-shadow:0 0 0 8px rgba(37,211,102,0); } }

@media (max-width:899px){
  .hero{ padding-top:92px; }
  .hero-photo{
    position:relative; right:auto; top:auto; bottom:auto;
    width:100%; height:min(62vh, 520px); order:-1; margin:0 0 22px;
  }
  .hero-photo picture{ border-radius:22px; }
  .hero-title{ max-width:none; font-size:clamp(2.9rem, 13vw, 4.2rem) !important; margin-top:0 !important; }
  .gcard{ font-size:.72rem; padding:9px 11px; }
  .gcard--a{ top:auto; bottom:18%; left:10px; }
  .gcard--b{ bottom:auto; top:14px; right:10px; }
}

/* ================================================================
   SECCIONES
   ================================================================ */
.trust{ background:var(--ink-2); border-color:var(--hairline); }
.trust-track img{ opacity:.75; }

/* Tarjetas */
.pillar, .work, .more-card, .contact-form, .contact-data, .step, .stat{
  background:var(--ink-2);
  border:1px solid var(--hairline);
  box-shadow:var(--card-shadow);
}
.pillar{ border-radius:26px; }
.pillar h3{ font-size:clamp(1.9rem, 2.8vw, 2.7rem); line-height:1.02; }
.pillar-n{ font-family:var(--font-body); font-weight:600; letter-spacing:.06em; color:var(--lime); }
.pillar-media{ width:52%; }
.pillar-media img{ opacity:.9; object-position:center; }
.pillar-list li{ border-color:var(--hairline-2); color:rgba(244,244,239,.85); }

.work{ border-radius:22px; }
.work-media img{ filter:none; }

/* Proceso */
.process-photo img{
  display:block; width:100%; max-width:420px; aspect-ratio:4/3; object-fit:cover;
  border-radius:22px; margin-top:28px; box-shadow:var(--card-shadow);
}
@media (max-width:900px){ .process-photo{ display:none; } }
.process > div:last-child{ display:grid; gap:12px; }
.step{ border-radius:20px; padding:clamp(20px,3vh,30px) clamp(18px,2vw,28px); opacity:1; }
.step h3{ font-family:var(--font-body); font-weight:600; letter-spacing:-.01em; }
.step-n{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:0; padding-top:0; }
.step.is-active{ border-color:rgba(204,255,0,.45); }

/* Cifras */
.stats{ background:none; border:0; gap:12px; width:min(100% - 2 * var(--gut), var(--maxw)); margin-inline:auto; }
.stat{ border-radius:22px; }
.stat b{ font-size:clamp(3rem, 6vw, 5.2rem); }
.stat b span{ display:inline; margin:0; font-size:inherit; color:inherit; }
.stat > span{ font-weight:500; color:var(--paper-mid); }

/* ---------- Secciones claras (respiro, como el papel de los posts) ---------- */
#resenas, #faq{ background:var(--bone); color:var(--text-dark); }
#resenas .eyebrow, #faq .eyebrow{ color:var(--text-dark); }
#resenas .display, #faq .display{ color:var(--text-dark); }
.review{ background:#fff; border:1px solid var(--bone-2); box-shadow:0 18px 40px -30px rgba(0,0,0,.25); border-radius:20px; }
.review p{ color:var(--text-dark-mid); }
.review-who span, .reviews-score span{ color:rgba(34,37,42,.6); }
.review-ini{ background:var(--ink); color:var(--lime); }
.reviews-score b{ color:var(--text-dark); }
#resenas .stars{ color:#E8B400; }
.qa, .qa:last-child{ border-color:rgba(34,37,42,.14); }
.qa-q{ color:var(--text-dark); font-family:var(--font-body); font-weight:600; }
.qa-q:hover{ color:#5d7300; }
.qa-a > div > p{ color:var(--text-dark-mid); }

/* Otros servicios / contacto */
.more-card{ border-radius:22px; }
.contact-data{ border-radius:22px; padding:clamp(22px,3vw,34px); }
.contact-form{ border-radius:26px; }
.field input, .field select, .field textarea{ background:var(--ink); border-color:var(--hairline-2); }

/* Cierre sobre su propia foto (no lleva .fondo-foto) */
.closer{
  background:
    linear-gradient(rgba(34,37,40,.55), rgba(34,37,40,.8)),
    image-set(url("../img/v3/playa-1600.webp?v=20261009") type("image/webp"), url("../img/v3/playa-1600.jpg?v=20261009") type("image/jpeg")) center 60% / cover no-repeat;
}
.closer h2{ font-size:clamp(3rem, 8vw, 7rem); line-height:.98; text-shadow:0 4px 30px rgba(0,0,0,.35); }
.closer p{ color:rgba(244,244,239,.9); }
@media (max-width:899px){
  .closer{ background:
    linear-gradient(rgba(34,37,40,.6), rgba(34,37,40,.82)),
    image-set(url("../img/v3/playa-900.webp?v=20261009") type("image/webp"), url("../img/v3/playa-900.jpg?v=20261009") type("image/jpeg")) center / cover no-repeat; }
}

.foot{ background:#232629; }
.btn{ font-family:var(--font-body); font-weight:600; }
.btn--ghost{ background:rgba(255,255,255,.06); }

@media (prefers-reduced-motion: reduce){
  .hero-photo img, .gcard, .gcard .live{ animation:none !important; }
  .gcard{ opacity:1; translate:0 0; }
}

/* ---------- Ajustes tras revision ---------- */
@media (min-width:900px){
  .hero-title{ font-size:clamp(3rem, 5.4vw, 5.6rem) !important; max-width:11ch; }
  .hero-foot{ grid-template-columns:1fr; align-items:start; gap:26px; max-width:min(48vw, 640px); }
  .hero-actions{ justify-content:flex-start; }
  .hero-ticker{ max-width:calc(100% - min(40vw, 600px) - 40px); -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent); mask-image:linear-gradient(90deg,#000 80%,transparent); }
  .pillar > div:not(.pillar-media):not(.pillar-n){ max-width:54%; }
  .pillar-n{ max-width:54%; }
}
.pillar h3{ font-size:clamp(1.7rem, 2.3vw, 2.3rem); }
.process-photo img{ height:auto; }
.more-card-media img{ object-position:center; opacity:.92; }
.more-card-name{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; font-size:1.35rem; }
.pillar h3{ max-width:none; text-wrap:balance; }
@media (min-width:900px){ .pillar > div:not(.pillar-media):not(.pillar-n), .pillar-n{ max-width:60%; } }

section[aria-label="Cifras"]{ padding-block:clamp(40px,6vh,70px); }

/* ================================================================
   MANIFIESTO: texto con aire + foto de una web real
   ================================================================ */
.manifesto{ padding-block:clamp(90px,14vh,170px); }
.manifesto-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(36px,6vw,96px); align-items:center;
}
.manifesto p{
  font-family:var(--font-body); text-transform:none;
  font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.6rem, 2.9vw, 2.6rem); line-height:1.32;
  max-width:24ch;
}
.manifesto p .w.key{ color:rgba(204,255,0,.35); }
.manifesto p .w.key.lit{ color:var(--lime); }
.manifesto-photo img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:26px; box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
@media (max-width:899px){
  .manifesto-grid{ grid-template-columns:1fr; }
  .manifesto-photo img{ aspect-ratio:4/3; }
}

/* «Dos cosas.» / «Las dos bien.» en lima, como el post */
#servicios-titulo em{ color:var(--lime); font-style:normal; }
#servicios-titulo{ max-width:none !important; }

/* ================================================================
   CURSOR: bot claro con ojos lima y sombra suave
   ================================================================ */
.cursor-dot{ width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--lime); mix-blend-mode:normal; box-shadow:0 0 0 2px rgba(42,45,48,.8); }
.cursor-bot{ width:42px; height:42px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.bot-head{ fill:var(--bone); stroke:none; }
.bot-screen{ fill:var(--ink); }
.bot-line{ stroke:var(--bone); }
.bot-fill{ fill:var(--lime); }
.bot-hand .bot-fill{ fill:var(--bone); }
.bot-mouth{ stroke:var(--lime); }
.cursor-ring b{ font-family:var(--font-body); letter-spacing:.06em; font-weight:600; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }

/* Indicador para bajar: raton con la rueda moviendose */
.hero-scroll{ font-family:var(--font-body); font-weight:500; letter-spacing:.16em; }
.hero-scroll .mouse{
  width:22px; height:34px; border-radius:12px; border:2px solid rgba(244,244,239,.55);
  position:relative; flex:none;
}
.hero-scroll .mouse span{
  position:absolute; left:50%; top:7px; width:4px; height:7px; margin-left:-2px;
  border-radius:2px; background:var(--lime);
  animation:v3-rueda 1.8s var(--out) infinite;
}
@keyframes v3-rueda{ 0%{ opacity:0; transform:translateY(-3px); } 30%{ opacity:1; } 70%{ opacity:0; transform:translateY(9px); } 100%{ opacity:0; } }

/* ================================================================
   WHATSAPP FLOTANTE — encima del boton del asistente
   ================================================================ */
.wa-float{
  position:fixed; z-index:8600;
  right:clamp(16px,2.4vw,30px);
  bottom:calc(clamp(16px,2.4vw,30px) + 66px);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.6), 0 6px 16px rgba(0,0,0,.35);
  transition:transform .4s var(--out);
}
.wa-float::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);
  animation:v3-wa 2.6s var(--out) infinite;
}
@keyframes v3-wa{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); } 70%,100%{ box-shadow:0 0 0 14px rgba(37,211,102,0); } }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); }
.wa-float:active{ scale:.95; }
.wa-float-tip{
  position:absolute; right:calc(100% + 10px); top:50%; translate:6px -50%;
  background:var(--bone); color:var(--text-dark);
  font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:999px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, translate .3s var(--out);
}
@media (hover:hover){ .wa-float:hover .wa-float-tip{ opacity:1; translate:0 -50%; } }
/* se esconde junto con el asistente cuando el chat esta abierto */
.chat-launch.is-hidden ~ .wa-float, body:has(.chat-launch.is-hidden) .wa-float{ opacity:0; pointer-events:none; }
.chat-launch{ right:clamp(16px,2.4vw,30px); }

@media (prefers-reduced-motion: reduce){
  .wa-float::after, .hero-scroll .mouse span{ animation:none; }
  [class*="bg-on"]::before{ transition:none; }
}

/* ================================================================
   TRABAJOS: ventana compacta en vez del carril anclado a pantalla
   completa. v3-depth.js saca el titulo del carril y pone las flechas.
   ================================================================ */
.rail{ height:auto !important; padding-block:clamp(70px,10vh,120px); }
.rail-viewport{
  position:relative !important; height:auto !important; overflow:visible;
  display:grid !important; grid-template-columns:minmax(220px, 300px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  width:min(100% - 2 * var(--gut), var(--maxw)); margin-inline:auto;
}
.rail-viewport > .rail-head{ width:auto; padding:0; align-self:center; }
.rail-progress{ display:none; }
.rail-track{
  transform:none !important;
  display:flex !important; flex-direction:row !important; gap:14px;
  padding:14px !important;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
  background:rgba(255,255,255,.035);
  border:1px solid var(--hairline); border-radius:26px;
  cursor:grab;
}
.rail-track::-webkit-scrollbar{ display:none; }
.rail-track.is-drag{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.rail-track .work{ width:clamp(220px, 21vw, 270px) !important; flex:none; scroll-snap-align:start; transform:none !important; }
.rail-track .work-media{ aspect-ratio:4/3; }
.rail-track .work-body{ padding:14px; }
.rail-track .work-name{ font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:-.01em; }
.rail-track .work-kind{ font-size:.74rem; }
.rail-nav{ display:flex; gap:10px; margin-top:22px; }
.rail-nav button{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--hairline-2); color:var(--paper);
  background:rgba(255,255,255,.04);
  transition:background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.rail-nav button:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.rail-nav button:active{ scale:.94; }
.rail-nav button[disabled]{ opacity:.3; pointer-events:none; }
@media (max-width:820px){
  .rail-viewport{ grid-template-columns:1fr; }
  .rail-track{ border-radius:20px; padding:10px !important; gap:10px; }
  .rail-track .work{ width:72vw !important; }
}
.rail-track{ scroll-padding-inline:14px; }
@media (max-width:820px){ .rail-track{ scroll-padding-inline:10px; } }

/* ---------- Notificaciones del hero: ciclo continuo (entran, se quedan, se van, vuelven) ---------- */
.gcard--a{ --d:.6s; }
.gcard--b{ --d:2.6s; }
.gcard--c{ --d:4.6s; top:5%; right:-8%; }
.gcard--d{ --d:6.6s; top:44%; right:-12%; }
.gcard--e{ --d:8.6s; bottom:33%; left:-16%; }
.gcard{ animation:v3-ciclo 10s var(--out) infinite; animation-delay:var(--d); }
.gcard--msg small{ position:relative; min-height:1.3em; }
.gcard--msg .gc-typing{ position:absolute; left:0; top:50%; translate:0 -50%; display:inline-flex; gap:3px; opacity:0; animation:v3-escribe 10s linear infinite; animation-delay:var(--d); }
.gcard--msg .gc-typing i{ width:5px; height:5px; border-radius:50%; background:rgba(34,37,42,.45); animation:v3-dot 1s ease-in-out infinite; }
.gcard--msg .gc-typing i:nth-child(2){ animation-delay:.15s; }
.gcard--msg .gc-typing i:nth-child(3){ animation-delay:.3s; }
.gcard--msg .gc-msg{ opacity:0; animation:v3-texto 10s ease-out infinite; animation-delay:var(--d); }
@keyframes v3-ciclo{
  0%{ opacity:0; translate:0 18px; transform:scale(.86); }
  5%{ opacity:1; transform:scale(1.03); }
  8%{ translate:0 0; transform:scale(1); }
  28%{ translate:0 -5px; }
  48%{ opacity:1; translate:0 0; transform:scale(1); }
  55%{ opacity:0; translate:0 -12px; transform:scale(.96); }
  100%{ opacity:0; translate:0 18px; transform:scale(.86); }
}
@keyframes v3-escribe{ 0%,4%{ opacity:0; } 6%,15%{ opacity:1; } 17%,100%{ opacity:0; } }
@keyframes v3-texto{ 0%,15%{ opacity:0; } 18%,54%{ opacity:1; } 56%,100%{ opacity:0; } }
@keyframes v3-dot{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-2px); } }
@media (max-width:899px){
  /* móvil: 3 huecos; d reusa el de a y e el de b (no coinciden en el tiempo) */
  .gcard--c{ top:auto; right:auto; left:10px; bottom:calc(18% + 62px); }
  .gcard--d{ top:auto; right:auto; bottom:18%; left:10px; }
  .gcard--e{ bottom:auto; left:auto; top:14px; right:10px; }
}
@media (prefers-reduced-motion: reduce){
  .gcard, .gcard--msg .gc-typing, .gcard--msg .gc-typing i, .gcard--msg .gc-msg{ animation:none !important; }
  .gcard{ opacity:1; translate:0 0; }
  .gcard--d, .gcard--e{ display:none; }
  .gcard--msg .gc-typing{ display:none; }
  .gcard--msg .gc-msg{ opacity:1; }
}

/* ================================================================
   PAGINAS DE SERVICIO (diseño web, agentes IA, CRM): mismo estilo
   que la portada — titulo Anton a la izquierda, foto real a la derecha
   ================================================================ */
.page-hero{ padding-top:clamp(140px,18vh,190px); border-bottom-color:var(--hairline); }
.page-hero::before{ display:none; }
.page-hero h1{
  font-weight:400; text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(2.6rem, 5vw, 5.2rem); line-height:1; max-width:13ch;
}
.page-hero .lede{ color:rgba(244,244,239,.85); }
.page-hero-media{
  -webkit-mask-image:none; mask-image:none;
  inset:auto; right:max(calc((100vw - var(--maxw)) / 2 + var(--gut)), var(--gut));
  top:clamp(120px,15vh,160px); bottom:clamp(50px,8vh,90px);
  width:min(34vw, 500px); z-index:0;
}
.page-hero-media picture{ display:block; height:100%; border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.page-hero-media img{ opacity:1; object-position:center; }
.page-hero-inner{ z-index:1; }
.page-hero-inner > *{ max-width:min(56%, 640px); }
@media (max-width:899px){
  .page-hero-media{ position:relative; inset:auto; width:100%; height:min(52vh,420px); margin-bottom:26px; opacity:1 !important; }
  .page-hero{ display:flex; flex-direction:column; padding-top:100px; }
  .page-hero-inner > *{ max-width:none; }
}

/* 7 tarjetas en rejilla de 3: la ultima ocupa la fila entera en vez de dejar huecos */
@media (min-width:821px){ .grid-3 > .cell:last-child:nth-child(3n+1){ grid-column:1 / -1; } }

/* ---------- Portafolio: tarjetas de caso con mockup (laptop + celular) ---------- */
.rail-track .work--case{
  width:clamp(300px, 30vw, 380px) !important;
  display:flex; flex-direction:column;
  background:#1F2225; border:1px solid var(--hairline); border-radius:20px;
  overflow:hidden; position:relative; color:var(--paper);
  transition:border-color .25s ease, translate .35s var(--out, ease-out);
}
@media (hover:hover) and (pointer:fine){
  .rail-track .work--case:hover{ border-color:rgba(204,255,0,.35); translate:0 -4px; }
  .rail-track .work--case:hover .case-btn{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
}
.rail-track .work--case .work-media{ aspect-ratio:2/1; background:#cfcfcf; }
.rail-track .work--case .work-media::after{ display:none; }
.rail-track .work--case .work-media img{ width:100%; height:100%; object-fit:cover; object-position:center; transform:none; filter:none; }
.case-body{ display:flex; flex-direction:column; gap:12px; padding:18px 18px 18px; flex:1; }
.case-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.case-cat{ color:var(--lime); font-size:.78rem; font-weight:500; letter-spacing:.01em; }
.case-chip{ font-size:.62rem; letter-spacing:.14em; color:rgba(244,244,239,.55); border:1px solid var(--hairline-2); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.case-name{ font-family:var(--font-body); font-weight:600; font-size:1.18rem; line-height:1.2; letter-spacing:-.01em; margin:0; }
.case-desc{ margin:-4px 0 0; font-size:.84rem; line-height:1.45; color:rgba(244,244,239,.62); }
.case-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.case-tags li{ font-size:.74rem; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.06); color:rgba(244,244,239,.82); }
.case-met{ display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:center; padding:6px 0 2px; margin-top:auto; }
.case-met b{ display:block; font-family:var(--font-display); font-weight:400; font-size:1.45rem; line-height:1.1; letter-spacing:.01em; color:var(--lime); }
.case-met div + div b{ color:var(--bone, #F2F1EC); }
.case-met span{ display:block; margin-top:3px; font-size:.7rem; color:rgba(244,244,239,.5); }
.case-btn{
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:12px; border-radius:12px; font-weight:500; font-size:.9rem;
  background:rgba(255,255,255,.06); border:1px solid var(--hairline);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (max-width:820px){
  .rail-track .work--case{ width:84vw !important; }
}
@media (prefers-reduced-motion:reduce){
  .rail-track .work--case, .case-btn{ transition:none; }
}
.case-chip--dev{ color:var(--lime); border-color:rgba(204,255,0,.35); }
.case-btn--off{ color:rgba(244,244,239,.45); background:transparent; border-style:dashed; }
.rail-track .work--dev:hover{ translate:none; border-color:var(--hairline); }
.rail-track .work--dev:hover .case-btn{ background:transparent; color:rgba(244,244,239,.45); border-color:var(--hairline); }

/* ---------- Sección «Panel» + demo (9-oct-2026) ---------- */
.panel-demo-grid{ display:grid; gap:48px; align-items:center; }
.panel-demo-grid{ grid-template-areas:"top" "win" "bottom"; gap:32px; }
.panel-demo-top{ grid-area:top; } .panel-window{ grid-area:win; } .panel-demo-bottom{ grid-area:bottom; }
.panel-demo-bottom .panel-tabs{ margin-top:0; }
@media (min-width:1000px){
  .panel-demo-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas:"top win" "bottom win"; column-gap:56px; row-gap:28px; align-items:start; }
  .panel-window{ align-self:center; }
}
#panel-titulo em{ color:var(--lime); font-style:normal; }
.panel-demo-lead{ margin-top:18px; max-width:52ch; color:var(--paper-mid); line-height:1.7; }
.panel-tabs{ display:flex; flex-direction:column; gap:8px; margin-top:28px; }
.panel-tabs button{
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  padding:14px 18px; border-radius:16px; border:1px solid var(--hairline);
  background:rgba(255,255,255,.03); color:var(--paper);
  font-family:var(--font-body); transition:border-color .3s, background .3s;
}
.panel-tabs button b{ font-weight:600; font-size:.98rem; }
.panel-tabs button span{ font-size:.84rem; color:var(--paper-dim); }
.panel-tabs button:hover{ border-color:var(--hairline-2); }
.panel-tabs button[aria-selected="true"]{ border-color:rgba(204,255,0,.55); background:rgba(204,255,0,.07); }
.panel-tabs button[aria-selected="true"] b{ color:var(--lime); }
.panel-tabs button:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.panel-demo-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.panel-demo-note{ margin-top:12px; font-size:.8rem; color:var(--paper-dim); }
.panel-window{
  border-radius:18px; overflow:hidden; background:var(--ink-2);
  border:1px solid var(--hairline-2); box-shadow:var(--card-shadow);
}
.panel-window-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--hairline); }
.panel-window-bar i{ width:10px; height:10px; border-radius:50%; background:var(--ink-4); }
.panel-window-bar i:first-child{ background:#ff5f57; } .panel-window-bar i:nth-child(2){ background:#febc2e; } .panel-window-bar i:nth-child(3){ background:#28c840; }
.panel-window-bar span{ margin-left:10px; font-size:.75rem; color:var(--paper-dim); }
.panel-window-shots img{ display:block; width:100%; height:auto; }
.panel-window-shots picture.is-on img{ animation:panel-entra .45s var(--out, ease-out); }
@keyframes panel-entra{ from{ opacity:.25; transform:scale(1.012); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .panel-window-shots picture.is-on img{ animation:none; } }
.panel-window-tag{ padding:8px 14px; font-size:.72rem; color:var(--paper-dim); border-top:1px solid var(--hairline); }

/* ================================================================
   FOTO DE FONDO EN TODAS LAS SECCIONES (9-oct-2026)
   Cada sección lleva una foto real detrás, como la portada, con un
   velo grafito encima para que el texto se lea. v3-depth.js le pone
   .fondo-foto a cada sección y le asigna la foto (--foto) solo cuando
   se acerca a la pantalla: nadie descarga fotos de donde no llega.
   ================================================================ */
.fondo-foto{ position:relative; isolation:isolate; overflow:clip; }
.fondo-foto::before{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:var(--foto, none) center / cover no-repeat;
  /* desenfoque leve: los textos de las pantallas de la foto no compiten con los títulos */
  filter:blur(3px) saturate(.95); transform:scale(1.04);
  opacity:0; transition:opacity 1.1s var(--out);
}
.fondo-foto.bg-on::before{ opacity:1; }
.fondo-foto::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(34,37,40,.94) 0%, rgba(34,37,40,.77) 22%, rgba(34,37,40,.77) 78%, rgba(34,37,40,.94) 100%);
}
/* Reseñas y preguntas siguen claras (respiro), con la foto bajo un velo hueso */
#resenas.fondo-foto, #faq.fondo-foto{ background:var(--bone); }
#resenas.fondo-foto::after, #faq.fondo-foto::after{
  background:linear-gradient(180deg, rgba(242,241,236,.95) 0%, rgba(242,241,236,.82) 25%, rgba(242,241,236,.82) 75%, rgba(242,241,236,.95) 100%);
}
/* La ventana de trabajos no se recorta (sombras de las tarjetas): su foto va sin agrandar */
.rail-viewport.fondo-foto{ overflow:visible; }
.rail-viewport.fondo-foto::before{ transform:none; }

/* Tarjetas en vidrio: la foto se ve a través */
.fondo-foto .pillar, .fondo-foto .work, .fondo-foto .more-card, .fondo-foto .contact-form,
.fondo-foto .contact-data, .fondo-foto .step, .fondo-foto .stat, .fondo-foto .panel-tabs button{
  background:rgba(51,55,59,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
          backdrop-filter:blur(14px) saturate(1.15);
  border-color:rgba(244,244,239,.14);
}
.fondo-foto .review{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
@media (prefers-reduced-motion:reduce){ .fondo-foto::before{ transition:none; } }