/* Quita la linea/ borde de la seccion inicio */
#inicio { transform: translateZ(0); }
#inicio::before,
#inicio::after {
  content: none !important;
  display: none !important;
}

/* Cierra la costura de 1px entre el hero (#inicio) y la siguiente
   seccion (#galerias): el degradado del hero termina exactamente en
   el mismo color solido que el fondo de #galerias, pero el redondeo
   de subpixeles entre ambas secciones deja una linea clara visible. */
#galerias {
  position: relative;
  z-index: 2;
  margin-top: -3px;
}

/* =====================================================================
   Menu movil nuevo (boton + panel), construido desde cero
   =====================================================================
   El sistema de menu original de Nicepage (offcanvas con animacion de
   "empuje" via JS, ver theme.css) se rompe en Safari real de iPhone de
   una forma que no se pudo diagnosticar sin acceso a un dispositivo
   fisico -- se probo y revirtio dos veces. En vez de seguir parchando
   un mecanismo que no se puede depurar a distancia, este es un menu
   propio y autocontenido: no depende de theme.js en absoluto, solo usa
   transform/opacity con transiciones CSS estandar (las mismas
   propiedades que causaron problemas antes SI dependian de una
   animacion de fondo del sitio; aqui la animacion es 100% propia).
   El boton/panel originales de Nicepage se ocultan en el mismo
   breakpoint (539px) donde ya cambiaban a formato movil. */
/* El logo (compass) del header queda centrado ~26px desde arriba
   cuando el header no tiene padding extra; se replica ese mismo
   centro aqui para que el boton quede alineado con el logo, no
   "flotando" mas arriba. Ver tambien el padding-top: env(...) que se
   le agrega a <header> mas abajo, para que ambos se corran juntos en
   iPhones con notch/dynamic island. */
/* Sin circulo de fondo: solo el icono, sobre la barra de navegacion
   (que ya tiene su propio fondo). El area sigue midiendo lo mismo que
   el extremo de la barra (via JS) para mantener buen tamano de toque,
   simplemente ya no se pinta ningun fondo/borde ahi. */
.dt-menu-btn {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 26px);
  right: max(16px, env(safe-area-inset-right));
  z-index: 1200;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  outline-offset: 3px;
}
/* Header: dejar espacio para el notch/dynamic island y que la barra
   de estado de iOS no quede sobre fondo blanco. El header es
   transparente y flota sobre #inicio, que ya cubre toda la pantalla
   (incluida el area segura) gracias a viewport-fit=cover; aqui solo
   se recorre el CONTENIDO del header hacia abajo, el fondo detras se
   sigue viendo igual. */
header.u-header {
  padding-top: env(safe-area-inset-top);
}
.dt-menu-btn-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}
/* Antes las barras giraban y formaban una X propia justo cuando el
   boton entero tambien se desvanecia -- se veian, un instante, dos X
   de tamano distinto encimadas (esta grande morfeando + la del panel
   ya abierta). Mas simple y sin ese cruce: el icono de 3 barras solo
   se desvanece tal cual, sin transformarse; la unica X que aparece es
   la del boton de cerrar del panel. */
/* El panel abre su propio boton de cerrar (.dt-menu-close) justo en
   esta misma esquina superior derecha. Con los dos botones fijos ahi
   a la vez se veian superpuestos, como una "X doble" (confirmado con
   captura real). El hamburger termina de morfear a X y se desvanece,
   dejando solo el boton de cerrar del panel. */
.dt-menu-btn.is-open {
  transition: opacity 0.2s ease 0.15s, visibility 0s linear 0.35s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dt-menu {
  position: fixed;
  inset: 0;
  z-index: 1199;
  visibility: hidden;
  pointer-events: none;
}
.dt-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}
.dt-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 6, 0.55);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dt-menu.is-open .dt-menu-backdrop {
  opacity: 1;
}
.dt-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  height: 100vh;
  height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) 32px max(32px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 45%),
    linear-gradient(rgba(15, 13, 11, 0.97), rgba(15, 13, 11, 0.97));
  backdrop-filter: blur(40px) saturate(1.7);
  -webkit-backdrop-filter: blur(40px) saturate(1.7);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
.dt-menu.is-open .dt-menu-panel {
  transform: translateX(0);
}
.dt-menu-close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  outline: none;
  outline-offset: 3px;
}
/* Safari/iOS dibuja su propio anillo de :focus en botones tocados,
   que junto al borde circular propio se veia como "dos botones"
   superpuestos (reportado en captura real). Se reemplaza por un
   anillo propio, mas prolijo, solo cuando el foco es visible
   (teclado), no en cada tap. */
.dt-menu-close:focus-visible,
.dt-menu-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
}
/* !important: theme.css trae "p:not(.u-text-variant){font-size:1.125rem}"
   que, por el :not(), pesa mas que un simple .dt-menu-logo y le ganaba. */
.dt-menu-logo {
  margin: 0 0 40px;
  font-family: Montserrat, sans-serif;
  font-size: 2rem !important;
  color: #fff;
  letter-spacing: 0.02em;
}
.dt-menu-logo span {
  font-weight: 800;
}
.dt-menu-links {
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dt-menu-links li {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dt-menu.is-open .dt-menu-links li {
  opacity: 1;
  transform: translateX(0);
}
.dt-menu.is-open .dt-menu-links li:nth-child(1) { transition-delay: 0.1s; }
.dt-menu.is-open .dt-menu-links li:nth-child(2) { transition-delay: 0.16s; }
.dt-menu.is-open .dt-menu-links li:nth-child(3) { transition-delay: 0.22s; }
.dt-menu.is-open .dt-menu-links li:nth-child(4) { transition-delay: 0.28s; }
.dt-menu.is-open .dt-menu-links li:nth-child(5) { transition-delay: 0.34s; }
.dt-menu-links a,
.dt-menu-links a:link,
.dt-menu-links a:visited,
.dt-menu-links a:active {
  display: block;
  padding: 14px 4px;
  font-family: Montserrat, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.dt-menu-links a:hover,
.dt-menu-links a:focus-visible {
  color: #d9b088;
  padding-left: 10px;
}
/* Boton "Solicitar diseno" del menu: mismo crema (#f2f2f2) que el
   boton "Diseñemos" del hero, para que se sienta parte del mismo
   sitio en vez de un boton de WhatsApp generico pegado ahi. El brillo
   diagonal que lo recorre en hover retoma el mismo lenguaje "liquid
   glass" del resto del sitio. */
/* color en :link/:visited/:active explicito: es un <a>, y sin esto
   algunos navegadores le ponen el azul/morado de enlace visitado
   despues de abrir WhatsApp una vez (reportado en captura real). */
.dt-menu-cta,
.dt-menu-cta:link,
.dt-menu-cta:visited,
.dt-menu-cta:active {
  position: relative;
  display: block;
  margin-top: 28px;
  padding: 14px 20px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #111;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.dt-menu.is-open .dt-menu-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}
.dt-menu-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.dt-menu-cta:hover,
.dt-menu-cta:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
.dt-menu-cta:hover::before,
.dt-menu-cta:focus-visible::before {
  left: 130%;
}
@media (prefers-reduced-motion: reduce) {
  .dt-menu-cta::before {
    display: none;
  }
}
body.dt-menu-lock {
  overflow: hidden;
}
@media (max-width: 539px) {
  .dt-menu-btn {
    display: flex;
  }
  header .menu-collapse {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dt-menu-btn-bar,
  .dt-menu-backdrop,
  .dt-menu-panel,
  .dt-menu-links li,
  .dt-menu-cta {
    transition: none !important;
  }
}

/* ===== Boton flotante de WhatsApp: respeta el area segura en iPhones =====
   !important porque cada pagina trae su propio <style> con .whatsapp-glow
   en el body, despues de este archivo en el cascade. */
.whatsapp-glow {
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  right: max(20px, calc(env(safe-area-inset-right) + 16px)) !important;
}
@media (max-width: 480px) {
  .whatsapp-glow {
    width: 56px !important;
    height: 56px !important;
  }
  .whatsapp-icon {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ===== Boton de WhatsApp: mas animado y profesional =====
   Entrada suave al cargar, respiracion sutil (ademas del pulso que ya
   tenia), y una etiqueta que se despliega al pasar el mouse -- patron
   habitual en botones de WhatsApp bien resueltos. */
@keyframes waEntrance {
  from { opacity: 0; transform: translateY(16px) scale(0.7); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes waBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.whatsapp-glow {
  animation: waEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
             whatsappPulse 2.6s infinite 0.8s,
             waBreathe 3.2s ease-in-out infinite 1.5s !important;
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.35s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  overflow: visible !important;
  white-space: nowrap;
}
.whatsapp-glow::after {
  content: "¿Hablamos?";
  position: absolute;
  right: 100%;
  margin-right: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(17, 20, 22, 0.92);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.whatsapp-glow:hover,
.whatsapp-glow:focus-visible {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45) !important;
  animation-play-state: paused, paused, paused !important;
}
.whatsapp-glow:hover::after,
.whatsapp-glow:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}
.whatsapp-icon {
  transition: transform 0.3s ease;
}
.whatsapp-glow:hover .whatsapp-icon {
  transform: rotate(-8deg) scale(1.08);
}
@media (max-width: 480px) {
  /* En movil no hay hover real: se omite la etiqueta para no dejarla
     pegada por un tap accidental. */
  .whatsapp-glow::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-glow {
    animation: none !important;
  }
}

/* ===== Barra de navegacion: efecto "liquid glass" =====
   backdrop-filter NO debe ir en la lista de "transition": en Chromium,
   una propiedad marcada !important que ademas aparece en
   transition-property deja de aplicarse (bug conocido). Por eso el
   blur se declara aparte, sin transicionar (es un valor fijo, no
   necesita animarse), y solo el box-shadow transiciona.
   El fondo original (u-shading) es un tinte casi opaco -- con eso
   detras, el blur casi no se nota. Aqui se aclara/adelgaza el tinte
   para que se vea de verdad lo que hay detras, borroso. */
header .u-group-1 {
  position: relative;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.1)),
    linear-gradient(rgba(10, 10, 14, 0.38), rgba(10, 10, 14, 0.38)) !important;
  backdrop-filter: blur(24px) saturate(1.9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.32),
    0 2px 10px rgba(0, 0, 0, 0.18),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 30px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.3s ease;
  overflow: hidden;
}
/* Brillo diagonal que recorre la barra: la firma visual del "liquid glass" */
header .u-group-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.18) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* =====================================================================
   Portafolio.html: fichas de proyecto rotas entre ~576px y ~1199px
   =====================================================================
   Cada ficha de proyecto (#block-5 Fulgencio, #block-3 Nectar,
   #block-4 Sukabumi, #block-6 Santo Remedio) se armo en el editor
   visual de Nicepage colocando cada imagen con margenes en pixeles
   fijos, calibrados a mano solo para escritorio (>=1200px) y para
   movil (<=575px). Portafolio.css no trae reglas completas para el
   rango intermedio (tablet / ventana redimensionada), asi que ahi
   las imagenes terminan con margenes de miles de pixeles heredados
   del breakpoint equivocado: aparecen fuera de pantalla, superpuestas
   o montadas unas sobre otras.
   En vez de perseguir esos numeros mal calibrados (fragil por diseno,
   se puede romper de nuevo con el proximo ajuste), en este rango se
   reemplaza el "colage" de posiciones fijas por una galeria simple en
   flex-wrap: nunca se sale de su contenedor sin importar el ancho. Las
   texturas de fondo muy transparentes (pensadas para sangrar fuera del
   lienzo original) se ocultan porque en flujo normal solo se ven como
   manchas sin sentido. */
@media (min-width: 576px) and (max-width: 1199px) {
  /* #block-4 (Sukabumi) envuelve su contenido en un div .u-sheet-1
     extra; el resto de las secciones lo tienen como hijos directos.
     Se vuelve galeria el nivel que realmente contiene las imagenes. */
  #block-5, #block-3, #block-6, #block-4 .u-sheet-1 {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    justify-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 64px 24px !important;
    gap: 18px !important;
    background-attachment: scroll !important;
  }
  #block-4 {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Oculta texturas y fondos puramente decorativos */
  #block-5 img.u-opacity-5, #block-5 img.u-opacity-10, #block-5 img.u-opacity-20, #block-5 img.u-opacity-30,
  #block-3 img.u-opacity-5, #block-3 img.u-opacity-10, #block-3 img.u-opacity-20, #block-3 img.u-opacity-30,
  #block-4 img.u-opacity-5, #block-4 img.u-opacity-10, #block-4 img.u-opacity-20, #block-4 img.u-opacity-30,
  #block-6 img.u-opacity-5, #block-6 img.u-opacity-10, #block-6 img.u-opacity-20, #block-6 img.u-opacity-30,
  #block-3 img[src*="fondo.webp"], #block-3 img[src*="bola1.webp"],
  #block-4 img[src*="curva1.webp"], #block-4 img[src*="Pngtreevertically"],
  #block-6 img[src*="verdee1.webp"],
  #block-3 .u-shape-round, #block-4 .u-shape-round {
    display: none !important;
  }

  /* Titulo y descripcion primero, en flujo normal, legibles */
  #block-5 h1.u-text-1, #block-3 h1.u-text-1, #block-4 h1.u-text-1, #block-6 h1.u-text-1 {
    order: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    transform: none !important;
    float: none !important;
    text-align: center !important;
    font-size: clamp(2rem, 5vw, 2.75rem) !important;
    line-height: 1.15 !important;
  }
  #block-5 h1.u-text-2, #block-3 h1.u-text-2, #block-4 h1.u-text-2, #block-6 h1.u-text-2 {
    order: 2 !important;
    position: static !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    transform: none !important;
    float: none !important;
    text-align: center !important;
    font-size: clamp(1rem, 2.4vw, 1.15rem) !important;
    line-height: 1.5 !important;
  }

  /* Insignias Ai/Ps: despues del texto, antes de la galeria */
  #block-5 .u-custom-html-1, #block-3 .u-custom-html-1, #block-4 .u-custom-html-1, #block-6 .u-custom-html-1 {
    order: 3 !important;
    position: static !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 8px auto 0 !important;
    transform: none !important;
  }

  /* Imagenes restantes: tarjetas de galeria que envuelven en flex-wrap */
  #block-5 .u-rotation-parent, #block-3 .u-rotation-parent, #block-4 .u-rotation-parent, #block-6 .u-rotation-parent,
  #block-5 > img, #block-3 > img, #block-4 .u-sheet-1 > img, #block-6 > img {
    order: 4;
    position: static !important;
    display: block !important;
    flex: 1 1 260px !important;
    width: auto !important;
    max-width: 340px !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    float: none !important;
    inset: auto !important;
  }
  #block-5 .u-rotation-parent img, #block-3 .u-rotation-parent img, #block-4 .u-rotation-parent img, #block-6 .u-rotation-parent img {
    position: static !important;
    width: 100% !important;
    height: 280px !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    transform: none !important;
  }
  #block-5 > img, #block-3 > img, #block-4 .u-sheet-1 > img, #block-6 > img {
    height: 280px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* #block-7 (tarjeta de contacto/footer): mismo problema puntual con
     el logo y la linea decorativa saliendose de su lugar. Se deja en
     flujo de bloque normal en vez de canvas de margenes fijos. */
  #block-7 {
    min-height: 0 !important;
    height: auto !important;
    padding: 48px 24px !important;
  }
  #block-7 .u-rotation-parent-1,
  #block-7 .u-group-1 {
    position: static !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  #block-7 img.u-image-1 {
    display: none !important;
  }
  #block-7 img.u-image-2 {
    position: static !important;
    width: 160px !important;
    height: auto !important;
    margin: 0 auto 16px !important;
    transform: none !important;
    display: block !important;
  }
  #block-7 .u-line-vertical {
    display: none !important;
  }
}