/* Giro Digital — sitio v4 minimal. Base compartida entre index.html y marketing.html */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { text-decoration: none; }
img, video { max-width: 100%; }

@keyframes gdFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes gdFlapTop { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes gdFlapBottom { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

.fade-up { animation: gdFadeUp 420ms cubic-bezier(.2,.7,.2,1) both; }

/* --- hover utilities (reemplazan el atributo style-hover del editor) --- */
.hover-orange:hover { border-color: #FF6B00 !important; }
.hover-orange-soft:hover { border-color: rgba(255,107,0,.55) !important; }
.hover-orange-glow:hover {
  border-color: rgba(255,107,0,.6) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(255,107,0,.16), 0 12px 28px rgba(13,13,13,.22) !important;
}
.hover-orange-glow-lg:hover {
  border-color: rgba(255,107,0,.7) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), 0 0 0 4px rgba(255,107,0,.16), 0 14px 34px rgba(0,0,0,.36) !important;
}
.hover-social:hover {
  border-color: rgba(255,107,0,.55) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 0 0 4px rgba(255,107,0,.14), 0 14px 30px rgba(0,0,0,.5) !important;
}
input.gd-input:focus { border-color: #FF6B00 !important; }

/* --- card-flip (sección "La prueba") --- */
.flip-card { perspective: 1000px; }
.flip-card-inner {
  position: relative; transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner { transform: rotateY(180deg); }
.flip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; align-items: center; }

/* --- flip-digit tiles (contadores estilo split-flap) --- */
.flap-row { display: flex; gap: 4px; font-size: clamp(30px,3.6vw,52px); }
.flap-digit {
  position: relative; display: inline-block; width: .72em; height: 1.24em;
  border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.45);
  color: #F4F1EC; font-family: 'Bebas Neue', 'JetBrains Mono', sans-serif; font-weight: 400; letter-spacing: .01em;
  background: linear-gradient(180deg,#232323 0%,#1E1E1E 49.6%,#101010 50.4%,#181818 100%);
}
.flap-digit.accent { color: #FF6B00; }
.flap-digit::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(0,0,0,.72); box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.flap-digit span { display: block; height: 1.24em; line-height: 1.24em; text-align: center; }
.flap-digit.flapping span { animation: gdFlapTop 320ms cubic-bezier(.5,0,.8,.3); }

/* --- toggle switch (sección "Tu cuenta, siempre activa") --- */
.gd-toggle {
  cursor: pointer; width: 56cqw; max-width: 128px; aspect-ratio: 2.1/1; margin: 5% 0; position: relative;
  border-radius: 999px; background: linear-gradient(180deg, rgba(13,13,13,.34), rgba(13,13,13,.18));
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: inset 0 2px 5px rgba(13,13,13,.42), inset 0 -1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(13,13,13,.22);
  display: flex; align-items: center; padding: 6%;
}
.gd-toggle .knob {
  position: absolute; z-index: 3; left: 4%; top: 6%; bottom: 6%; width: 56%; border-radius: 999px;
  transition: left .34s cubic-bezier(.2,.7,.2,1);
  background: linear-gradient(180deg, rgba(232,214,206,.5), rgba(143,165,175,.42));
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 3px 8px rgba(13,13,13,.35), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(13,13,13,.12);
  display: flex; align-items: center; justify-content: center; gap: 9%;
}
.gd-toggle .knob i { display: block; width: 5%; height: 44%; border-radius: 2px; background: linear-gradient(180deg, rgba(13,13,13,.22), rgba(13,13,13,.08)); }
.gd-toggle.on .knob { left: 40%; }
.gd-toggle svg.wave { position: absolute; z-index: 2; left: 62%; width: 32%; height: auto; stroke: rgba(13,13,13,.42); transition: left .34s cubic-bezier(.2,.7,.2,1), filter .34s cubic-bezier(.2,.7,.2,1); }
.gd-toggle.on svg.wave { left: 6%; stroke: rgba(255,138,43,.95); filter: drop-shadow(0 0 5px rgba(255,107,0,.75)) drop-shadow(0 0 12px rgba(255,107,0,.4)); }

/* --- carousels genéricos (deck de 9, prueba de 4, reels de 9) --- */
.carousel { position: relative; overflow: visible; touch-action: pan-y; }
.carousel-card {
  position: absolute; left: 50%; top: 50%; cursor: pointer;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1), opacity 420ms cubic-bezier(.2,.7,.2,1);
}
.carousel-card .img-wrap { transition: opacity 420ms cubic-bezier(.2,.7,.2,1), filter 420ms cubic-bezier(.2,.7,.2,1); }

/* --- toast de feedback del formulario --- */
.form-msg { font-family:'JetBrains Mono',monospace; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; min-height: 1.4em; }
.form-msg.ok { color: #7ABF8E; }
.form-msg.err { color: #E06A5A; }

/* --- frames de tarjeta reutilizables --- */
.deck-card-frame {
  position: relative; aspect-ratio: 9/16; border-radius: 30px; padding: 7px;
  background: linear-gradient(160deg, rgba(232,214,206,.26), rgba(201,196,208,.1) 34%, rgba(0,0,0,.5));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 2px 0 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.62), inset -2px 0 0 rgba(0,0,0,.45), 0 34px 80px rgba(0,0,0,.65);
}
.deck-card-frame .img-wrap {
  position: absolute; inset: 7px; border-radius: 23px; overflow: hidden;
  background: linear-gradient(165deg, rgba(196,110,86,.28), rgba(122,140,120,.2) 46%, rgba(120,138,158,.3));
  mask-image: radial-gradient(88% 88% at 50% 50%, #000 0%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.7) 54%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.18) 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(88% 88% at 50% 50%, #000 0%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.7) 54%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.18) 84%, rgba(0,0,0,0) 100%);
}
.deck-card-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prueba-card-frame {
  position: relative; aspect-ratio: 3/4; border-radius: 30px; padding: 7px;
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.14) 34%, rgba(13,13,13,.22));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(13,13,13,.18), 0 26px 60px rgba(13,13,13,.22);
}
.prueba-card-frame .img-wrap {
  position: absolute; inset: 7px; border-radius: 23px; overflow: hidden;
  mask-image: radial-gradient(88% 88% at 50% 50%, #000 0%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.7) 54%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.18) 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(88% 88% at 50% 50%, #000 0%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.7) 54%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.18) 84%, rgba(0,0,0,0) 100%);
}
.prueba-card-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.reel-card-frame {
  position: relative; width: 100%; height: 100%; border-radius: 20px; padding: 10px;
  background: linear-gradient(150deg, rgba(255,255,255,.36), rgba(255,255,255,.08) 40%, rgba(13,13,13,.42));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.5);
}
.reel-card-frame .vid-wrap { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: rgba(13,13,13,.3); }
.reel-card-frame video { position: absolute; left: 0; top: 0; width: 100%; height: 112%; object-fit: cover; transform: translateY(-6%); }

/* --- FAQ (details/summary) --- */
.gd-faq-item + .gd-faq-item { border-top: 1px solid rgba(255,255,255,.12); }
.gd-faq-item summary { cursor: pointer; list-style: none; }
.gd-faq-item summary::-webkit-details-marker { display: none; }
.gd-faq-item summary::after { content: '+'; font-family: 'JetBrains Mono', monospace; font-size: 16px; color: #FF6B00; flex: 0 0 auto; }
.gd-faq-item[open] summary::after { content: '\2013'; }

/* --- responsive: nav mobile simplificado --- */
@media (max-width: 640px) {
  /* la barra de contacto (mail/tel) duplica al botón de WhatsApp y en mobile
     se come espacio arriba del fold sin aportar nada nuevo */
  .gd-topbar { display: none !important; }
  header nav { flex: 1 1 100% !important; gap: 8px !important; justify-content: center !important; font-size: 9px !important; letter-spacing: .12em !important; }
  header nav a { padding: 8px 2px; }
  header nav a[aria-label="WhatsApp"] { width: 22px !important; height: 22px !important; }
  /* header de 3 columnas (marketing.html, contenido-ia.html): en grid, si el nav
     envuelve a varias líneas queda más alto que logo/CTA, y esas dos columnas
     terminan centradas verticalmente "flotando" en medio del nav. Se pasa a
     flex-wrap para que nav/logo/CTA se apilen como bloques enteros. */
  .gd-header-grid { display: flex !important; flex-wrap: wrap; justify-content: space-between; }
  .gd-header-grid nav { order: 1; width: 100%; justify-content: center; }
  .gd-header-grid img { order: -1; }
}

/* --- responsive: sección "Siempre activa" (break) — en desktop el número gigante
   y el panel de íconos son dos capas superpuestas (una a ancho completo, otra al
   40% a la derecha); en mobile ese 40% no alcanza para el texto y todo se pisa,
   así que se apilan en flujo normal en vez de superponerse --- */
@media (max-width: 760px) {
  [data-break-section] {
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    padding-top: clamp(48px, 12vw, 80px) !important;
    padding-bottom: clamp(40px, 9vw, 64px) !important;
  }
  .gd-break-num-wrap {
    position: relative !important;
    inset: auto !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin-bottom: clamp(28px, 8vw, 44px);
  }
  .gd-break-panel {
    position: relative !important;
    min-height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }
  .gd-break-eyebrow { white-space: normal !important; }
  .gd-break-icons { justify-content: center !important; }
  /* el marco decorativo tipo "tarjeta de telefono" queda con top:16% absoluto
     fijo y se pisa con el numero/texto que ahora fluye en columna, en mobile
     no aporta (es puro adorno), se oculta */
  .gd-break-frame { display: none !important; }
}

/* --- responsive: sección "Servicios" de marketing.html (panel + carrusel de reels) —
   en desktop es un grid fijo de 2 columnas (1fr 1.3fr) que en mobile aplasta ambas
   columnas y hace que el selector de tarjetas 01-04 y el badge flotante queden
   rotos; se apila en una sola columna --- */
@media (max-width: 760px) {
  .gd-svc-grid { grid-template-columns: 1fr !important; }
  .gd-svc-video {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: clamp(24px, 6vw, 36px) !important;
  }
  .gd-svc-video .carousel { transform: none !important; margin: 0 auto !important; }
  .gd-svc-badge {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 16px !important;
  }
  /* la fila de tarjetas 01-04 es un flex con overflow-x:auto pensado para
     scrollear, pero dentro de un flex item sin min-width:0 el navegador no
     la achica: scrollWidth queda igual a clientWidth y las tarjetas 02-04
     quedan atrapadas fuera de vista, sin poder swipearlas. Se pasa a wrap
     (grilla 2x2) para no depender de ese scroll roto. */
  .gd-svc-cards { flex-wrap: wrap !important; overflow-x: visible !important; }
  .gd-svc-cards [data-svc-card] { flex: 1 1 calc(50% - 3px) !important; min-width: calc(50% - 3px) !important; }
}