/* ==========================================================
   Mincastudio · tema.css
   Estilos por sección. Celular: @media (max-width: 680px)
   ========================================================== */

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: #fff;
  transition: background-color .3s, box-shadow .3s;
}
.cabecera.con-fondo,
.cabecera.menu-abierto {
  background: rgba(14, 16, 20, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--alto-cabecera);
}

.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { width: auto; height: 40px; }
@media (max-width: 680px) { .logo img { height: 34px; } }

.menu { display: flex; align-items: center; gap: 36px; }
.menu__lista { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.menu__lista > li > a { font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .72); transition: color .2s; }
.menu__lista > li > a:hover, .menu__lista > li > a[aria-current="page"] { color: #fff; }
.menu__cta { padding: .75em 1.3em; }

.menu-boton { display: none; }

@media (max-width: 1080px) {
  .menu-boton {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; color: #fff; cursor: pointer;
  }
  .menu-boton span:not(.oculto) { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s; }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .menu {
    position: fixed; inset: var(--alto-cabecera) 0 0;
    flex-direction: column; align-items: stretch; gap: 28px;
    padding: 16px var(--margen) 40px;
    background: var(--tinta);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s, transform .3s, visibility .3s;
  }
  .menu.abierto { opacity: 1; visibility: visible; transform: none; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .menu__lista > li > a {
    display: block; padding: 18px 0;
    font-size: 1.4rem; font-weight: 600; color: #fff;
  }
  .menu__cta { padding: 1em 1.6em; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--tinta); color: #fff;
  padding-top: calc(var(--alto-cabecera) + clamp(40px, 7vw, 96px));
}
.hero::before {
  content: ''; position: absolute; pointer-events: none;
  width: 900px; height: 900px; right: -250px; top: -350px;
  background: radial-gradient(circle, rgba(0, 109, 249, .35) 0%, transparent 62%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center;
}

.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  font-size: .85rem; color: rgba(255, 255, 255, .82);
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); animation: latido 2s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }

.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.6rem); margin: 24px 0 22px; letter-spacing: -.04em; }
.hero h1 em { font-style: normal; color: var(--acento-en-oscuro); }
.hero__intro { max-width: 34em; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, .7); }

.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.hero__datos {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  list-style: none; margin: 40px 0 0; padding: 0;
  font-size: .9rem; color: rgba(255, 255, 255, .55);
}
.hero__datos li { display: inline-flex; align-items: center; gap: 8px; }

/* Composición de pantallas */
.hero__visual { position: relative; aspect-ratio: 1 / .86; }
.navegador {
  position: absolute; overflow: hidden;
  background: #fff; border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}
.navegador--a { width: 80%; top: 0; left: 0; }
.navegador--b { width: 60%; right: 0; bottom: 8%; }
.navegador__barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #F1F2F4; }
.navegador__barra i { width: 9px; height: 9px; border-radius: 50%; background: #D4D7DD; }
.navegador__barra span { flex: 1; height: 16px; margin-left: 10px; border-radius: 6px; background: #fff; }
.telefono {
  position: absolute; left: 4%; bottom: 0; width: 23%;
  aspect-ratio: 9 / 18.5; overflow: hidden;
  border: 6px solid #23262E; border-radius: 24px; background: #fff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.navegador--a { animation: flotar 7s ease-in-out infinite; }
.navegador--b { animation: flotar 7s ease-in-out -2.5s infinite; }
.telefono { animation: flotar 7s ease-in-out -5s infinite; }
@keyframes flotar { 50% { transform: translateY(-10px); } }

/* Maqueta de sitio (se usa en hero y en tarjetas de proyecto; en WordPress se reemplaza por la foto) */
.navegador, .telefono, .proyecto__imagen { container-type: inline-size; }
.maqueta {
  --tono: #006DF9;
  position: relative;
  display: flex; flex-direction: column; gap: 3cqw;
  aspect-ratio: 16 / 11;
  padding: 6cqw 7cqw 8cqw;
  color: #fff;
  background:
    radial-gradient(110% 80% at 90% 0%, color-mix(in srgb, var(--tono) 45%, #fff) 0%, transparent 55%),
    linear-gradient(150deg, var(--tono) 0%, color-mix(in srgb, var(--tono) 55%, #000) 100%);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.maqueta--alta { aspect-ratio: auto; height: 100%; padding: 10cqw 9cqw 14cqw; gap: 5cqw; }
.maqueta__nav { display: flex; align-items: center; gap: 2.5cqw; margin-bottom: auto; }
.maqueta__nav b { width: 5cqw; height: 5cqw; margin-right: auto; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.maqueta__nav i { width: 7cqw; height: 1.4cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .55); }
.maqueta__nombre { font-size: 7.5cqw; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.maqueta--alta .maqueta__nombre { font-size: 15cqw; }
.maqueta__linea { width: 55%; height: 1.8cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .45); }
.maqueta__linea--corta { width: 38%; }
.maqueta--alta .maqueta__linea { height: 4cqw; width: 80%; }
.maqueta__boton { width: 22cqw; height: 6cqw; margin-top: 1.5cqw; border-radius: 6cqw; background: #fff; }
.maqueta--alta .maqueta__boton { width: 55%; height: 13cqw; }

/* Maqueta de panel (sistema) */
.panel { display: flex; aspect-ratio: 16 / 10.5; background: #F4F6FA; }
.panel__lateral { display: flex; flex-direction: column; gap: 4cqw; width: 22%; padding: 5cqw 4cqw; background: #1A1F2B; }
.panel__lateral b { width: 7cqw; height: 7cqw; margin-bottom: 3cqw; border-radius: 2cqw; background: var(--acento); }
.panel__lateral i { height: 1.8cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .25); }
.panel__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 4cqw; padding: 5cqw; }
.panel__tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.panel__tarjetas i { height: 12cqw; border-radius: 2.5cqw; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.panel__tarjetas i:first-child { background: var(--acento); }
.panel__barras { flex: 1; display: flex; align-items: flex-end; gap: 3cqw; padding: 4cqw; border-radius: 2.5cqw; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.panel__barras i { flex: 1; height: var(--h); border-radius: 1.5cqw 1.5cqw 0 0; background: color-mix(in srgb, var(--acento) 70%, #fff); }

/* Franja de nombres */
.marcas {
  position: relative; z-index: 1; overflow: hidden;
  margin-top: clamp(56px, 7vw, 96px);
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marcas__pista { display: flex; width: max-content; animation: desplazar 40s linear infinite; }
.marcas__pista span {
  display: inline-flex; align-items: center; gap: 48px; padding-right: 48px;
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
  color: rgba(255, 255, 255, .38);
}
.marcas__pista span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
@keyframes desplazar { to { transform: translateX(-50%); } }

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { width: 100%; max-width: 640px; }
}

/* ---------- Encabezado de sección ---------- */
.encabezado {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.encabezado h2 { max-width: 14em; }
.encabezado__texto { max-width: 30em; color: var(--texto-suave); font-size: 1.05rem; }

/* ---------- Servicios ---------- */
.servicios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.servicio {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 2.5vw, 34px);
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.servicio__icono {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 8px;
  border-radius: 14px; background: var(--acento-claro); color: var(--acento);
  transition: background-color .35s, color .35s;
}
.servicio:hover .servicio__icono { background: var(--degradado); color: #fff; }
.servicio__icono .icono { width: 26px; height: 26px; }
.servicio h3 { font-size: 1.3rem; }
.servicio__sub { color: var(--texto-suave); }
.servicio ul {
  display: grid; gap: 10px;
  list-style: none; margin: auto 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--linea);
  font-size: .93rem;
}
.servicio li { display: flex; gap: 10px; align-items: flex-start; }
.servicio li .icono { margin-top: 2px; width: 1.1em; height: 1.1em; color: var(--acento); stroke-width: 2.4; }

@media (max-width: 1080px) {
  .servicios__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Proyectos ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  padding: 10px 18px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: #fff; color: var(--texto);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.filtro:hover { border-color: var(--texto); }
.filtro.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.proyectos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.proyecto { display: flex; flex-direction: column; gap: 10px; }
.proyecto[hidden] { display: none; }
.proyecto__imagen { overflow: hidden; margin-bottom: 8px; border-radius: var(--radio); }
.proyecto:hover .maqueta { transform: scale(1.04); }
.proyecto__cat { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-texto); }
.proyecto h3 { font-size: 1.25rem; }
.proyecto p:last-child { color: var(--texto-suave); font-size: .95rem; }

@media (max-width: 1080px) {
  .proyectos__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Estudio ---------- */
.estudio__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.estudio__texto h2 { margin-bottom: 24px; color: #fff; }
.estudio__texto p { color: rgba(255, 255, 255, .68); font-size: 1.05rem; }
.estudio__texto p + p { margin-top: 14px; }
.tecnologias { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
.tecnologias li {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: rgba(255, 255, 255, .85);
}
.capacidades { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; margin: 0; padding: 0; }
.capacidades li {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  font-weight: 500; line-height: 1.35;
  transition: background-color .3s, border-color .3s;
}
.capacidades li:hover { background: rgba(0, 109, 249, .12); border-color: rgba(0, 185, 251, .35); }
.capacidades .icono {
  width: 30px; height: 30px; padding: 6px;
  border-radius: 50%; background: rgba(0, 185, 251, .15); color: var(--acento-en-oscuro); stroke-width: 2.4;
}

@media (max-width: 1080px) {
  .estudio__grid { grid-template-columns: 1fr; }
}

/* ---------- Proceso ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.paso {
  position: relative;
  padding: 32px 28px;
  background: #fff; border-radius: var(--radio);
}
.paso__num {
  display: block; margin-bottom: 40px;
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--acento);
}
.paso h3 { font-size: 1.2rem; margin-bottom: 10px; }
.paso p { color: var(--texto-suave); font-size: .95rem; }

@media (max-width: 1080px) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Contacto ---------- */
.contacto__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contacto__texto h2 { margin-bottom: 20px; }
.contacto__texto > p { color: var(--texto-suave); font-size: 1.05rem; max-width: 30em; }
.datos { display: grid; gap: 14px; list-style: none; margin: 36px 0 0; padding: 0; }
.datos li { display: flex; align-items: center; gap: 16px; }
.datos__icono { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--acento-claro); color: var(--acento); }
.datos small { display: block; font-size: .8rem; color: var(--texto-suave); }
.datos a, .datos span:not(.datos__icono) { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.datos a:hover { color: var(--acento); }

.formulario {
  display: grid; gap: 18px;
  padding: clamp(24px, 4vw, 44px);
  background: var(--papel); border-radius: 24px;
}
.formulario h3 { font-size: 1.4rem; margin-bottom: 4px; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-size: .85rem; font-weight: 600; }
.campo label span { font-weight: 400; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 16px;
  font: inherit; font-size: 1rem; color: var(--texto);
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-claro); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: #DC2626; }
.formulario__nota { font-size: .85rem; color: var(--texto-suave); text-align: center; }

@media (max-width: 1080px) {
  .contacto__grid { grid-template-columns: 1fr; }
}

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: rgba(255, 255, 255, .7); padding-top: 64px; }
.pie__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 48px; }
.pie__marca .logo img { height: 46px; }
.pie__marca p { margin-top: 10px; font-size: .95rem; }
.pie__menu { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: .95rem; }
.pie__menu a:hover { color: #fff; }
.redes { display: flex; gap: 10px; }
.redes a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; color: #fff;
  transition: background-color .25s, border-color .25s;
}
.redes a:hover { background: var(--acento); border-color: var(--acento); }
.pie__legal { padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; background: var(--whatsapp); color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6);
  transition: transform .25s;
}
.whatsapp-flotante:hover { transform: scale(1.08); }
.whatsapp-flotante .icono { width: 28px; height: 28px; stroke-width: 2; }

/* ---------- Animación de aparición ---------- */
.js .aparecer { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .aparecer.visible { opacity: 1; transform: none; }

/* ---------- Celular ---------- */
@media (max-width: 680px) {
  .hero__visual { aspect-ratio: 1 / .95; }
  .marcas__pista span { font-size: 1.1rem; gap: 32px; padding-right: 32px; }

  /* Listas largas como carrusel deslizable */
  .deslizable {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    gap: 14px;
    margin-inline: calc(-1 * var(--margen));
    padding: 4px var(--margen) 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
    scrollbar-width: none;
  }
  .deslizable::-webkit-scrollbar { display: none; }
  .deslizable > * { scroll-snap-align: start; }
  .servicio:hover { transform: none; }

  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { white-space: nowrap; }

  .capacidades { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .paso__num { margin-bottom: 20px; }
  .fila-2 { grid-template-columns: 1fr; }
  .pie__grid { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   WEB DE VARIAS PÁGINAS (submenú, portadas internas, migas,
   servicio, proyecto, preguntas, llamada final, pie)
   ========================================================== */

/* ---------- Submenú de Servicios ---------- */
.tiene-sub { position: relative; display: flex; align-items: center; gap: 2px; }
.sub-boton {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  background: none; border: 0; color: rgba(255, 255, 255, .72); cursor: pointer;
}
.sub-boton .icono { width: 16px; height: 16px; transition: transform .25s; }
.submenu {
  position: absolute; top: calc(100% + 16px); left: -18px; z-index: 5;
  display: grid; gap: 2px; min-width: 290px;
  list-style: none; margin: 0; padding: 10px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.submenu a { display: block; padding: 11px 14px; border-radius: 10px; font-size: .93rem; font-weight: 600; color: var(--texto); }
.submenu a:hover { background: var(--papel); color: var(--acento); }
@media (min-width: 1081px) {
  .tiene-sub:hover .submenu, .tiene-sub:focus-within .submenu, .tiene-sub.abierto .submenu { opacity: 1; visibility: visible; transform: none; }
  .tiene-sub:hover .sub-boton .icono, .tiene-sub.abierto .sub-boton .icono { transform: rotate(180deg); }
}
@media (max-width: 1080px) {
  .tiene-sub { flex-wrap: wrap; }
  .tiene-sub > a { flex: 1; }
  .sub-boton { width: 48px; height: 48px; color: #fff; }
  .sub-boton .icono { width: 22px; height: 22px; }
  .tiene-sub.abierto .sub-boton .icono { transform: rotate(180deg); }
  .submenu {
    position: static; display: none; width: 100%; min-width: 0;
    padding: 0 0 14px; background: none; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .submenu::before { display: none; }
  .tiene-sub.abierto .submenu { display: grid; }
  .submenu a { padding: 10px 0 10px 14px; color: rgba(255, 255, 255, .72); font-size: 1.05rem; }
  .submenu a:hover { background: none; color: #fff; }
}

/* ---------- Portada de páginas internas ---------- */
.portada-pagina {
  position: relative; overflow: hidden;
  background: var(--tinta); color: #fff;
  padding: calc(var(--alto-cabecera) + clamp(36px, 6vw, 80px)) 0 clamp(56px, 7vw, 96px);
}
.portada-pagina::before {
  content: ''; position: absolute; pointer-events: none;
  width: 800px; height: 800px; right: -250px; top: -400px;
  background: radial-gradient(circle, rgba(0, 109, 249, .32) 0%, transparent 62%);
}
.portada-pagina .contenedor { position: relative; }
.portada-pagina h1 { max-width: 16em; margin: 20px 0 18px; font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: -.04em; }
.portada-pagina__intro { max-width: 40em; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: rgba(255, 255, 255, .7); }
.portada-pagina .botones { margin-top: 32px; }

.migas ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: rgba(255, 255, 255, .55); }
.migas li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.migas a:hover { color: #fff; }
.migas [aria-current] { color: rgba(255, 255, 255, .85); }

/* ---------- Piezas comunes ---------- */
.servicio__enlace { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; color: var(--acento-texto); }
.servicio__enlace .icono { transition: transform .25s; }
.servicio__enlace:hover .icono { transform: translateX(4px); }
.centro { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.boton--oscuro { background: var(--tinta); color: #fff; }
.boton--oscuro:hover { background: #262A33; }
a.proyecto:hover h3 { color: var(--acento); }
.proyecto h3 { transition: color .2s; }
.encabezado--centro { justify-content: center; text-align: center; }
.encabezado--centro h2 { margin-inline: auto; }

/* ---------- Página de servicio: qué incluye ---------- */
.incluye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.incluye li { padding: 28px; border: 1px solid var(--linea); border-radius: var(--radio); }
.incluye .servicio__icono { margin-bottom: 18px; }
.incluye h3 { font-size: 1.15rem; margin-bottom: 8px; }
.incluye p { color: var(--texto-suave); font-size: .95rem; }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { max-width: 880px; margin-inline: auto; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: 1.1rem; font-weight: 700;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; flex: none; font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--acento); transition: transform .25s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 48px 24px 0; color: var(--texto-suave); }

/* ---------- Página de proyecto ---------- */
.navegador--estatico { position: relative; width: 100%; animation: none; }
.caso__pantalla { max-width: 1100px; margin: 0 auto clamp(56px, 7vw, 96px); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.caso__grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ficha { display: grid; gap: 20px; margin: 0; padding: 28px; background: var(--papel); border-radius: var(--radio); }
.ficha dt { margin-bottom: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.ficha dd { margin: 0; font-weight: 600; }
.caso__texto h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 18px; }
.caso__texto p { color: var(--texto-suave); font-size: 1.05rem; }
.caso__texto ul { display: grid; gap: 12px; list-style: none; margin: 28px 0 0; padding: 0; }
.caso__texto li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.caso__texto li .icono { margin-top: 3px; color: var(--acento); stroke-width: 2.4; }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ---------- Llamada final ---------- */
.llamada__caja {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.4fr auto; gap: 32px 48px; align-items: center;
  padding: clamp(36px, 6vw, 80px);
  border-radius: 28px; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(0, 109, 249, .55) 0%, transparent 60%), var(--tinta);
}
.llamada__caja h2 { max-width: 16em; margin-bottom: 14px; font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.llamada__caja p { max-width: 36em; color: rgba(255, 255, 255, .72); font-size: 1.05rem; }
.llamada__caja .botones { margin-top: 0; }

/* ---------- Pie con columnas ---------- */
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start; padding-bottom: 56px; }
.pie__marca p { max-width: 22em; margin-bottom: 22px; }
.pie__titulo { margin-bottom: 16px; font-weight: 700; color: #fff; }
.pie__col ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.pie__col a:hover { color: #fff; }

/* ---------- Variantes y detalles de páginas internas ---------- */
.seccion--sin-arriba { padding-top: 0; }
.servicio__titulo { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.proyecto h2 { font-size: 1.25rem; font-weight: 700; transition: color .2s; }
a.proyecto:hover h2 { color: var(--acento); }
.proyectos__grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 5 servicios: 3 arriba y 2 más anchas abajo */
@media (min-width: 1081px) {
  .servicios__grid--5 { grid-template-columns: repeat(6, 1fr); }
  .servicios__grid--5 > * { grid-column: span 2; }
  .servicios__grid--5 > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 681px) and (max-width: 1080px) {
  .servicios__grid--5 > :last-child { grid-column: 1 / -1; }
}
.filtros--arriba { margin-bottom: 40px; }
.pasos--borde .paso { border: 1px solid var(--linea); }
.formulario__titulo { font-size: 1.4rem; margin-bottom: 4px; }
.estudio__texto--claro h2 { color: var(--texto); }
.estudio__texto--claro p { color: var(--texto-suave); }
.tecnologias--claro li { border-color: var(--linea); color: var(--texto); }
.capacidades--claro li { border-color: var(--linea); background: var(--papel); }
.capacidades--claro li:hover { background: var(--acento-claro); border-color: transparent; }
.capacidades--claro .icono { background: #fff; color: var(--acento); }
.estudio__texto .botones { margin-top: 32px; }
.oculto:focus { position: fixed !important; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; background: #fff; color: var(--texto); border-radius: 10px; }

@media (max-width: 1080px) {
  .proyectos__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .incluye { grid-template-columns: repeat(2, 1fr); }
  .caso__grid { grid-template-columns: 1fr; }
  .llamada__caja { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================
   IMPACTO: animaciones, cuadrícula viva, focos y SVG
   ========================================================== */

/* Barra de progreso de lectura */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px;
  background: linear-gradient(90deg, #00B9FB, #006DF9, #0025DE);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* Cuadrícula también en portadas internas y llamada final */
.portada-pagina::after,
.llamada__caja::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 70%);
}
.hero::before, .portada-pagina::before { animation: respirar 9s ease-in-out infinite; }
@keyframes respirar { 50% { transform: scale(1.12); opacity: .75; } }

/* Celdas que se encienden y foco que sigue al mouse (los crea el JS) */
.cuadricula { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cuadricula__celdas {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse at 75% 25%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 75% 25%, #000 0%, transparent 70%);
}
.cuadricula__celda {
  position: absolute; width: 64px; height: 64px;
  background: rgba(0, 109, 249, .16);
  box-shadow: inset 0 0 0 1px rgba(0, 185, 251, .28);
  animation: celda 3.2s ease-in-out forwards;
}
@keyframes celda { 0%, 100% { opacity: 0; } 35%, 60% { opacity: 1; } }
.cuadricula__foco {
  position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background-image: linear-gradient(rgba(0,185,251,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(0,185,251,.35) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 100%);
}
.cuadricula.activa .cuadricula__foco { opacity: 1; }
.llamada__caja > * { position: relative; z-index: 1; }
.llamada__caja > .cuadricula { position: absolute; z-index: 0; }

/* Títulos principales que aparecen palabra por palabra */
.dividido .palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js .dividido .palabra > span {
  display: inline-block; transform: translateY(110%);
  transition: transform 1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i) * 70ms + 150ms);
}
.js .dividido.animado .palabra > span { transform: none; }
.hero h1 em .palabra > span {
  background: linear-gradient(90deg, #00B9FB 0%, #BDEBFF 30%, #3D8BFF 55%, #00B9FB 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo 6s linear infinite;
}
@keyframes brillo { to { background-position: -250% 0; } }

/* Pantallas del hero: siguen al mouse */
.navegador--a { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -14px); }
.navegador--b { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 20px); }
.telefono { translate: calc(var(--px, 0) * 38px) calc(var(--py, 0) * 30px); }
.navegador--a, .navegador--b, .telefono { transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.marcas:hover .marcas__pista { animation-play-state: paused; }

/* Línea del antetítulo que crece al aparecer */
.js .aparecer .antetitulo::before { width: 0; transition: width .8s cubic-bezier(.2, .7, .2, 1) .35s; }
.js .aparecer.visible .antetitulo::before { width: 24px; }

/* Botón principal con destello */
.boton--acento { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px -10px rgba(0, 109, 249, .7); }
.boton--acento::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s;
}
.boton--acento:hover::after { transform: translateX(120%); }

/* Tarjetas con luz que sigue al mouse */
.con-foco { position: relative; isolation: isolate; }
.con-foco::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 109, 249, .14), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.con-foco:hover::before { opacity: 1; }
.servicio__icono .icono { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.servicio:hover .servicio__icono .icono, .incluye li:hover .servicio__icono .icono { transform: scale(1.15) rotate(-8deg); }
.incluye li { transition: border-color .3s, transform .35s, box-shadow .35s; }
.incluye li:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.incluye li:hover .servicio__icono { background: var(--degradado); color: #fff; }

/* Proyectos: destello y etiqueta «Ver proyecto» */
.proyecto__imagen { position: relative; }
.proyecto .maqueta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .2) 45%, transparent 60%);
  transform: translateX(-100%); transition: transform 1s;
}
.proyecto:hover .maqueta::after { transform: translateX(100%); }
a.proyecto .proyecto__imagen::after {
  content: 'Ver proyecto →'; position: absolute; right: 16px; bottom: 16px; z-index: 2;
  padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--texto);
  font-size: .85rem; font-weight: 700;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
a.proyecto:hover .proyecto__imagen::after { opacity: 1; transform: none; }

/* Proceso: números con degradado y línea que se dibuja */
.paso__num {
  background: var(--degradado);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.paso { transition: transform .35s, box-shadow .35s; }
.paso:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
@media (min-width: 1081px) {
  .pasos { position: relative; padding-top: 40px; }
  .pasos::before {
    content: ''; position: absolute; top: 8px; left: 34px; right: 34px; height: 2px;
    background: linear-gradient(90deg, #00B9FB, #006DF9, #0025DE);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.8s cubic-bezier(.6, 0, .2, 1) .2s;
  }
  .pasos.visible::before { transform: scaleX(1); }
  .paso::after {
    content: ''; position: absolute; top: -40px; left: 27px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 4px solid var(--acento);
    box-shadow: 0 0 0 6px rgba(0, 109, 249, .14);
    transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
  }
  .pasos.visible .paso::after { transform: scale(1); }
  .pasos.visible .paso:nth-child(2)::after { transition-delay: .55s; }
  .pasos.visible .paso:nth-child(3)::after { transition-delay: 1s; }
  .pasos.visible .paso:nth-child(4)::after { transition-delay: 1.45s; }
}

/* Llamada final con órbitas giratorias */
.llamada__caja::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; right: -170px; top: 50%; margin-top: -280px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560' fill='none'%3E%3Ccircle cx='280' cy='280' r='270' stroke='%2300B9FB' stroke-opacity='.18' stroke-dasharray='3 9'/%3E%3Ccircle cx='280' cy='280' r='200' stroke='%2300B9FB' stroke-opacity='.25' stroke-dasharray='40 14'/%3E%3Ccircle cx='280' cy='280' r='130' stroke='%2300B9FB' stroke-opacity='.3'/%3E%3Ccircle cx='280' cy='10' r='6' fill='%2300B9FB'/%3E%3Ccircle cx='480' cy='280' r='5' fill='%23006DF9'/%3E%3Ccircle cx='280' cy='410' r='4' fill='%23ffffff' fill-opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: girar 40s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Diagrama SVG del estudio ---------- */
.estudio__grid--diagrama { grid-template-columns: 1fr 1.05fr; }
.diagrama { width: 100%; max-width: 620px; margin-inline: auto; }
.diagrama svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagrama--tarjeta { padding: clamp(16px, 3vw, 32px); border-radius: 28px; background: var(--tinta); box-shadow: var(--sombra); }
.diagrama__anillo { transform-origin: 280px 220px; animation: girar 70s linear infinite; }
.diagrama__anillo--2 { animation-duration: 110s; animation-direction: reverse; }
.diagrama__lineas path { animation: fluir 1.4s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -24; } }
.diagrama__onda { transform-origin: 280px 220px; animation: onda 2.8s ease-out infinite; }
.diagrama__onda--2 { animation-delay: 1.4s; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(2); opacity: 0; } }
.nodo { animation: flotar 6s ease-in-out infinite; }
.nodo--2 { animation-delay: -1s; } .nodo--3 { animation-delay: -2s; } .nodo--4 { animation-delay: -3s; } .nodo--5 { animation-delay: -4s; } .nodo--6 { animation-delay: -5s; }
.nodo rect { fill: #171A21; stroke: rgba(255, 255, 255, .14); }
.nodo text { fill: #E9EAEE; font-family: var(--fuente); font-size: 13px; font-weight: 600; }
.nodo__icono { fill: none; stroke: #00B9FB; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diagrama__centro text { fill: #fff; font-family: var(--fuente); font-size: 14px; font-weight: 800; text-anchor: middle; }
.capacidades--fila { grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 6vw, 80px); }

@media (max-width: 1080px) {
  .estudio__grid--diagrama { grid-template-columns: 1fr; }
  .capacidades--fila { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .capacidades--fila { grid-template-columns: 1fr; }
  .llamada__caja::before { width: 420px; height: 420px; right: -230px; margin-top: -210px; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .diagrama__pulsos, .cuadricula { display: none; }
  .js .dividido .palabra > span { transform: none; }
}

@media (max-width: 680px) {
  .servicios__grid:not(.deslizable), .proyectos__grid:not(.deslizable) { grid-template-columns: 1fr; }
  .incluye { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr; }
  .preguntas details p { padding-right: 0; }
  .llamada__caja { border-radius: 22px; }
  .llamada__caja .boton { width: 100%; }
  .pie__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================
   WORDPRESS: ajustes propios del tema
   ========================================================== */

/* Barra de administración (solo con sesión iniciada) */
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 46px; } }
@media (max-width: 1080px) { .admin-bar .menu { top: calc(var(--alto-cabecera) + 32px); } }
@media (max-width: 782px) { .admin-bar .menu { top: calc(var(--alto-cabecera) + 46px); } }

/* Menú: elemento activo (página actual o sección) */
.menu__lista > li.activo > a { color: #fff; }
@media (min-width: 1081px) {
  .menu__lista > li.activo > a { position: relative; }
  .menu__lista > li.activo > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00B9FB, #006DF9); }
}
.submenu a[aria-current="page"] { color: var(--acento-texto); }
@media (max-width: 1080px) { .submenu a[aria-current="page"] { color: #fff; } }

/* Capturas reales en lugar de maquetas */
.navegador__img, .proyecto__imagen img, .telefono__img {
  display: block; width: 100%; height: auto; object-fit: cover; object-position: top center;
}
.navegador__img { aspect-ratio: 16 / 11; }
.navegador--b .navegador__img { aspect-ratio: 16 / 10.5; }
.telefono__img { height: 100%; aspect-ratio: auto; }
.proyecto__imagen img { aspect-ratio: 16 / 11; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.proyecto:hover .proyecto__imagen img { transform: scale(1.04); }

/* Contenido escrito en el editor (páginas genéricas, blog, proyectos) */
.contenido { max-width: 760px; font-size: 1.05rem; color: var(--texto); }
.contenido > * + * { margin-top: 1.1em; }
.contenido h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 1.8em; }
.contenido h3 { font-size: 1.25rem; margin-top: 1.5em; }
.contenido a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.contenido ul, .contenido ol { padding-left: 1.3em; }
.contenido img { border-radius: 14px; height: auto; }
.contenido blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--acento); color: var(--texto-suave); }
.contenido .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.contenido__portada { margin: 0 0 32px; }
.contenido__portada img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); }
.caso__texto .contenido { max-width: none; color: var(--texto-suave); }

/* Paginación del blog */
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 999px; font-weight: 600; }
.nav-links .page-numbers.current { background: var(--tinta); border-color: var(--tinta); color: #fff; }