/* ============================================================  
   ATEMPO PHOTOGRAPHY — self-contained home.  
   Scoped under #atempo so WordPress theme styles can't interfere.  
   Spacing in FIXED px (no vw/svh) so it never breaks inside a  
   theme container. No scroll animation. Refined service hover.  
============================================================ */  
#atempo *{margin:0;padding:0;box-sizing:border-box}  
#atempo{  
  --ink:#231f20;--turq:#ddf0eb;--paper:#fff;  
  --ink-70:rgba(35,31,32,.70);--ink-45:rgba(35,31,32,.45);  
  --ink-12:rgba(35,31,32,.12);--ink-08:rgba(35,31,32,.08);  
  --font:"tussilago","Georgia",serif;  
  --ease:cubic-bezier(.16,1,.3,1);  
  font-family:var(--font);font-weight:300;color:var(--ink);  
  background:var(--paper);line-height:1.5;  
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;  
  position:relative;overflow-x:hidden;  
}  
#atempo h1,#atempo h2,#atempo h3{font-weight:900;line-height:1.04;letter-spacing:-.02em}  
#atempo a{color:inherit;text-decoration:none}  
#atempo img{display:block;max-width:100%}  
#atempo ::selection{background:var(--ink);color:var(--turq)}  

/* inner width limiter — fixed max, centered */  
#atempo .wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}  

/* ---------- HEADER ---------- */  
#atempo .header{  
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);  
  backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-08);  
}  
#atempo .header .wrap{display:flex;align-items:center;justify-content:space-between;  
  padding-top:16px;padding-bottom:16px}  
#atempo .brand{display:flex;align-items:center;gap:14px;color:var(--ink)}  

/* Logo más grande */  
#atempo .brand__svg{width:200px;height:auto;display:block}  

#atempo .brand__pill{  
  font-size:11px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;  
  color:var(--ink-45);padding-left:14px;position:relative;  
}  
#atempo .brand__pill::before{content:"";position:absolute;left:0;top:50%;  
  transform:translateY(-50%);width:1px;height:14px;background:var(--ink-12)}  
#atempo .nav{display:flex;align-items:center;gap:32px}  

/* Tipografía más gruesa para los enlaces */  
#atempo .nav a{font-size:14px;font-weight:700;color:var(--ink-70);transition:color .3s}  
#atempo .nav a:hover{color:var(--ink)}  

/* Botón del nav negro puro y texto turquesa */  
#atempo .nav__cta {  
  background-color: #000000 !important;  
  color: #ddf0eb !important;  
  font-size: 14px;  
  font-weight: 900;  
  border-radius: 999px;  
  padding: 11px 22px;  
  transition: transform .4s var(--ease), background .3s;  
}  
#atempo .nav__cta:hover {  
  background-color: #333333 !important;  
}  

#atempo .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}  
#atempo .burger span{width:25px;height:2px;background:var(--ink);transition:.4s var(--ease)}  

/* ---------- BUTTONS - AJUSTADOS A GRIS ---------- */  
#atempo .btn{font-size:15px;font-weight:900;border-radius:999px;padding:16px 30px;  
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;  
  transition:transform .4s var(--ease),background .4s,color .4s}  
   
#atempo .btn--solid{
  /* Cambiado de var(--ink) (negro) a un gris medio */
  background-color: #555555; 
  color: #fff; /* Mantener texto claro para contraste */
}  
#atempo .btn--solid:hover{transform:translateY(-3px); background-color: #333333;}  

#atempo .btn--ghost{
  /* Cambiado de transparent a un gris muy claro */
  background-color: #e6e6e6; 
  color: var(--ink); 
  border: 1px solid var(--ink-12);
}  
#atempo .btn--ghost:hover{
  /* Al hacer hover, se invierte para un contraste mayor */
  background-color: var(--ink); 
  color: #ddf0eb; 
  border-color: var(--ink);
}  
#atempo .btn__arrow{transition:transform .4s var(--ease)}  
#atempo .btn:hover .btn__arrow{transform:translateX(4px)}  

/* ---------- HERO ---------- */  
#atempo .hero{padding-top:110px;padding-bottom:110px}  
#atempo .hero__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:32px}  
#atempo .hero__title{font-size:88px;line-height:1.0;letter-spacing:-.03em;max-width:15ch}  
#atempo .hero__title em{font-style:normal;position:relative;white-space:nowrap}  
#atempo .hero__title em::after{content:"";position:absolute;left:0;right:0;bottom:.09em;  
  height:.10em;background:var(--turq);z-index:-1}  
#atempo .hero__sub{margin-top:36px;font-size:19px;color:var(--ink-70);max-width:46ch}  
#atempo .hero__actions{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap}  

/* ---------- MARQUEE (rolling, CSS-only) ---------- */  
#atempo .marquee{border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);  
  padding-top:22px;padding-bottom:22px;overflow:hidden;white-space:nowrap}  
#atempo .marquee__track{display:inline-flex;gap:56px;padding-left:56px;  
  animation:atempo-slide 34s linear infinite}  
#atempo .marquee__item{font-size:14px;letter-spacing:.16em;text-transform:uppercase;  
  color:var(--ink-45);display:inline-flex;align-items:center;gap:56px}  
@keyframes atempo-slide{to{transform:translateX(-50%)}}  

/* ---------- STATEMENT ---------- */  
#atempo .statement{padding-top:130px;padding-bottom:130px}  
#atempo .statement__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:32px}  
#atempo .statement__text{font-size:52px;line-height:1.12;letter-spacing:-.02em;max-width:20ch}  
#atempo .statement__text .muted{color:var(--ink-45)}  


/* ---------- SERVICES ---------- */  
#atempo .services{
  /* Degradado turquesa sutil en el fondo de toda la sección */
  background: rgba(221, 240, 235, 0.25);
  padding-top:110px;padding-bottom:110px
}  
#atempo .services__head{display:flex;align-items:flex-end;justify-content:space-between;  
  gap:40px;margin-bottom:56px;flex-wrap:wrap}  
#atempo .services__title{font-size:56px;letter-spacing:-.03em}  
#atempo .services__lead{font-size:16px;color:var(--ink-70);max-width:34ch}  
#atempo .svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}  

/* TARJETAS: Altura fija y fondo oscuro */  
#atempo .svc{grid-column:span 3;background:var(--ink);border-radius:22px;padding:34px;  
  min-height:400px; /* Altura fija para escritorio */  
  display:flex;flex-direction:column;justify-content:flex-end; /* Texto siempre abajo */  
  position:relative;overflow:hidden;  
  border:1px solid rgba(255,255,255,0.1); color:#ffffff;  
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}  

/* NUEVA ORDEN SIMÉTRICA EXCLUSIVA PARA ESCRITORIO (2 arriba, 3 abajo) */  
@media(min-width: 821px) {  
  #atempo .svc:nth-child(1), #atempo .svc:nth-child(2) { grid-column: span 3; }  
  #atempo .svc:nth-child(3), #atempo .svc:nth-child(4), #atempo .svc:nth-child(5) { grid-column: span 2; }  
}  

#atempo .svc:hover{transform:translateY(-8px);
  box-shadow:0 2px 8px -4px rgba(35,31,32,.10),0 18px 30px -14px rgba(35,31,32,.16),0 40px 70px -30px rgba(35,31,32,.32);
  border-color:transparent}

/* ==================================================
   SERVICIOS - CAPAS CORREGIDAS PARA MOSTRAR FOTO Y HOVER
================================================== */

/* CAPA 1: FOTO DE FONDO */
#atempo .svc__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  z-index:1; /* CORRECCIÓN: Nivel 1 para estar delante del fondo negro */
  transition:transform .8s var(--ease);
}
#atempo .svc:hover .svc__img{transform:scale(1.06)}

/* CAPA 2: DEGRADADO OSCURO: Transición limpia de background */
#atempo .svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* CORRECCIÓN: Nivel 2, por encima de la foto */
  /* ESTADO NORMAL: Foto clara. Solo una pequeña sombra abajo para leer el texto */
  background: linear-gradient(to top, rgba(35,31,32,.5) 20%, rgba(35,31,32,0) 40%, rgba(35,31,32,0) 100%);
  transition: background 0.6s var(--ease); 
}
#atempo .svc:hover::before {
  /* ESTADO HOVER: La capa se oscurece al pasar el cursor */
  background: linear-gradient(to top, rgba(35,31,32,.8) 0%, rgba(35,31,32,.6) 55%, rgba(35,31,32,.4) 100%);
}

/* CAPA 3: BRILLO VERDE/TURQUESA AL HACER HOVER (25% OPACIDAD) */  
#atempo .svc__glow{  
  position:absolute;  
  inset:0;  
  /* Gradiente turquesa sutil con 25% de opacidad máxima */
  background: rgba(221, 240, 235, 0.25);   
  transform:translateY(101%);  
  transition:transform .65s var(--ease);  
  z-index:3; /* CORRECCIÓN: Nivel 3 */
}  
#atempo .svc:hover .svc__glow{transform:translateY(0)}

/* CAPA 4: FANTASMA BLANCO */  
#atempo .svc__ghost{
  position:absolute;top:-18px;right:6px;font-size:150px;font-weight:900;  
  line-height:1;color:#ffffff;opacity:0;transform:translate(18px,-10px);  
  transition:opacity .6s var(--ease),transform .8s var(--ease);
  z-index:4; /* CORRECCIÓN: Nivel 4 */
  pointer-events:none;letter-spacing:-.04em;
}  
#atempo .svc:hover .svc__ghost{opacity:.1;transform:translate(0,0)}  

/* CAPA 5: TEXTOS Y ELEMENTOS POR ENCIMA */
#atempo .svc__num, #atempo .svc__name, #atempo .svc__list{
  position:relative;
  z-index:5; /* CORRECCIÓN: Nivel 5, por encima de todo */
}

/* ESTILOS DE TEXTO (BLANCO) */  
#atempo .svc__num{font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,0.6);margin-bottom:auto;  
  transition:color .6s var(--ease)}  
#atempo .svc__name{font-size:30px;letter-spacing:-.02em;margin-bottom:16px;  
  transition:transform .6s var(--ease)}  
#atempo .svc:hover .svc__name{transform:translateX(4px)}  

#atempo .svc__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}  
#atempo .svc__list li{font-size:13px;color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.3);  
  border-radius:999px;padding:7px 13px;background:transparent;  
  transition:border-color .6s var(--ease),color .6s var(--ease),background .6s var(--ease),transform .55s var(--ease)}  
#atempo .svc:hover .svc__list li{border-color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.15);transform:translateY(-2px)}  
#atempo .svc:hover .svc__num{color:#ffffff}  

/* ---------- PORTFOLIO ---------- */
/* Fondo: foto de estudio con overlay oscuro fijo, texto y controles pasan a claro */
#atempo .work{position:relative;padding-top:130px;padding-bottom:80px;overflow:hidden}
#atempo .work::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("img/photography-studio.jpg") center/cover no-repeat;
}
#atempo .work::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(35,31,32,.90) 0%, rgba(35,31,32,.78) 100%);
}
#atempo .work>.wrap,#atempo .work>.reel{position:relative;z-index:1}
#atempo .work__head{margin-bottom:52px}
#atempo .work__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:20px}
#atempo .work__title{font-size:56px;letter-spacing:-.03em;max-width:16ch;color:#fff}

/* Banda continua: se desliza sola en loop infinito, misma técnica EXACTA que
   la banda de ciudades (inline-flex + contenido duplicado + translateX(-50%)).
   El padding-left igual al gap hace que el ancho total sea 2x periódico, así el
   salto del -50% es imperceptible. Sin variables CSS dentro del atajo
   `animation` (Safari iOS no las resuelve ahí y dejaba la banda estática). */
#atempo .reel{width:100%;overflow:hidden;white-space:nowrap}
#atempo .reel__track {
    display: flex;
    width: max-content; /* ESTA es la clave para que el móvil reconozca todas las fotos */
    gap: 20px;
    padding: 8px 0 8px 20px;
    animation: atempo-reel 33s linear infinite;
}
#atempo .reel:hover .reel__track{animation-play-state:paused}
@keyframes atempo-reel{to{transform:translateX(-50%)}}

#atempo .reel__card{
  position:relative;
  flex:0 0 420px;
  height:560px;
  border-radius:18px;
  overflow:hidden;
  background:#231f20;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
#atempo .reel__card:hover,#atempo .reel__card:focus-within{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.35), 0 30px 50px -20px rgba(0,0,0,.5), 0 60px 90px -40px rgba(0,0,0,.55);
}
#atempo .reel__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  -webkit-user-drag:none;
  transition:transform .8s var(--ease);
}
#atempo .reel__card:hover .reel__img,#atempo .reel__card:focus-within .reel__img{transform:scale(1.06)}

#atempo .reel__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(35,31,32,.88) 0%, rgba(35,31,32,.32) 40%, rgba(35,31,32,0) 68%);
  opacity:0;
  transition:opacity .5s var(--ease);
}
#atempo .reel__card:hover .reel__overlay,#atempo .reel__card:focus-within .reel__overlay{opacity:1}

#atempo .reel__cat{
  position:absolute;
  left:24px;
  bottom:24px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
#atempo .reel__card:hover .reel__cat,#atempo .reel__card:focus-within .reel__cat{opacity:1;transform:translateY(0)}


/* ---------- APPROACH ---------- */  
#atempo .approach{background:var(--ink);color:var(--paper);padding-top:130px;padding-bottom:130px}  
#atempo .approach ::selection{background:var(--turq);color:var(--ink)}  
#atempo .approach__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(221,240,235,.5);margin-bottom:30px}  
#atempo .approach__title{font-size:60px;letter-spacing:-.03em;max-width:18ch;margin-bottom:70px}  
#atempo .approach__title .accent{color:var(--turq)}  
#atempo .appr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}  
#atempo .appr__n{font-size:14px;letter-spacing:.16em;color:var(--turq);margin-bottom:18px}  
#atempo .appr__div{height:1px;background:rgba(255,255,255,.12);margin-bottom:18px}  
#atempo .appr__h{font-size:22px;margin-bottom:12px}  
#atempo .appr__p{font-size:15px;color:rgba(255,255,255,.6);line-height:1.6}  

/* ---------- CTA ---------- */  
#atempo .cta{padding-top:130px;padding-bottom:130px;text-align:center}  
#atempo .cta__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:26px}  
#atempo .cta__title{font-size:84px;letter-spacing:-.03em;margin-bottom:40px}  
#atempo .cta__title em{font-style:normal;position:relative}  
#atempo .cta__title em::after{content:"";position:absolute;left:0;right:0;bottom:.07em;  
  height:.11em;background:var(--turq);z-index:-1}  

/* ---------- FOOTER ---------- */  
#atempo .footer{background:var(--turq);padding-top:70px;padding-bottom:40px}  
#atempo .footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:56px}  
#atempo .footer__brand{font-size:48px;letter-spacing:-.03em;max-width:12ch}  
#atempo .footer__cols{display:flex;gap:56px;flex-wrap:wrap}  
#atempo .footer__col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:18px}  
#atempo .footer__col a{display:block;font-size:15px;color:var(--ink-70);margin-bottom:11px;transition:color .3s}  
#atempo .footer__col a:hover{color:var(--ink)}  
#atempo .footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;  
  padding-top:26px;border-top:1px solid var(--ink-12);font-size:13px;color:var(--ink-45)}  

/* ---------- RESPONSIVE ---------- */  
@media(max-width:1024px){  
  #atempo .hero__title{font-size:64px}  
  #atempo .statement__text,#atempo .approach__title{font-size:44px}  
  #atempo .services__title,#atempo .work__title{font-size:44px}
  #atempo .cta__title{font-size:60px}
  #atempo .svc{grid-column:span 3}
  #atempo .reel__card{flex-basis:360px;height:480px}
}
@media(max-width:820px){  
  #atempo .wrap{padding-left:22px;padding-right:22px}  
  #atempo .nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--paper);  
    flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding:40px;  
    transform:translateX(100%);transition:transform .5s var(--ease);  
    box-shadow:-20px 0 60px -30px rgba(35,31,32,.4);z-index:60}  
  #atempo .nav.open{transform:none}  
  #atempo .nav a{font-size:21px}  
  #atempo .burger{display:flex;z-index:70}  
  #atempo .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}  
  #atempo .burger.open span:nth-child(2){opacity:0}  
  #atempo .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}  
  #atempo .hero{padding-top:70px;padding-bottom:70px}  
  #atempo .hero__title{font-size:46px}  
  #atempo .statement,#atempo .services,#atempo .work,#atempo .approach,#atempo .cta{  
    padding-top:80px;padding-bottom:80px}  
  #atempo .statement__text,#atempo .approach__title{font-size:32px}  
  #atempo .services__title,#atempo .work__title{font-size:34px}  
  #atempo .cta__title{font-size:44px}  
  #atempo .svc{grid-column:span 6;min-height:auto}  
  
  /* AQUÍ ESTÁ LA CORRECCIÓN: Velocidad del carrusel en móvil a 30s */
  #atempo .reel__track{gap:14px;padding-left:14px;animation-duration:30s}  
  #atempo .reel__card{flex-basis:260px;height:340px;border-radius:14px}  
  #atempo .reel__cat{left:18px;bottom:18px;font-size:12px}  
  
  #atempo .appr-grid{grid-template-columns:1fr;gap:32px}  
  #atempo .footer__top{flex-direction:column}  
}