/* ========== Base ==========
   Tema: Negro puro + Magenta (#cc338b) eyeroniq, Poppins + Montserrat
*/
:root {
  --bg: #000000;           /* Negro puro */
  --surface: #0b0b0c;
  --elev: #111113;
  --text: #f7f7f7;
  --muted: #a1a1aa;
  --line: #26262b;
  --pink: #cc338b;         /* Magenta / rosa mexicano solicitado */
  --pink-2: #ff4cad;       /* Complemento vivo */
  --pink-3: #7a1f8a;       /* Profundo */
  --focus: #7dd3fc;

  --grad: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 50%, var(--pink-3) 100%);
  /* Gradiente azul → rosa para títulos dinámicos */
  --grad-bluepink: linear-gradient(90deg, var(--focus) 0%, color-mix(in srgb, var(--focus) 35%, var(--pink)) 40%, var(--pink-2) 70%, var(--pink) 100%);
  /* Glows suaves y más amplios para un fondo sin cortes visibles */
  --grad-soft: radial-gradient(1400px 700px at 78% 8%, rgba(204,51,139,0.22), rgba(0,0,0,0) 65%),
               radial-gradient(1100px 600px at 14% 32%, rgba(122,31,138,0.16), rgba(0,0,0,0) 62%),
               radial-gradient(900px 500px at 50% 90%, rgba(255,76,173,0.10), rgba(0,0,0,0) 70%);
  /* Altura de viewport real para móvil (se define por JS) */
  --vh: 1vh;

  --container: 1180px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 12px 30px rgba(0,0,0,0.45);
  --shadow-soft: 0 8px 20px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image: var(--grad-soft);
  letter-spacing: 0.2px;
}

h1, h2, h3 { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 1000; background: var(--elev); color: var(--text); padding: 8px 12px; border-radius: 8px; }

/* ========== Header ==========
*/
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); backdrop-filter: saturate(140%) blur(10px); background: color-mix(in srgb, var(--bg) 80%, transparent); }
.nav { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; height: 64px; }
.logo { font-weight: 800; letter-spacing: 0.5px; text-decoration: none; color: var(--text); }
.logo { font-size: clamp(24px, 7vw, 30px); }
.nav-links { display: none; gap: 20px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 12px; justify-self: end; }
.nav-toggle { display: inline-flex; background: transparent; color: var(--text); border: 0; font-size: 22px; }
@media (max-width: 959px) { .nav-toggle { display: none; } .nav-links { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 14px; } .nav-links a { white-space: nowrap; padding: 6px 0; } }
@media (min-width: 960px) { .nav { grid-template-columns: auto 1fr; } .nav-links { display: flex; justify-content: center; } .nav-toggle { display: none; } }

/* ========== Hero ==========
*/
.hero { position: relative; overflow: hidden; }
.hero-banner { padding-block: clamp(96px, 12vw, 160px); min-height: clamp(520px, 78vh, 880px); display: flex; align-items: center; }
@media (max-width: 768px) {
  /* Usar altura de viewport real en móviles para evitar desplazamientos por UI del navegador */
  .hero-banner { min-height: calc(var(--vh, 1vh) * 80); }
}
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art .layer { position: absolute; inset: -10%; border-radius: 50%; filter: blur(28px); opacity: 0.45; mix-blend-mode: screen; animation: float 12s ease-in-out infinite alternate; will-change: transform; }
.hero-art .l1 { background: radial-gradient(40% 40% at 70% 20%, rgba(204,51,139,0.5), transparent 60%); animation-duration: 14s; }
.hero-art .l2 { background: radial-gradient(45% 45% at 20% 70%, rgba(255,76,173,0.4), transparent 60%); animation-duration: 18s; }
.hero-art .l3 { background: radial-gradient(50% 50% at 50% 50%, rgba(122,31,138,0.35), transparent 60%); animation-duration: 22s; }
@keyframes float { from { transform: translate3d(-2%, -2%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.05); } }

/* Reducir/disable animaciones pesadas en dispositivos táctiles para estabilidad */
@media (hover: none) and (pointer: coarse) {
  .hero-art .layer { animation: none; transform: none !important; }
}

.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.hero h1 { font-size: clamp(32px, 8vw, 48px); line-height: 1.08; margin: 10px 0 12px 0; }
.hero h1 { word-break: keep-all; }
.lead { color: var(--muted); font-size: 18px; max-width: 56ch; }
.hero-ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pink) 40%, var(--line)); background: color-mix(in srgb, var(--pink) 10%, transparent); color: var(--text); box-shadow: 0 0 0 0 rgba(204,51,139,0.2); }

.hero-cards { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 14px; }
.mini-card { background: color-mix(in srgb, var(--elev) 90%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-soft); transform-style: preserve-3d; transition: transform .2s ease, box-shadow .2s ease; }
.mini-card:hover { box-shadow: 0 10px 40px rgba(204,51,139,0.35); }
.mini-thumb { border-radius: 10px; aspect-ratio: 16/11; border: 1px solid var(--line); margin-bottom: 8px; }
.gradient-1 { background: linear-gradient(135deg, rgba(204,51,139,0.35), rgba(255,76,173,0.25)); }
.gradient-2 { background: linear-gradient(135deg, rgba(255,76,173,0.35), rgba(122,31,138,0.25)); }
.gradient-3 { background: linear-gradient(135deg, rgba(122,31,138,0.35), rgba(204,51,139,0.25)); }

/* Hero canvas and visual */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-visual { position: relative; display: none; }

/* Interactive scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 22px; height: 34px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--pink) 60%, white); opacity: 0.8; }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 4px; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--pink) 70%, white); animation: scroll-dot 1.6s ease-in-out infinite; }
@keyframes scroll-dot { 0% { transform: translate(-50%, 0); opacity: 1; } 70% { transform: translate(-50%, 12px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 0; } }

/* Typing effect base (caret) */
#hero-title { position: relative; display: block; }
#hero-title.typing::after { content: ''; display: inline-block; width: 8px; height: 0.9em; margin-left: 6px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 12px rgba(204,51,139,0.6); animation: caretBlink 1s steps(1) infinite; vertical-align: -0.1em; }
@keyframes caretBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-art .layer { animation: none; }
  .scroll-cue::after { animation: none; }
}

/* ========== Sections ==========
*/
.section { padding-block: clamp(56px, 7vw, 96px); }
/* Mantener el fondo continuo del body sin bandas entre secciones oscuras */
.section-dark { background: transparent; }
.section h2 { font-size: clamp(24px, 3.6vw, 40px); margin: 0 0 10px 0; }
.section-lead { color: var(--muted); margin-bottom: 24px; }

/* Dynamic section titles */
.fx-title { position: relative; display: inline-flex; flex-direction: column; gap: 6px; letter-spacing: 0.3px; }
.fx-title .kicker { order: -1; font: 700 12px/1 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: color-mix(in srgb, var(--muted) 80%, white); opacity: 0.9; }
.fx-title .label { display: inline-block; color: var(--text); }

/* Aplicar gradiente animado solo donde hay soporte para background-clip:text */
/* Robust gradient text without disappearing: dual-layer technique */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .fx-title .label {
    position: relative;
    color: var(--text);
  }
  .fx-title .label::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: var(--grad-bluepink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 350% 100%;
    background-position: 0% 50%;
    animation: gradientMove 6s linear infinite;
    pointer-events: none;
  }
}
.fx-underline::after {
  content: '';
  display: block;
  height: 2px;
  width: 86px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--grad-bluepink);
  box-shadow: 0 6px 22px rgba(204,51,139,0.35);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0% 50%;
  animation: gradientMove 5s linear infinite;
}

@keyframes gradientMove { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .fx-title, .fx-underline::after { animation: none !important; }
}

/* Force titles to plain white (disable gradient layer entirely) */
.fx-title .label { color: var(--text) !important; }
.fx-title .label::before { content: none !important; }

/* Hide caption inside lightbox */
.lightbox-caption { display: none !important; }

/* Scroll progress bar */
#scroll-progress.scroll-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--grad); z-index: 1000; box-shadow: 0 6px 18px rgba(204,51,139,0.35); }

/* Extra gentle scroll reveals (won't affect tilt) */
.reveal-up { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
.reveal-up.in { opacity: 1; transform: translateY(0) scale(1); }
.reveal-zoom { opacity: 0; transform: scale(.96); transition: opacity .6s ease, transform .6s ease; }
.reveal-zoom.in { opacity: 1; transform: scale(1); }

.grid { display: grid; gap: 18px; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gallery { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery .tile-img { background-color: color-mix(in srgb, var(--surface) 92%, transparent); background-size: cover; background-position: center; }
.gallery .tile { overflow: hidden; border-radius: var(--radius); }
.gallery .tile::after { content: ''; display: block; }
.gallery .tile-img.p1 { background-image: linear-gradient(145deg, rgba(204,51,139,0.35), rgba(255,76,173,0.18)); }
.gallery .tile-img.p2 { background-image: linear-gradient(145deg, rgba(255,76,173,0.32), rgba(122,31,138,0.20)); }
.gallery .tile-img.p3 { background-image: linear-gradient(145deg, rgba(122,31,138,0.34), rgba(204,51,139,0.18)); }
.gallery .tile-img.p4 { background-image: linear-gradient(145deg, rgba(204,51,139,0.30), rgba(122,31,138,0.22)); }
.gallery .tile-img.p5 { background-image: linear-gradient(145deg, rgba(255,76,173,0.30), rgba(204,51,139,0.18)); }
.gallery .tile-img.p6 { background-image: linear-gradient(145deg, rgba(122,31,138,0.28), rgba(255,76,173,0.20)); }
.gallery .tile-img.p7 { background-image: linear-gradient(145deg, rgba(204,51,139,0.28), rgba(255,76,173,0.16)); }
.gallery .tile-img.p8 { background-image: linear-gradient(145deg, rgba(255,76,173,0.26), rgba(122,31,138,0.18)); }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-24 { margin-bottom: 24px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; transform-style: preserve-3d; }
.card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--pink) 40%, var(--line)); box-shadow: 0 16px 50px rgba(204,51,139,0.3); }
.card h3 { margin-top: 4px; }
.card ul { color: var(--muted); padding-left: 18px; }

/* Pricing */
.plan-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip-filter { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.chip-filter.active { background: var(--grad); border-color: transparent; }
.price { position: relative; }
.price-tag { color: var(--muted); margin: 8px 0 12px; }
.price.featured { outline: 1px solid color-mix(in srgb, var(--pink) 45%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 14%, transparent); }
.hidden { display: none !important; }

/* Gallery */
.tile { margin: 0; transform-style: preserve-3d; }
.tile-img { border-radius: var(--radius-sm); aspect-ratio: 16/11; border: 1px solid var(--line); }
.tile figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }

/* About */
.about { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
@media (min-width: 960px) { .about { grid-template-columns: 1fr 1fr; } }
.about-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3.4vw, 28px); position: relative; overflow: hidden; box-shadow: 0 30px 80px rgba(204,51,139,0.15); }
.about-gradient { position: absolute; inset: -30%; background: var(--grad); filter: blur(80px); opacity: 0.18; }
.about-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.badge-lg { padding: 10px 14px; font-size: 14px; border-radius: 12px; position: relative; }
.badge-lg::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -2px; background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 2px 6px rgba(204,51,139,0.35)); }
[data-ico="flow"].badge-lg::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23cc338b" d="M4 6h6a4 4 0 0 1 4 4 2 2 0 0 0 2 2h4v2h-4a4 4 0 0 1-4-4 2 2 0 0 0-2-2H4z"/></svg>'); }
[data-ico="bolt"].badge-lg::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ff4cad" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>'); }
[data-ico="chart"].badge-lg::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%237a1f8a" d="M4 20h16v-2H4v2zm2-4h3v-6H6v6zm5 0h3V6h-3v10zm5 0h3v-8h-3v8z"/></svg>'); }
.about-visual { position: relative; min-height: 360px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: radial-gradient(800px 400px at 20% 30%, rgba(204,51,139,0.14), transparent 60%), radial-gradient(900px 400px at 80% 70%, rgba(122,31,138,0.14), transparent 60%); cursor: crosshair; }
.about-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; filter: blur(26px); opacity: 0.9; background: radial-gradient(420px 420px at var(--mx, 50%) var(--my, 50%), rgba(204,51,139,0.22), rgba(255,76,173,0.16) 40%, rgba(0,0,0,0) 70%); transition: opacity .3s ease; }
.about-blob { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(28px); opacity: 0.35; mix-blend-mode: screen; animation: float 12s ease-in-out infinite alternate; }
.about-blob { pointer-events: none; }
.about-blob.b1 { left: -40px; top: -40px; background: radial-gradient(circle at 60% 40%, rgba(204,51,139,0.6), transparent 60%); }
.about-blob.b2 { right: -30px; top: 10%; background: radial-gradient(circle at 40% 60%, rgba(255,76,173,0.5), transparent 60%); animation-duration: 16s; }
.about-blob.b3 { left: 30%; bottom: -60px; background: radial-gradient(circle at 50% 50%, rgba(122,31,138,0.45), transparent 60%); animation-duration: 20s; }
/* Proceso interactivo */
/* Showcase de 3 tarjetas */
/* Visual Poster (hero right) */
.visual-poster { position: absolute; inset: 18px; border-radius: 18px; display: grid; place-items: center; }
.visual-poster .poster { width: 100%; height: 100%; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(900px 500px at 70% 30%, rgba(204,51,139,0.18), transparent 60%), radial-gradient(700px 380px at 30% 70%, rgba(122,31,138,0.16), transparent 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
.chip.float { position: absolute; padding: 10px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pink) 30%, var(--line)); background: color-mix(in srgb, var(--pink) 14%, transparent); backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(204,51,139,0.25); }
.chip.c1 { left: 10%; top: 16%; }
.chip.c2 { right: 14%; top: 26%; }
.chip.c3 { left: 20%; bottom: 18%; }
.orb { position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(30px); mix-blend-mode: screen; opacity: .35; }
.orb.o1 { right: 10%; top: 14%; background: radial-gradient(circle at 60% 40%, rgba(204,51,139,.8), transparent 60%); }
.orb.o2 { left: 12%; bottom: 10%; background: radial-gradient(circle at 40% 60%, rgba(255,76,173,.6), transparent 60%); }
.showcase-card[data-ico="brand"]::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ff4cad" d="M12 2l9 5v10l-9 5-9-5V7l9-5zm0 3.3L6 9v6l6 3.7 6-3.7V9l-6-3.7z"/></svg>'); }
.showcase-card[data-ico="social"]::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23cc338b" d="M3 12h4v8H3v-8zm7-6h4v14h-4V6zm7 4h4v10h-4V10z"/></svg>'); }
.showcase-card[data-ico="web"]::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%237dd3fc" d="M4 5h16v14H4V5zm2 2v10h12V7H6z"/></svg>'); }
.bullets { color: var(--muted); padding-left: 18px; }

/* Contact */
.contact .form-grid { grid-template-columns: 1fr; }
@media (min-width: 800px) { .contact .form-grid { grid-template-columns: 1fr 1fr; } }
.contact label { display: grid; gap: 8px; }
.contact label.full { grid-column: 1 / -1; }
.contact input, .contact textarea { background: var(--elev); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* ========== Footer ==========
*/
.site-footer { border-top: 1px solid var(--line); padding-block: 28px; }
.footer-grid { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr auto; } }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.legal { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; }

/* ========== Buttons ==========
*/
.btn { --bg-btn: var(--elev); --fg-btn: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-btn); color: var(--fg-btn); text-decoration: none; font-weight: 700; }
.btn:hover { filter: brightness(1.06); box-shadow: 0 0 0 0 rgba(204,51,139,0.0), 0 10px 30px rgba(204,51,139,0.3); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-lg { padding: 14px 22px; font-size: 18px; }
.btn-primary { border: 0; background: var(--grad); color: white; box-shadow: 0 8px 24px rgba(204,51,139,0.35); }
.btn-outline { background: transparent; border-color: color-mix(in srgb, var(--pink) 36%, var(--line)); color: var(--text); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }

/* ========== Animations ==========
*/
[data-animate] { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
[data-animate].in { opacity: 1; transform: translateY(0); }

/* ========== Floating WhatsApp ==========
*/
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: var(--grad); color: white; padding: 12px 16px; border-radius: 999px; text-decoration: none; border: 0; box-shadow: var(--shadow); }

/* ========== Links ==========
*/
a { color: var(--text); }
a:hover { color: white; }


/* Ally ribbon controllable */
.ally-ribbon { position: relative; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.02); padding: 8px 18px; overflow: hidden; }
.ally-viewport { overflow: hidden; }
.ally-track { display: flex; align-items: center; gap: clamp(24px, 6vw, 52px); width: max-content; padding: 8px 6px; will-change: transform; }
/* Smooth infinite marquee using two rows */
.ally-viewport { position: relative; overflow: hidden; }
.ally-marquee { display: inline-flex; align-items: center; gap: 0; width: max-content; padding: 0; animation: allyScrollHalf var(--marquee-duration, 20s) linear infinite; will-change: transform; }
.ally-row { display: inline-flex; align-items: center; gap: clamp(24px, 6vw, 52px); flex: 0 0 auto; }
.ally-row > * { flex: 0 0 auto; }
/* Espacio extra al final de cada fila para que no pegue inmediatamente con la siguiente copia */
.ally-row > :last-child { margin-right: var(--ally-end-gap, clamp(40px, 12vw, 180px)); }
/* Loop continuo: dos filas idénticas y animamos a -50% */
@keyframes allyScrollHalf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Ensure gradient overlay in about card doesn't block clicks */
.about-gradient { pointer-events: none; }
.ally-img { display: inline-block; height: clamp(20px, 4.4vw, 36px); }
.ally-img::before {
  content: '';
  display: block;
  height: 100%;
  width: clamp(80px, 18vw, 160px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
  opacity: .95;
}
.ally-google::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><circle cx="14" cy="34" r="6" fill="%23ffb300"/><path d="M26 6c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4s4-1.8 4-4V10c0-2.2-1.8-4-4-4z" fill="%2334a853"/><circle cx="34" cy="28" r="6" fill="%234285f4"/></svg>'); }
.ally-meta::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><path d="M11 24c3-8 8-16 13-16 8 0 10 16 17 16 4 0 7-5 7-8 0-6-4-8-7-8-6 0-10 8-14 16-4-8-7-16-13-16-4 0-8 3-8 8 0 5 3 8 5 8z" fill="%230066ff"/></svg>'); }
.ally-stripe::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><path d="M10 22v-8h6c4 0 6 2 6 4s-2 4-6 4h-6zm20-8h6v8h-6v-8zm10 0h6c4 0 6 2 6 4s-2 4-6 4h-6v-8z" fill="%235b6dee"/></svg>'); }
.ally-shopify::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M6 10l2-2 16-4 2 2v18l-16 4-4-2V10z" fill="%2300a86b"/></svg>'); }
.ally-wordpress::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23007aa3"/><path d="M9 12l5 14 3-9 3 9 3-10c1-4-2-6-5-6-3 0-7 1-9 2z" fill="white"/></svg>'); }
.ally-mailchimp::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><circle cx="16" cy="16" r="10" fill="%23ffcd00"/><path d="M22 10c4 0 4 6-2 6" stroke="%23000" stroke-width="3" fill="none"/></svg>'); }
.ally-openai::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 4l6 4 0 8-6 4-6-4 0-8 6-4z" fill="%2376e3c1"/><path d="M10 12l6-4 6 4-6 4-6-4z" fill="%2321a17b"/></svg>'); }
.ally-nvidia::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><path d="M6 16c8-8 24-8 34 2-4 4-10 6-17 6-8 0-13-3-17-8z" fill="%2308b64f"/><path d="M18 16c4-4 10-4 14 0-2 2-6 3-10 3-2 0-3-1-4-3z" fill="%2300742b"/></svg>'); }
.ally-adobe::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect x="2" y="2" width="28" height="28" fill="%23ff0000"/><path d="M8 24l6-16 6 16h-4l-2-6-2 6H8z" fill="white"/></svg>'); }

/* Utilities */
.muted { color: var(--muted); }
.sm { font-size: 14px; }
.xs { font-size: 12px; }

/* Dashboard eliminado */

/* ========== Lightbox ==========
   Overlay para ampliar items del portfolio
*/
.lightbox[hidden] { display: none !important; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); }
.lightbox-inner { width: min(92vw, 86vh, 1080px); max-height: 86vh; display: grid; grid-template-rows: 1fr auto; gap: 12px; }
.lightbox-content { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 86%, transparent); background-size: cover; background-position: center; aspect-ratio: 1/1; box-shadow: var(--shadow); }
.lightbox-caption { text-align: center; color: var(--muted); font-size: 14px; }
.lightbox-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; }
/* Visual Poster: full image support */
.visual-poster { position: absolute; inset: 18px; border-radius: 18px; display: grid; place-items: center; }
.visual-poster .poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}


/* Fallback chip for ally logos when an image fails */
.ally-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  height:36px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:10px;
  font:600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color:#e9e9e9;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  white-space:nowrap;
}

/* Poster image should fully cover its card */
.visual-poster, .poster-img, .poster-fallback{
  width:100%;
  height:100%;
  border-radius: var(--radius);
}
.poster-img{ object-fit:cover; display:block; }
.poster-fallback{
  background:
    radial-gradient(520px 320px at 70% 30%, rgba(255,76,173,0.35), rgba(0,0,0,0)),
    radial-gradient(420px 260px at 20% 85%, rgba(122,31,138,0.22), rgba(0,0,0,0)),
    #0b0b0f;
}


/* --- Hard override: poster must be full-bleed image, no overlays --- */
.about-visual::before,
.about-visual::after{ content: none !important; }
.about-visual .chip,
.about-visual .orb{ display: none !important; }

.visual-poster{ position:absolute; inset:18px; border-radius:18px; overflow:hidden; }
.visual-poster .poster-img{ width:100%; height:100%; object-fit:cover; display:block; }


/* --- Make the right panel visually identical to the left card --- */
.about-card.about-visual{
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden;
}

/* Remove inner gap and let the image be the content */
.visual-poster{ position:absolute; inset:0 !important; border-radius: inherit; overflow: hidden; }
.visual-poster .poster-img{ width:100%; height:100%; object-fit:cover; display:block; }


/* --- Project tiles: enforce square aspect ratio with rounded corners --- */
#portfolio-grid .tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
}
#portfolio-grid .tile .tile-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
/* Hide project captions */
#portfolio-grid .tile figcaption {
  display: none !important;
}


/* --- Overrides: Portfolio tiles and Lightbox square --- */
#portfolio-grid .tile{ aspect-ratio: 1 / 1; }
#portfolio-grid .tile .tile-img{ width:100%; height:100%; background-size:cover; background-position:center; }
#portfolio-grid .tile::after{ content: none; }


#portfolio-grid .tile figcaption{ display:none; }