:root {
  --navy: #10213f;
  --blue: #1e3a8a;
  --blue-dark: #172554;
  --light-blue: #eff6ff;
  --text: #334155;
  --muted: #64748b;
  --border: #dbe4f0;
  --background: #f8fafc;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Poppins", Arial, sans-serif;
  line-height: 1.6;
}

.header-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px -8px rgba(16, 33, 63, 0.25);
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

.nav-toggle-checkbox {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 0.4rem;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) {
  opacity: 0;
}

.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.logo {
  display: flex;
  align-items: center;
  width: 180px;
  height: 72px;
  overflow: hidden;
  text-decoration: none;
}

.logo img {
  display: block;
  width: 180px;
  height: auto;
  mix-blend-mode: multiply;
}
.navigation {
  display: flex;
  gap: 1.5rem;
}

.navigation a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.navigation a:hover {
  color: var(--blue);
}

/* Las tres formas juntas (ficha, avión, ventana con lupa) aparecen bajo
   cada enlace del menú principal al pasar el ratón — mismo trío en
   todos, en vez de una simple línea. Usa ::before (no ::after) porque
   "Servicios" ya usa ::after para su flechita. */
.navigation > a,
.nav-dropdown-label {
  position: relative;
}

.navigation > a::before,
.nav-dropdown-label::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 24' fill='none' stroke='%231e3a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M5 16c0-1.5 1.5-2.5 3-2.5s3 1 3 2.5'/%3E%3Cline x1='14' y1='9' x2='19' y2='9'/%3E%3Cline x1='14' y1='12' x2='19' y2='12'/%3E%3Cline x1='14' y1='15' x2='17' y2='15'/%3E%3C/g%3E%3Cg transform='translate(27,0)'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22 11 13 2 9 22 2Z'/%3E%3C/g%3E%3Cg transform='translate(54,0)'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cline x1='2' y1='8' x2='22' y2='8'/%3E%3Ccircle cx='16' cy='15' r='2.6'/%3E%3Cline x1='18' y1='17' x2='20' y2='19'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: scale(0.4) translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.navigation > a:hover::before,
.navigation > a:focus-visible::before,
.nav-dropdown:hover .nav-dropdown-label::before,
.nav-dropdown-label:focus-visible::before {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .navigation > a::before,
  .nav-dropdown-label::before {
    transition: opacity 0.2s ease;
    transform: none;
  }

  .navigation > a:hover::before,
  .navigation > a:focus-visible::before,
  .nav-dropdown:hover .nav-dropdown-label::before,
  .nav-dropdown-label:focus-visible::before {
    opacity: 1;
    transform: none;
  }
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  user-select: none;
}

.nav-dropdown-label::after {
  content: "▾";
  font-size: 0.65rem;
  color: var(--muted);
}

.nav-dropdown-label:hover,
.nav-dropdown:hover .nav-dropdown-label,
.nav-dropdown:focus-within .nav-dropdown-label {
  color: var(--blue);
}

.nav-dropdown:hover .nav-dropdown-label::after,
.nav-dropdown:focus-within .nav-dropdown-label::after {
  content: "▴";
}

/* El desplegable se abre/cierra con :hover (y :focus-within para
   navegación por teclado) — sin JavaScript. El padding-top actúa de
   puente invisible entre el enlace "Servicios" y la tarjeta, para que
   al bajar el ratón en diagonal no se pierda el :hover por el hueco. */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 0.75rem;
  min-width: 190px;
  z-index: 30;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu-inner {
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 20px 40px -24px rgba(16, 33, 63, 0.35);
}

.nav-dropdown-menu a {
  padding: 0.6rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
}

.nav-dropdown-menu a:hover {
  background: var(--light-blue);
}

/* Icono propio por servicio en el desplegable: cada enlace tiene su
   propio dibujo (mismo estilo de línea que el resto del sitio) que
   aparece deslizándose desde la derecha al pasar el ratón — "Apps a
   medida" con una ficha de datos, "Automatización" con la flecha de
   envío, "Páginas web" con un calendario (de los 3 iconos que mandaste,
   este era el que quedaba libre). */
.nav-dropdown-menu a {
  position: relative;
  padding-right: 2.1rem;
}

.nav-dropdown-menu a::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.nav-dropdown-menu a:hover::after,
.nav-dropdown-menu a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.nav-dropdown-menu a[href*="apps-a-medida"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M5 16c0-1.5 1.5-2.5 3-2.5s3 1 3 2.5'/%3E%3Cline x1='14' y1='9' x2='19' y2='9'/%3E%3Cline x1='14' y1='12' x2='19' y2='12'/%3E%3Cline x1='14' y1='15' x2='17' y2='15'/%3E%3C/svg%3E");
}

.nav-dropdown-menu a[href*="automatizacion"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22 11 13 2 9 22 2Z'/%3E%3C/svg%3E");
}

.nav-dropdown-menu a[href*="paginas-web"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cline x1='2' y1='8' x2='22' y2='8'/%3E%3Ccircle cx='16' cy='15' r='2.6'/%3E%3Cline x1='18' y1='17' x2='20' y2='19'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-menu a::after {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

.hero {
  position: relative;
  background-image: url("../images/hero-notas-obra.jpg");
  background-size: cover;
  background-position: center center;
  padding: 5.5rem 2rem;
  overflow: hidden;
}

/* Vídeo de fondo del hero (estrellas/vía láctea): la imagen de fondo de
   arriba se queda como base — si el vídeo no carga (o no se pide, ver
   js/main.js), se ve esa imagen igual que antes. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa oscura encima del vídeo/imagen para que el texto blanco del hero
   siga siendo legible — mismo degradado que tenía antes el hero. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 33, 63, 0.9),
    rgba(16, 33, 63, 0.75)
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hero-inner h1 {
  color: var(--white);
}

.hero-slogan {
  margin: 0.75rem 0 1.5rem;
  color: #bfdbfe;
  font-weight: 700;
  font-size: 1.1rem;
}

.hero-inner .hero-text {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  color: #cbd5e1;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

h1,
h2,
h3 {
  color: var(--navy);
  line-height: 1.15;
}

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.02em;
}

.hero-text {
  max-width: 480px;
  margin: 1rem 0 2rem;
  color: var(--muted);
  font-size: 1.2rem;
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  padding: 0.85rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease;
}

/* Efecto de relleno ("fill hover"): un color más oscuro entra deslizándose
   desde la izquierda al pasar el ratón, en vez de cambiar de color de
   golpe. En móvil se dispara igual, pero solo mientras el dedo está
   apoyado (:active) — al no existir el hover, dura lo que dura el toque,
   no se queda encendido. */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blue-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.button:hover,
.button:active {
  transform: translateY(-2px);
}

.button:hover::before,
.button:active::before {
  transform: scaleX(1);
}

.section,
.contact {
  max-width: 1120px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.section h2,
.contact h2 {
  max-width: 720px;
  margin: 0 0 2.5rem;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.015em;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}

.about-text {
  font-size: 1.1rem;
  color: var(--text);
}

.about-text + .about-text {
  margin-top: 1.25rem;
}

.about-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px -24px rgba(16, 33, 63, 0.35);
}

.proceso-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}

.proceso-copy h2 {
  margin-top: 0;
}

.proceso-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px -24px rgba(16, 33, 63, 0.35);
}

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.showcase-intro {
  max-width: 680px;
  margin: -1.5rem 0 2.5rem;
  color: var(--muted);
  font-size: 1.1rem;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.showcase-item {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.showcase-frame {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 260px;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--white);
  box-shadow: 0 20px 40px -28px rgba(16, 33, 63, 0.35);
  overflow: hidden;
}

.showcase-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.showcase-item h3 {
  margin: 0;
  font-size: 1.1rem;
}

.showcase-item h3 span {
  color: var(--blue);
}

.showcase-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.card {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--white);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -28px rgba(16, 33, 63, 0.35);
  border-color: transparent;
}

.card:hover::before {
  transform: scaleX(1);
}

.card-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  transition: transform 0.25s ease;
}

.card:hover .card-icon {
  transform: translateY(-3px) scale(1.08);
}

.card-icon-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.card-icon-group img {
  display: block;
  width: 32px;
  height: 32px;
  transition: transform 0.25s ease;
}

.card:hover .card-icon-group img:nth-child(1) { transform: translateY(-3px) scale(1.08); }
.card:hover .card-icon-group img:nth-child(2) { transform: translateY(-3px) scale(1.08); transition-delay: 0.04s; }
.card:hover .card-icon-group img:nth-child(3) { transform: translateY(-3px) scale(1.08); transition-delay: 0.08s; }

.card h3 {
  margin-top: 0;
  font-size: 1.25rem;
}

.card p {
  margin-bottom: 0;
  color: var(--muted);
}

.card-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.card-link:hover {
  text-decoration: underline;
  transform: translateX(3px);
}

.card-link + .card-link {
  display: block;
  margin-top: 0.4rem;
}

.steps {
  display: grid;
  gap: 1rem;
  max-width: 760px;
  padding-left: 1.5rem;
  color: var(--text);
  font-size: 1.1rem;
}

.steps li::marker {
  color: var(--blue);
  font-weight: 800;
}

.video-frame {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 20px 40px -24px rgba(16, 33, 63, 0.35);
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--navy);
}

.video-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 45px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease;
}

.video-facade:hover .video-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-play-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact {
  margin-bottom: 5rem;
  border-radius: 1rem;
  background: var(--navy);
}

.contact h2,
.contact p {
  color: var(--white);
}

.contact .eyebrow {
  color: #93c5fd;
}

.contact-intro {
  max-width: 600px;
  margin: -1.25rem 0 2rem;
  color: #cbd5e1;
}

.security-note {
  max-width: 600px;
  margin: -1.25rem 0 2rem;
  color: #93c5fd;
  font-size: 0.9rem;
  font-weight: 600;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.button-secondary {
  background: transparent;
  border: 2px solid var(--blue);
  color: var(--blue);
  padding: calc(0.85rem - 2px) calc(1.25rem - 2px);
}

.button-secondary::before {
  background: var(--light-blue);
}

/* Tarjetas de canal de contacto (WhatsApp / formulario) — reemplazan
   los dos botones planos por algo que explica en una línea qué esperar
   de cada canal, con un toque de elevación al pasar el mouse. */

.contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 960px;
}

.contact-channel-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* Mismo efecto de relleno ("fill hover") que los botones: al pasar el
   ratón (o al tocar en móvil, con :active), un tono más claro entra
   deslizándose desde la izquierda. */
.contact-channel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.contact-channel-card:hover,
.contact-channel-card:active {
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}

.contact-channel-card:hover::before,
.contact-channel-card:active::before {
  transform: scaleX(1);
}

.contact-channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.contact-channel-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.contact-channel-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.contact-channel-text strong {
  color: var(--white);
  font-size: 1rem;
}

.contact-channel-text span {
  color: #cbd5e1;
  font-size: 0.85rem;
  line-height: 1.35;
}

.contact-channel-arrow {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, color 0.2s ease;
}

.contact-channel-card:hover .contact-channel-arrow {
  transform: translateX(3px);
  color: var(--white);
}

.privacy-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #94a3b8;
}

.privacy-note a {
  color: #cbd5e1;
  text-decoration: underline;
}

.privacy-note a:hover {
  color: var(--white);
}

.footer {
  padding: 2rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.footer a {
  color: var(--muted);
}

.footer a:hover {
  color: var(--blue);
}

.legal {
  max-width: 760px;
}

.service-page h1 {
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0 0 1.25rem;
}

.service-page .showcase-intro {
  max-width: 780px;
  margin: 0 0 1.5rem;
}

.service-page .about-text {
  max-width: 780px;
}

.legal h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0 0 0.5rem;
}

.legal-updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}

.legal-note {
  padding: 1rem 1.25rem;
  background: var(--light-blue);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
}

.legal h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
}

.back-link {
  margin-top: 3rem;
}

.back-link a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.back-link a:hover {
  text-decoration: underline;
}

/* Preguntas frecuentes */

.faq-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.faq-list details {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--white);
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
}

.faq-list summary::marker {
  color: var(--blue);
}

.faq-list p {
  margin: 0.75rem 0 0;
  color: var(--text);
}

.faq-list a {
  color: var(--blue);
}

/* Blog */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.blog-card {
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(16, 33, 63, 0.35);
}

.blog-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.3;
}

.blog-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.blog-article h2 {
  font-size: 1.3rem;
  margin: 2rem 0 0.5rem;
}

.blog-article p {
  font-size: 1.02rem;
}

@media (max-width: 700px) {
  .header {
    padding: 1rem 1.5rem;
  }

  .nav-toggle-label {
    display: flex;
  }

  .navigation {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.75rem 1.5rem 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 30px -20px rgba(16, 33, 63, 0.35);
  }

  .nav-toggle-checkbox:checked ~ .navigation {
    display: flex;
  }

  .navigation a,
  .nav-dropdown-label {
    width: 100%;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-dropdown {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav-dropdown-label {
    justify-content: space-between;
  }

  /* En móvil no hay :hover fiable, así que el submenú de Servicios no
     se oculta: queda siempre expandido en el panel, en flujo normal
     en vez de flotar encima (son solo 3 enlaces, no hace falta
     plegarlo). */
  .nav-dropdown-label::after {
    display: none;
  }

  .nav-dropdown-menu {
    display: block;
    position: static;
    padding-top: 0.25rem;
    width: 100%;
  }

  .nav-dropdown-menu-inner {
    border: 0;
    box-shadow: none;
    padding: 0 0 0 1rem;
  }

  .hero {
    padding: 4rem 1.5rem;
    background-position: center 20%;
  }

  .hero-inner {
    text-align: left;
  }

  .hero-inner .hero-text {
    max-width: none;
    margin-left: 0;
  }

  .services,
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .about-grid,
  .proceso-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-media {
    order: -1;
  }

  .section,
  .contact {
    padding: 4rem 1.5rem;
  }

  .contact {
    margin: 0 1rem 4rem;
  }
}
/* Botón flotante de WhatsApp */

.whatsapp-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 10px 25px -10px rgba(16, 33, 63, 0.55);
  z-index: 150;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.whatsapp-float.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.whatsapp-float:hover {
  background: var(--blue-dark);
  color: var(--white);
}

.whatsapp-float svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Fondo con transición de imágenes, muy atenuado, detrás de una sección.
   Mismo patrón que en SVC Construction: las imágenes son ilustrativas
   (generadas con IA para dar ambiente), no capturas reales — por eso van
   casi tapadas por el velo de color, solo como textura de fondo. */

.section-bg-fade {
  position: relative;
  overflow: hidden;
}

.section-bg-fade > .bg-photos {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-bg-fade > .bg-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: bg-fade-cycle 18s infinite;
}

.section-bg-fade > .bg-photos img:nth-child(1) { animation-delay: 0s; }
.section-bg-fade > .bg-photos img:nth-child(2) { animation-delay: 6s; }
.section-bg-fade > .bg-photos img:nth-child(3) { animation-delay: 12s; }

.section-bg-fade > .bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(248, 250, 252, 0.82);
}

.section-bg-fade > .section {
  position: relative;
  z-index: 2;
}

@keyframes bg-fade-cycle {
  0%, 5% { opacity: 0; }
  11%, 28% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .section-bg-fade > .bg-photos img {
    animation: none;
    opacity: 0;
  }
  .section-bg-fade > .bg-photos img:first-child {
    opacity: 1;
  }
}

/* Imagen de cada tarjeta de la página Proyectos */
.proyecto-img {
  height: 190px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #eef2f9;
}

.proyecto-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.proyecto-img.arriba img {
  object-position: top;
}

.proyecto-img.doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.proyecto-img.doble img {
  object-position: top;
}

@media (max-width: 700px) {
  .proyecto-img {
    height: 230px;
  }

  .proyecto-img.arriba img {
    object-fit: contain;
  }
}

/* Portada con fichas en órbita, cinta de texto, índice lateral y visor de imágenes */
.hero-orbita { min-height: clamp(520px, calc(100vh - 140px), 1000px); min-height: clamp(520px, calc(100svh - 140px), 1000px); display: grid; place-items: center; padding: 4rem 1rem; }
.orbita { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orbita-aro { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(191, 219, 254, 0.2); border-radius: 50%; transform: translate(-50%, -50%); }
.orbita-aro span { position: absolute; top: -0.65em; left: 50%; transform: translateX(-50%); padding: 0 8px; background: #15294d; color: #8fb0e6; font: 600 10px/1.3 "Poppins", Arial, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.orbita-ficha { position: absolute; left: 0; top: 0; display: block; padding: 0; margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); will-change: transform, opacity; background: #1e3a6b; pointer-events: auto; cursor: pointer; font: inherit; color: inherit; transition: box-shadow 0.25s ease, filter 0.25s ease; }
.orbita-ficha.d3 { filter: blur(1.2px); }
.orbita-ficha.arriba { z-index: 5; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); filter: none; border-color: rgba(255, 255, 255, 0.5); }
.orbita-ficha img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.orbita-ficha i { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 3px; background: rgba(16, 33, 63, 0.82); color: #e0ecff; font: 600 9px/1 Arial, sans-serif; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.orbita-regla { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; }
.orbita-regla::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: repeating-linear-gradient(to bottom, rgba(191, 219, 254, 0.35) 0 1px, transparent 1px 26px); }
.orbita-regla b { position: absolute; right: 16px; font: 600 9px/1 "Poppins", Arial, sans-serif; letter-spacing: 0.1em; color: #8fb0e6; }
.hero-orbita .hero-inner { z-index: 2; padding: 1.5rem 1rem; background: radial-gradient(closest-side, rgba(16, 33, 63, 0.88) 62%, rgba(16, 33, 63, 0) 100%); }
.acento { font-family: "Poppins", Arial, sans-serif; font-style: italic; font-weight: 600; letter-spacing: -0.02em; color: #bfdbfe; }
/* tipografía de la portada: Poppins en todo el bloque de texto */
.hero-orbita .hero-inner { font-family: "Poppins", Arial, sans-serif; }
.hero-orbita .hero-inner h1 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.14; }
.hero-orbita .hero-slogan { font-weight: 600; }
.hero-orbita .hero-inner .hero-text { font-weight: 400; line-height: 1.65; }
.hero-orbita .hero-inner .button { font-family: inherit; }

/* cinta de texto que corre bajo la portada */
.cinta { overflow: hidden; white-space: nowrap; background: #f5f7fb; border-bottom: 1px solid #d5dbe6; }
.cinta-pista { display: inline-flex; animation: cinta 40s linear infinite; }
.cinta span { padding: 0.9rem 0; font: 600 11px/1 "Poppins", Arial, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #1e3a6b; }
.cinta span::after { content: "/"; margin: 0 1.6rem; color: #8fb0e6; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* índice lateral: aparece al salir de la portada */
.indice { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.indice.ver { opacity: 1; pointer-events: auto; }
.indice a { font: 600 11px/1 "Poppins", Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #94a0b6; transition: color 0.2s ease; }
.indice a.on { color: #1e3a6b; }
@media (max-width: 1100px) { .indice { display: none; } }

/* visor: la ficha a tamaño completo al hacer clic */
.visor { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(10, 20, 40, 0.9); opacity: 0; transition: opacity 0.25s ease; cursor: pointer; }
.visor[hidden] { display: none; }
.visor.abierto { opacity: 1; }
.visor figure { margin: 0; max-width: min(96vw, 1200px); text-align: center; }
.visor img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); transform: scale(0.94); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); cursor: default; }
.visor.abierto img { transform: none; }
.visor figcaption { margin-top: 14px; color: #dbe7fb; font: 500 14px/1.4 "Poppins", Arial, sans-serif; }
.visor-cerrar { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font: 400 24px/1 Arial, sans-serif; cursor: pointer; }
.visor-cerrar:hover { background: rgba(255, 255, 255, 0.2); }

/* entrada escalonada (solo con movimiento permitido) */
@media (prefers-reduced-motion: no-preference) {
  .js-orbita .rev { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js-orbita .rev.on { opacity: 1; transform: none; }
  .js-orbita .orbita-aro { opacity: 0; scale: 0.88; transition: opacity 1.4s ease, scale 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js-orbita .orbita.on .orbita-aro { opacity: 1; scale: 1; }
  .js-orbita .orbita-regla { opacity: 0; transition: opacity 1.4s ease 0.8s; }
  .js-orbita .orbita.on .orbita-regla { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } .visor, .visor img { transition: none; } }
@media (max-width: 700px) {
  .orbita-aro span, .orbita-regla { display: none; }
  .orbita-ficha.d3 { filter: none; }
  .hero-orbita .hero-inner { background: radial-gradient(closest-side, rgba(16, 33, 63, 0.92) 70%, rgba(16, 33, 63, 0) 100%); }
}

/* Controles de zoom de la órbita */
.orbita-zoom {
  position: absolute;
  right: 64px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.orbita-zoom button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(16, 33, 63, 0.7);
  color: #fff;
  font: 600 20px/1 "Poppins", Arial, sans-serif;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.orbita-zoom button:hover:not(:disabled),
.orbita-zoom button:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.orbita-zoom button:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 700px) {
  .orbita-zoom {
    right: 12px;
    bottom: 12px;
  }
}