/* ===========================================================
   /servicios/* — estilos compartidos de las páginas de servicios
   Reutiliza variables (:root) y fuentes definidas en style-1.css
   =========================================================== */

/* style-1.css pone overflow:hidden en <body> a propósito para el
   preloader del home, y lo quita un JS cuando termina la animación.
   Estas páginas no tienen ese preloader, así que lo revertimos aquí. */
html, body { height: auto; overflow-x: hidden; overflow-y: auto; }

.dw-reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.dw-reveal.is-v { opacity: 1; transform: none; }
.dw-reveal-l { opacity: 0; transform: translateX(-36px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.dw-reveal-l.is-v { opacity: 1; transform: none; }
.dw-reveal-r { opacity: 0; transform: translateX(36px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.dw-reveal-r.is-v { opacity: 1; transform: none; }
.dw-delay-1 { transition-delay: .1s; } .dw-delay-2 { transition-delay: .2s; }
.dw-delay-3 { transition-delay: .3s; } .dw-delay-4 { transition-delay: .4s; }

.dw-wrap { max-width: 1160px; margin: 0 auto; padding: 0 3rem; }
.dw-section { padding: 9rem 0; position: relative; }
.dw-eyebrow { font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; color: var(--txt-muted); display: block; margin-bottom: 1.4rem; }
.dw-h2 { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1.1; letter-spacing: -.01em; }
.dw-h2 em { font-style: italic; color: var(--txt-dim); }
.dw-body { font-size: .92rem; color: var(--txt-dim); line-height: 1.9; max-width: 480px; }

/* ---------- HERO ---------- */
.dw-hero { height: 100vh; min-height: 620px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.dw-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--bg3); }
.dw-hero-media video, .dw-hero-media img { width: 100%; height: 100%; object-fit: cover; animation: heroBreath 9s ease-in-out infinite alternate; }
.dw-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(8,8,8,.25) 0%, transparent 40%, rgba(8,8,8,.75) 82%, rgba(8,8,8,.96) 100%); }
.dw-hero-content { position: relative; z-index: 2; padding: 0 3rem 5rem; max-width: 760px; }
.dw-hero-tag { font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; color: var(--txt-dim); display: block; margin-bottom: 1.2rem; }
.dw-hero h1 { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.06; letter-spacing: -.01em; }
.dw-hero h1 em { font-style: italic; color: rgba(240,237,232,.6); }
.dw-hero p { font-size: .92rem; color: var(--txt-dimm); line-height: 1.85; max-width: 460px; margin-top: 1.6rem; }
.dw-hero-actions { display: flex; gap: .75rem; margin-top: 2.2rem; }

/* ---------- PROBLEMA (editorial split) ---------- */
.dw-problema { background: var(--bg2); }
.dw-problema-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4.5rem; align-items: center; }
.dw-problema-stmt { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.25; }
.dw-problema-stmt em { font-style: italic; color: var(--txt-dim); }
.dw-problema-sub { font-size: .88rem; color: var(--txt-dim); line-height: 1.9; margin-top: 1.6rem; max-width: 440px; }
.dw-problema-media { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--bg3); }
.dw-problema-media img, .dw-problema-media video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* ---------- CONCEPTO (asimétrico, numerado) ---------- */
.dw-concepto-top { display: grid; grid-template-columns: .5fr 1.5fr; gap: 3rem; align-items: start; }
.dw-num { font-family: 'Cormorant', serif; font-style: italic; font-weight: 300; font-size: clamp(4rem, 8vw, 7rem); color: var(--txt-muted); line-height: .8; }
.dw-concepto-sec { font-size: .82rem; color: var(--txt-dim); line-height: 1.9; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--border); max-width: 420px; }
.dw-concepto-media { width: 100%; height: 46vh; min-height: 340px; border-radius: 4px; margin-top: 4rem; overflow: hidden; background: var(--bg3); }
.dw-concepto-media img, .dw-concepto-media video { width: 100%; height: 100%; object-fit: cover; }

/* Imagen distinta para computadora y para teléfono */
.dw-concepto-media .dw-concepto-img-mobile { display: none; }
@media (max-width: 900px) {
  .dw-concepto-media .dw-concepto-img-desktop { display: none; }
  .dw-concepto-media .dw-concepto-img-mobile { display: block; }
}

/* ---------- DISEÑO + DESARROLLO ---------- */
.dw-dd { background: var(--bg2); }
.dw-dd-split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 3.5rem; }
.dw-dd-col .dw-eyebrow { margin-bottom: .8rem; }
.dw-dd-col p { font-size: .85rem; color: var(--txt-dim); line-height: 1.9; }
.dw-dd-line { background: var(--border); }
.dw-dd-media { width: 100%; height: 50vh; min-height: 380px; border-radius: 4px; margin-top: 4rem; overflow: hidden; background: var(--bg3); border: 1px solid var(--border); }
.dw-dd-media img, .dw-dd-media video { width: 100%; height: 100%; object-fit: cover; }
/* Imagen distinta para computadora y para teléfono */
.dw-dd-media .dw-dd-img-mobile { display: none; }
@media (max-width: 900px) {
  .dw-dd-media .dw-dd-img-desktop { display: none; }
  .dw-dd-media .dw-dd-img-mobile { display: block; }
}

/* ---------- FOTOGRAFÍA (galería horizontal cinematográfica) ---------- */
.dw-foto { padding-left: 0; padding-right: 0; }
.dw-foto-head { padding: 0 3rem; max-width: 640px; margin-bottom: 3rem; }
.dw-gallery-wrap { position: relative; }
.dw-gallery { display: flex; gap: 1.2rem; overflow-x: auto; padding: 0 3rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.dw-gallery::-webkit-scrollbar { display: none; }
.dw-gallery-item { flex: 0 0 auto; width: min(72vw, 620px); height: 68vh; min-height: 420px; border-radius: 4px; overflow: hidden; scroll-snap-align: start; background: var(--bg3); position: relative; }
.dw-gallery-item img, .dw-gallery-item video { width: 100%; height: 100%; object-fit: cover; }
.dw-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.8rem; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,237,232,.75); }

.dw-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: var(--txt);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 1.1rem; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s, transform .2s, opacity .25s;
}
.dw-gallery-arrow:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.06); }
.dw-gallery-prev { left: .8rem; }
.dw-gallery-next { right: .8rem; }
.dw-gallery-arrow[disabled] { opacity: 0; pointer-events: none; }

.dw-gallery-bar { position: relative; height: 2px; background: var(--border); margin: 1.6rem 3rem 0; border-radius: 2px; overflow: hidden; }
.dw-gallery-thumb { position: absolute; top: 0; left: 0; height: 100%; background: var(--txt); border-radius: 2px; transition: transform .15s linear, width .15s linear; }

@media (max-width: 900px) {
  .dw-gallery-arrow { display: none; }
}

/* ---------- TIPOS DE SITIOS / NEGOCIO / AUTOMATIZACIÓN (lista + imagen) ----------
   Desktop: hover en la lista cambia la imagen del panel sticky.
   Móvil: el panel sticky se oculta; cada item lleva su propia
   imagen inline que se despliega debajo del texto al tocarlo. */
.dw-tipos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.dw-tipos-list { list-style: none; border-top: 1px solid var(--border); }
.dw-tipos-list li { border-bottom: 1px solid var(--border); }
.dw-tipos-list button {
  all: unset; display: block; width: 100%; cursor: pointer;
  padding: 1.7rem .2rem; transition: padding .3s;
}
.dw-tipos-list button:hover, .dw-tipos-list button.is-active { padding-left: 1rem; }
.dw-tipo-name { font-family: 'Cormorant', serif; font-size: 1.5rem; font-weight: 300; color: var(--txt-dim); transition: color .25s; }
.dw-tipos-list button:hover .dw-tipo-name, .dw-tipos-list button.is-active .dw-tipo-name { color: var(--txt); }
.dw-tipo-desc { font-size: .75rem; color: var(--txt-muted); margin-top: .3rem; }
.dw-tipos-visual { position: sticky; top: 7rem; width: 100%; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--bg3); }
.dw-tipos-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.dw-tipos-visual img.is-active { opacity: 1; }

/* imagen inline por item — oculta en desktop, se usa solo en móvil */
.dw-tipo-inline { display: none; }

@media (max-width: 900px) {
  .dw-tipos-visual { display: none; } /* en móvil no usamos el panel sticky */
  .dw-tipo-inline {
    display: block; overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, margin-top .4s ease;
    border-radius: 4px; margin-top: 0;
  }
  .dw-tipos-list li.is-active .dw-tipo-inline {
    max-height: 500px; opacity: 1; margin-top: -.4rem; margin-bottom: 1.4rem;
  }
  .dw-tipo-inline img { width: 100%; height: 260px; object-fit: cover; border-radius: 4px; display: block; }
}

/* ---------- QUÉ INCLUYE (spec sheet, sin iconos) ---------- */
.dw-incluye-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
.dw-incluye-item { padding: 1.3rem 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.dw-incluye-item span:first-child { font-size: .88rem; color: var(--txt); }
.dw-incluye-item span:last-child { font-size: .68rem; letter-spacing: .06em; color: var(--txt-muted); white-space: nowrap; }

/* ---------- PROCESO (timeline vertical) ---------- */
.dw-proceso { background: var(--bg2); }
.dw-timeline { position: relative; max-width: 720px; margin: 4rem auto 0; }
.dw-timeline::before { content: ''; position: absolute; left: 68px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.dw-tl-item { display: grid; grid-template-columns: 140px 1fr; gap: 2rem; padding: 2.4rem 0; position: relative; }
.dw-tl-num { font-family: 'Cormorant', serif; font-style: italic; font-weight: 300; font-size: 1.1rem; color: var(--txt-muted); }
.dw-tl-title { font-family: 'Cormorant', serif; font-size: 1.3rem; font-weight: 400; margin-bottom: .5rem; }
.dw-tl-desc { font-size: .82rem; color: var(--txt-dim); line-height: 1.85; max-width: 420px; }

/* ---------- SEO (sección con imagen de fondo fija) ----------
   Solo la página de diseño web la usa. Requiere la clase
   `.dw-seo-section` en la etiqueta <section> — NO toca `.dw-section`. */
.dw-seo-section {
  min-height: 100vh;
  background-color: #000;
  overflow: hidden;
}
.dw-seo-section::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.dw-seo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(70%);
}
.dw-seo-section .dw-wrap { position: relative; z-index: 2; }

.dw-seo-flow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 3rem 0 2.6rem; }
.dw-seo-node { font-family: 'Cormorant', serif; font-size: 1.15rem; font-style: italic; color: var(--txt); padding: .7rem 1.4rem; border: 1px solid var(--border); border-radius: 100px; }
.dw-seo-arrow { color: var(--txt-muted); font-size: .9rem; }

/* Corrección específica para la página con video (.dw-inversion) */
.dw-section.dw-inversion {
  position: relative; /* Crea el marco de contención para el video */
  overflow: hidden;
}

/* Capa oscura superpuesta para asegurar el contraste del texto blanco */
.dw-section.dw-inversion::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Degradado oscuro uniforme (puedes subir el 0.6 a 0.7 si necesitas más oscuridad) */
  background: rgba(0, 0, 0, 0.295); 
  z-index: 1 !important;
  pointer-events: none;
}

/* Forzar al video a actuar como fondo dentro de esta sección */
.dw-inversion video.dw-seo-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none;
  z-index: 0 !important;
  /* Bajamos el brillo al 40% para que el video no compita con el texto blanco */
  filter: brightness(40%) !important; 
}

/* Asegurar que el contenedor del texto quede por encima del video y de la capa oscura */
.dw-inversion .dw-wrap {
  position: relative !important;
  z-index: 2 !important;
}


/* ---------- PANAMÁ ---------- */
.dw-panama-stmt { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.5; max-width: 720px; }
.dw-panama-stmt em { font-style: italic; color: var(--txt-dim); }

/* ---------- INVERSIÓN ---------- */
.dw-inversion { text-align: center; }
.dw-inversion-price { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(3.2rem, 7vw, 5.6rem); letter-spacing: -.02em; margin: 1.2rem 0 .6rem; }
.dw-inversion-price em { font-style: italic; color: var(--accent); }
.dw-inversion-note { font-size: .8rem; color: var(--accent); }

/* ---------- FAQ ---------- */
.dw-faq-list { max-width: 760px; margin: 3rem auto 0; border-top: 1px solid var(--border); }
.dw-faq-list details { border-bottom: 1px solid var(--border); padding: .7rem 1.4rem; }
.dw-faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: 'Cormorant', serif; font-size: 1.15rem; color: var(--txt); }
.dw-faq-list summary::-webkit-details-marker { display: none; }
.dw-faq-list summary::after { content: '+'; font-size: 1.3rem; color: var(--txt-muted); transition: transform .3s; }
.dw-faq-list details[open] summary::after { transform: rotate(45deg); }
.dw-faq-list p { font-size: .84rem; color: var(--txt-dim); line-height: 1.85; margin-top: 1rem; max-width: 600px; }

/* ---------- CTA + CROSS LINKS ---------- */
.dw-cross { padding: 3.5rem 3rem; border-top: 1px solid var(--border); }
.dw-cross-list { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: center; }
.dw-cross-list a { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-muted); text-decoration: none; transition: color .25s; }
.dw-cross-list a:hover, .dw-cross-list a.is-current { color: var(--txt); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .dw-wrap { padding: 0 1.6rem; }
  .dw-section { padding: 5.5rem 0; }
  .dw-problema-grid, .dw-dd-split, .dw-tipos-grid, .dw-concepto-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .dw-dd-line { display: none; }
  .dw-incluye-grid { grid-template-columns: 1fr; }
  .dw-timeline::before { left: 10px; }
  .dw-tl-item { grid-template-columns: 24px 1fr; gap: 1.2rem; }
  .dw-hero-content { padding: 0 1.6rem 3.5rem; }
  .dw-foto-head, .dw-gallery { padding-left: 1.6rem; padding-right: 1.6rem; }
}