/* Homepage compatibility and alignment fixes — 2026-08-24 */
.hero-video {
  background: #090909;
}

.site-footer { gap: 28px; }
.footer-links { display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:18px 24px; }
.footer-links a { transition:color .2s,opacity .2s; }
.footer-links a:hover { color:#fff; }
.social-link { display:inline-flex;align-items:center;gap:7px; }
.social-link svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.social-link svg .fill { fill:currentColor;stroke:none; }
@media(max-width:900px){.site-footer{align-items:flex-start;flex-direction:column}.footer-links{justify-content:flex-start}}
@media(max-width:520px){.footer-links{align-items:flex-start;flex-direction:column;gap:14px}}

/* Dark portfolio and clients sections */
.photo-section,
.clients { background:#090909;color:#f4f4f1; }
.photo-section .section-kicker,
.clients .section-kicker { color:#b8b8b5; }
.photo-section .text-link { border-color:#aaa; }
.client-grid { background:#303030;border-color:#303030; }
.client-grid div { background:#090909; }
.client-grid img { filter:invert(1) grayscale(1); }

/* Contact form */
.contact-form-section { height:auto;min-height:820px; }
.contact-form-section .contact-overlay { background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.52)); }
.contact-form-section .contact-content { display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,.65fr);gap:8vw;align-items:start; }
.contact-heading h2 { font-size:clamp(55px,7vw,112px); }
.contact-heading p { max-width:480px;margin:35px 0 0;color:#d1d1ce;font-size:20px;line-height:1.4; }
.contact-form { padding-top:3px; }
.form-field { margin-bottom:24px; }
.form-field label { display:block;margin-bottom:9px;color:#d7d7d4;font-size:12px;letter-spacing:.12em;text-transform:uppercase; }
.form-field input,.form-field textarea { width:100%;border:0;border-bottom:1px solid #ffffff80;border-radius:0;padding:10px 0 14px;background:transparent;color:#fff;font:inherit;font-size:18px;outline:none;resize:vertical; }
.form-field input:focus,.form-field textarea:focus { border-color:#fff; }
.form-trap { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; }
.privacy-check { display:flex;align-items:flex-start;gap:10px;margin:5px 0 25px;color:#d1d1ce;font-size:13px;line-height:1.4; }
.privacy-check input { margin-top:2px;accent-color:#fff; }
.privacy-check a { text-decoration:underline; }
.contact-form button { width:100%;border:1px solid #fafafa9a;padding:17px 20px;display:flex;justify-content:space-between;background:transparent;color:#fff;font:inherit;font-size:14px;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:.25s; }
.contact-form button:hover { background:#f5f5f2;color:#090909; }
.contact-form button span { font-size:20px; }
.form-status { min-height:22px;margin:18px 0 0;font-size:14px;line-height:1.4; }
.form-status.success { color:#d7ffd4; }.form-status.error { color:#ffd0d0; }
@media(max-width:900px){.contact-form-section .contact-content{grid-template-columns:1fr;gap:60px}.contact-form-section{min-height:0}.contact-form-section .contact-content{padding-top:90px;padding-bottom:90px}}
@media(max-width:520px){.contact-heading p{font-size:17px}.form-field input,.form-field textarea{font-size:16px}}

/* Keep the animated bolt clear of the hero divider and copy */
.hero-bottom {
  min-height: 54px;
  padding-right: 110px;
}

.hero-bolt {
  width: 43px;
  right: 18px;
  top: auto;
  bottom: calc(100% + 24px);
}

@media (max-width: 800px) {
  .hero-bottom {
    min-height: 66px;
    padding-right: 74px;
  }

  .hero-bottom p {
    max-width: 230px;
  }

  .hero-bolt {
    width: 34px;
    right: 14px;
    bottom: calc(100% + 30px);
  }
}

@media (max-width: 390px) {
  .hero-bottom {
    padding-right: 62px;
  }

  .hero-bottom p {
    max-width: 205px;
    font-size: 12px;
  }

  .hero-bolt {
    width: 30px;
    right: 10px;
    bottom: calc(100% + 34px);
  }
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 83% 72%, rgba(255, 255, 255, .34), transparent 18%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: stormFlash 6s linear infinite;
}

.hero-bolt {
  transform-origin: 50% 80%;
  opacity: .55;
  animation: boltStrike 6s linear infinite;
  will-change: transform, opacity, filter;
}

@keyframes boltStrike {
  0%, 70%, 100% { transform: translateY(0) scale(1); opacity: .55; filter: drop-shadow(0 0 0 transparent); }
  72% { transform: translateY(-8px) scale(1.08); opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .9)); }
  73% { opacity: .3; }
  74.5% { transform: translateY(-4px) scale(1.04); opacity: 1; filter: drop-shadow(0 0 18px #fff); }
  78% { transform: translateY(0) scale(1); opacity: .55; filter: drop-shadow(0 0 0 transparent); }
}

@keyframes stormFlash {
  0%, 70%, 100% { opacity: 0; }
  72% { opacity: .7; }
  73% { opacity: .08; }
  74.5% { opacity: .48; }
  78% { opacity: 0; }
}

.photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.photo-grid img,
.photo-grid img:nth-child(2),
.photo-grid img:nth-child(3) {
  display: block;
  width: 100%;
  height: clamp(330px, 34vw, 490px);
  margin-top: 0;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-bolt { animation: none; }
  .hero-bolt { opacity: .8; }
}

@media (max-width: 800px) {
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-grid img,
  .photo-grid img:nth-child(2),
  .photo-grid img:nth-child(3) { height: 260px; }
}

/* Final bolt positioning overrides */
.hero-bottom{min-height:54px;padding-right:110px}
.hero-bolt{width:43px;right:18px;top:auto;bottom:calc(100% + 24px)}
@media(max-width:800px){.hero-bottom{min-height:66px;padding-right:74px}.hero-bottom p{max-width:230px}.hero-bolt{width:34px;right:14px;bottom:calc(100% + 30px)}}
@media(max-width:390px){.hero-bottom{padding-right:62px}.hero-bottom p{max-width:205px;font-size:12px}.hero-bolt{width:30px;right:10px;bottom:calc(100% + 34px)}}

/* Final presentation fixes: clients, recap viewer, form and footer */
.client-grid img,
.client-grid .logo-nike img { filter:grayscale(1) brightness(0) invert(1);opacity:.92; }
.client-grid div { background:#090909; }

.recap-media video { filter:none; }
.recap-expand { position:absolute;inset:0;z-index:3;border:0;padding:22px;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 42%);color:#fff;cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;font:inherit;opacity:0;transition:opacity .25s; }
.recap-expand b { font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase; }
.recap-expand i { width:38px;height:38px;border:1px solid #ffffff9a;border-radius:50%;display:grid;place-items:center;font-size:20px;font-style:normal; }
.recap-media:hover .recap-expand,.recap-expand:focus-visible { opacity:1; }
.recap-media>span { z-index:4;pointer-events:none; }
.recap-modal { width:min(94vw,1400px);max-width:none;border:1px solid #454545;padding:0;background:#050505;color:#fff;overflow:visible; }
.recap-modal::backdrop { background:rgba(0,0,0,.9);backdrop-filter:blur(5px); }
.recap-modal video { display:block;width:100%;max-height:88vh;background:#000; }
.recap-close { position:absolute;z-index:2;right:-13px;top:-13px;width:42px;height:42px;border:1px solid #777;border-radius:50%;background:#090909;color:#fff;font-size:27px;line-height:1;cursor:pointer; }

.contact-form-section .contact-content { grid-template-columns:minmax(0,.78fr) minmax(480px,.72fr); }
.contact-form { padding:38px;border:1px solid #ffffff5c;background:rgba(8,8,8,.78);box-shadow:0 24px 80px rgba(0,0,0,.34);backdrop-filter:blur(9px);display:grid;grid-template-columns:1fr 1fr;gap:22px 18px; }
.contact-form .form-field { margin:0; }
.contact-form .form-field-full,.contact-form .privacy-check,.contact-form button,.contact-form .form-status { grid-column:1/-1; }
.form-field input,.form-field textarea { border:1px solid #ffffff55;padding:14px;background:rgba(255,255,255,.035); }
.form-field input:focus,.form-field textarea:focus { border-color:#fff;background:rgba(255,255,255,.07); }
.form-field textarea { min-height:130px; }
.privacy-check { margin:0; }

.site-footer { display:grid;grid-template-columns:auto auto;align-items:center;gap:24px 40px; }
.site-footer>img { grid-column:1; }.site-footer>span { grid-column:2;text-align:right; }
.footer-links { grid-column:1/-1;width:100%;justify-content:flex-start;padding-top:22px;border-top:1px solid #2d2d2d;gap:18px 30px; }
.footer-links a { white-space:nowrap; }
.social-link svg { flex:0 0 19px; }

@media(max-width:900px){.contact-form-section .contact-content{grid-template-columns:1fr}.contact-form{max-width:700px}.recap-expand{opacity:1}.site-footer{display:grid;grid-template-columns:1fr}.site-footer>img,.site-footer>span,.footer-links{grid-column:1}.site-footer>span{text-align:left}.footer-links{flex-direction:row;align-items:center}}
@media(max-width:600px){.contact-form{padding:24px 18px;grid-template-columns:1fr}.contact-form .form-field{grid-column:1}.footer-links{align-items:flex-start;flex-direction:column;gap:15px}.recap-close{right:5px;top:5px}.recap-modal{width:100vw;border:0}.recap-expand b{font-size:11px}}

/* Footer ordenado y centrado */
.site-footer.footer-v2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding-top:58px;padding-bottom:44px}
.footer-brand-row{display:flex;flex-direction:column;align-items:center;gap:18px}
.footer-brand-row img{width:170px;height:auto}
.footer-brand-row span{color:#aaa;font-size:14px}
.footer-contact-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 30px}
.footer-contact-row a,.footer-legal a{color:#bbb;text-decoration:none;transition:color .2s ease}
.footer-contact-row a:hover,.footer-legal a:hover{color:#fff}
.footer-instagram-icon,.footer-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.footer-instagram-icon{width:42px;height:42px;border:1px solid #333;border-radius:50%}
.footer-instagram-icon svg,.footer-whatsapp svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6}
.footer-instagram-icon svg .fill{fill:currentColor;stroke:none}
.footer-email{font-size:16px}
.footer-legal{width:min(720px,100%);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 34px;padding-top:24px;border-top:1px solid #2d2d2d}
.footer-legal a{font-size:14px}
@media(max-width:600px){.site-footer.footer-v2{padding-inline:22px;gap:24px}.footer-contact-row{flex-direction:column;gap:16px}.footer-legal{flex-direction:column;gap:13px}.footer-brand-row img{width:145px}}

/* Formulario vertical y enlace de privacidad en escala correcta */
.contact-form{grid-template-columns:1fr;gap:18px;padding:34px 36px}
.contact-form .form-field,.contact-form .form-field-full,.contact-form .privacy-check,.contact-form button,.contact-form .form-status{grid-column:1}
.contact-form-section .privacy-check{display:flex;align-items:center;gap:11px;font-size:13px;line-height:1.45}
.contact-form-section .privacy-check input{flex:0 0 auto;width:16px;height:16px;margin:0}
.contact-form-section .privacy-check a{display:inline;font:inherit;font-size:inherit;line-height:inherit;border:0;padding:0;text-decoration:underline;text-underline-offset:3px}
.form-field input,.form-field textarea{padding:13px 14px}
.form-field textarea{min-height:120px}

/* Footer: identidad y contacto a la izquierda, legales a la derecha */
.site-footer.footer-v2{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:55px;text-align:left;padding:52px 4%}
.footer-left{display:flex;flex-direction:column;align-items:flex-start;gap:25px}
.footer-brand-row{align-items:flex-start;gap:16px}
.footer-contact-row{justify-content:flex-start;gap:16px 24px}
.footer-legal{width:auto;display:flex;align-items:center;justify-content:flex-end;gap:28px;padding:0;border:0;text-align:right}
@media(max-width:850px){.site-footer.footer-v2{flex-direction:column;align-items:flex-start;gap:34px}.footer-legal{justify-content:flex-start;text-align:left}}
@media(max-width:600px){.contact-form{padding:26px 20px}.footer-contact-row{align-items:flex-start}.footer-legal{align-items:flex-start}}

/* En móvil el rayo vive en el área libre junto al texto inferior */
@media(max-width:800px){
  .hero-bottom{padding-right:72px}
  .hero-bolt{width:29px;right:12px;top:66px;bottom:auto}
}
@media(max-width:390px){
  .hero-bottom{padding-right:62px}
  .hero-bolt{width:27px;right:10px;top:70px;bottom:auto}
}

/* Posición definitiva: debajo de "conectar.", sin tocar botón ni divisor */
.hero-content>.hero-bolt{position:relative;align-self:flex-end;flex:0 0 auto;width:48px;height:auto;right:auto;top:auto;bottom:auto;margin:22px 7% 0 0;z-index:3}
@media(max-width:800px){.hero-content>.hero-bolt{width:34px;margin:18px 5% 0 0}}
@media(max-width:390px){.hero-content>.hero-bolt{width:31px;margin-top:16px;margin-right:4%}}

/* Rayo definitivo junto al borde inferior del hero */
.hero>.hero-bolt{position:absolute;z-index:4;width:46px;height:auto;right:7%;top:auto;bottom:102px;opacity:.65}
@media(max-width:800px){.hero>.hero-bolt{width:31px;right:7%;top:auto;bottom:104px}}
@media(max-width:390px){.hero>.hero-bolt{width:28px;right:6%;top:auto;bottom:104px}}

/* El hero no debe mostrar controles nativos ni botón de reproducción */
.hero-video{pointer-events:none;background:#090909}
.hero-video::-webkit-media-controls,.hero-video::-webkit-media-controls-start-playback-button,.hero-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}

/* Hero completo dentro de la primera pantalla */
.hero{height:100vh;height:100svh;min-height:600px}
.hero-content{padding:125px 4% 118px}
.hero h1{font-size:clamp(60px,min(9.2vw,15vh),150px)}
.hero .eyebrow{margin-bottom:25px}
.hero-intro{padding-top:24px}
.hero-intro p{font-size:clamp(20px,1.7vw,26px);margin-bottom:18px}
.hero .button{padding:15px 19px}
.hero-bottom{bottom:18px;padding-top:15px;min-height:48px}
.hero>.hero-bolt{bottom:88px}

@media(max-height:780px) and (min-width:801px){
  .site-header{height:82px;padding-top:18px;padding-bottom:18px}
  .brand img{width:145px}
  .hero-content{padding-top:105px;padding-bottom:102px}
  .hero h1{font-size:min(8.5vw,13.5vh)}
  .hero .eyebrow{font-size:13px;margin-bottom:18px}
  .hero-intro{padding-top:14px}
  .hero-intro p{font-size:20px;margin-bottom:13px}
  .hero .button{padding:12px 17px;width:320px;font-size:13px}
  .hero-bottom{font-size:14px;bottom:14px;padding-top:12px}
  .hero>.hero-bolt{width:40px;bottom:78px}
}

@media(max-width:800px){
  .hero{height:100svh;min-height:620px}
  .hero-content{padding:104px 6% 118px}
  .hero h1{font-size:clamp(60px,18vw,112px)}
  .hero .eyebrow{font-size:10px;line-height:1.45;margin-bottom:20px;max-width:92%}
  .hero-intro{padding-top:22px}
  .hero-intro p{font-size:18px;line-height:1.25;margin-bottom:16px;max-width:86%}
  .hero .button{padding:14px 17px}
  .hero-bottom{bottom:15px;padding-top:13px;min-height:44px}
  .hero>.hero-bolt{bottom:84px}
}

@media(max-width:420px) and (max-height:760px){
  .hero{min-height:560px}
  .hero-content{padding-top:88px;padding-bottom:105px}
  .hero h1{font-size:16.5vw}
  .hero .eyebrow{margin-bottom:13px}
  .hero-intro{padding-top:12px}
  .hero-intro p{font-size:16px;margin-bottom:12px}
  .hero .button{padding:11px 14px;font-size:11px}
  .hero-bottom{font-size:11px;bottom:10px;padding-top:10px}
  .hero>.hero-bolt{width:25px;bottom:70px}
}

/* Ubicación del estudio en el pie de página */
.footer-location{margin:0;color:#aaa;font-size:14px;letter-spacing:.04em}
@media(max-width:600px){.footer-location{font-size:12px}}