/* Le Website Tech — lenguaje visual de Zephyr con la marca de Le Website (nov-2026).
   Medidas tomadas del DOM de zephyr-studio.webflow.io a 1440 y 390 px (lewebsitetech-zephyr/referencia/medidas).
   Cortes de la plantilla: 991, 767 y 479 px. */

@font-face { font-family: Archivo; src: url(../fonts/archivo-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
	--crema: #fdf8e7;
	--crema2: #f2ebd5;
	--negro: #05051a;       /* casi negro azulado: DESIGN.md prohíbe #000 */
	--tinta: #07071c;
	--gris: #595959;
	--gris2: #888;
	--claro: #f7f7f7;
	--linea-osc: #292929;
	--azul: #080850;        /* azul marino del logo (73 % del archivo) — reemplaza al naranja #ff6500 */
	--azul-luz: #24249f;    /* resplandor de las tarjetas de proceso */
	--cian: #00f4ec;        /* cian del logo, acento sobre fondos oscuros */
	--titulo-hero: #a6faf6;
	--oc: cubic-bezier(.215, .61, .355, 1);   /* outCubic */
	--oq: cubic-bezier(.165, .84, .44, 1);    /* outQuart */
	--oqd: cubic-bezier(.25, .46, .45, .94);  /* outQuad */
	--archivo: Archivo, 'Helvetica Neue', Arial, sans-serif;
	--switzer: Switzer, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 400 16px/20px var(--archivo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
.pagina { overflow-x: clip; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100000; background: var(--negro); color: #fff; padding: 10px 16px; border-radius: 100px; }
.saltar:focus { left: 12px; }
/* Foco de teclado en dos tonos: el aro azul marino se ve sobre la crema y el borde cian sobre las cajas oscuras
   (el cian solo daba ~1,3:1 sobre la crema). */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cian); }

.contenedor { width: 100%; max-width: 2012px; margin: 0 auto; padding: 0 46px; }
.contenedor-m { width: 100%; max-width: 1700px; margin: 0 auto; padding: 0 40px; }
.principal { position: relative; z-index: 1; background: var(--crema); }

/* ---------- Piezas ---------- */
.sub { display: flex; align-items: flex-start; gap: 10px; }
.sub__punto { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--azul); flex: none; } /* alineado a la primera línea si la pregunta ocupa dos */
.sub__txt { font: 500 18px/20px var(--archivo); color: inherit; letter-spacing: 0; }
.sub--claro { color: var(--claro); }
.sub--claro .sub__punto { background: var(--cian); }
.titulo-grande { font: 500 74px/80px var(--archivo); letter-spacing: -1.5px; color: var(--tinta); }
.stitulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.stitulo--abajo { align-items: flex-end; }
.stitulo__izq { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stitulo__grande { font: 500 74px/80px var(--archivo); letter-spacing: -1.5px; color: var(--tinta); }
.stitulo__bajada { margin-top: 8px; font: 500 16px/22px var(--switzer); color: var(--gris); }
.stitulo__der { flex: none; }
.stitulo--claro .stitulo__grande, .stitulo--claro .titulo-grande { color: var(--claro); }
.stitulo--claro .stitulo__bajada { color: var(--gris2); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 100px; font: 500 16px/20px var(--archivo); text-decoration: none; white-space: nowrap; overflow: hidden; transition: transform .15s var(--oc); }
.btn:active { transform: scale(.97); }
.btn--claro { background: var(--claro); color: #000; }
.btn--oscuro, .btn--ancho { background: var(--negro); color: #fff; }
.btn--ancho { display: flex; width: 100%; }
.btn__txt { position: relative; display: block; height: 20px; overflow: hidden; }
.btn__txt > span { display: block; transition: transform .4s var(--oc); }
.btn__txt > span + span { position: absolute; left: 0; top: 100%; }
.btn__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--azul); flex: none; transition: transform .4s var(--oc); }
.btn--oscuro .btn__punto, .btn--ancho .btn__punto { background: var(--cian); }
.desliza { position: relative; display: block; overflow: hidden; }
.desliza > span { display: block; transition: transform .4s var(--oc); }
.desliza > span + span { position: absolute; left: 0; top: 100%; }
@media (hover: hover) and (pointer: fine) {
	.btn:hover .btn__txt > span, a:hover > .desliza > span { transform: translateY(-100%); }
	.btn:hover .btn__punto { transform: scale(1.2); }
}
.estrellas { display: inline-flex; gap: 6px; color: var(--cian); }
.estrellas svg { width: 18px; height: 18px; }
.estrellas--16 { color: var(--azul); }
.estrellas--16 svg { width: 16px; height: 16px; }

/* Entrada "Fade in" (a-28): 5 % hacia arriba, desenfoque 2 px, 800 ms tras 200 ms, outCubic. */
.js [data-entra] { opacity: 0; transform: translateY(5%); filter: blur(2px); transition: opacity .8s var(--oc) .2s, transform .8s var(--oc) .2s, filter .8s var(--oc) .2s; }
.js [data-entra].entro { opacity: 1; transform: none; filter: none; }

/* ---------- Precargador (a-29) ---------- */
.cargador { position: fixed; inset: 0; z-index: 999999; display: none; flex-direction: column; pointer-events: none; }
.js .cargador { display: flex; animation: cargador-seguro 0s linear 6s forwards; } /* si el JS fallara, a los 6 s se quita solo */
@keyframes cargador-seguro { to { visibility: hidden; opacity: 0; } }
.cargador__arriba, .cargador__abajo { height: 50vh; width: 100%; background: var(--azul); display: flex; justify-content: center; will-change: transform; }
.cargador__arriba { align-items: flex-end; padding-bottom: 6px; }
.cargador__abajo { align-items: flex-start; padding-top: 6px; }
.cargador__marca-caja { position: relative; overflow: hidden; }
.cargador__marca { font: 500 40px/44px var(--archivo); color: #fff; letter-spacing: -.5px; }
.cargador__marca sup, .pie__marca sup { font-size: .32em; vertical-align: top; position: relative; top: .35em; margin-left: .04em; }
.cargador__tapa { position: absolute; inset: 0; background: rgba(8, 8, 80, .31); transform: translateY(100%); transform-origin: 50% 100%; }
.cargador__texto { font: 500 18px/20px var(--archivo); color: #fff; }
.cargador.fuera { display: none; }

/* ---------- Navegación ---------- */
.nav { position: relative; z-index: 50; padding-top: 24px; }
.heroenv .nav { position: absolute; inset: 0 0 auto; padding-top: 36px; }
.nav__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 49px; }
.nav__logo { justify-self: start; display: block; }
.nav__logo img { height: 26px; width: auto; }
.nav__menu { display: flex; gap: 42px; justify-content: center; }
.nav__link { font: 500 16px/20px var(--archivo); text-decoration: none; }

.nav--claro .nav__link { color: #fff; }
.nav--oscuro .nav__link { color: #000; }
.nav__der { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.nav__idioma { font: 600 13px/16px var(--archivo); letter-spacing: .04em; text-decoration: none; padding: 6px 10px; border-radius: 100px; border: 1px solid currentColor; opacity: .85; }
.nav--claro .nav__idioma { color: #fff; }
.nav__idioma:hover { opacity: 1; }
.nav__boton { display: none; position: relative; width: 30px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.nav__boton span { position: absolute; left: 3px; top: 9px; width: 24px; height: 2px; border-radius: 100px; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.nav__boton span:nth-child(1) { transform: translateY(-7px); }
.nav__boton span:nth-child(3) { transform: translateY(8px); }
.nav--claro .nav__boton { color: #fff; }
.nav--oscuro .nav__boton { color: #000; }
.nav.abierta .nav__boton span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.nav.abierta .nav__boton span:nth-child(2) { opacity: 0; transform: scale(0); }
.nav.abierta .nav__boton span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
.nav__panel { display: none; }

/* ---------- Hero del inicio ---------- */
.heroenv { position: sticky; top: 0; z-index: 0; transform-origin: 50% 50%; will-change: transform; }
.hero { height: 100vh; height: 100svh; padding: 12px; }
.hero__caja { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: var(--azul); }
.hero__media { position: absolute; inset: 0; }
.hero__img, .hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__video--movil { display: none; }
.hero__velo { position: absolute; inset: 0; background: #000; opacity: .12; }
.hero--video .hero__velo { background: linear-gradient(180deg, rgba(5, 5, 26, .55), rgba(5, 5, 26, .05) 45%, rgba(5, 5, 26, .6)); opacity: 1; }
.hero--video { --titulo-hero: #fff; }
.hero__contenido { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 154px 36px 63px; }
.hero__arriba { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__h1 { font: 500 16px/20px var(--switzer); color: #fff; max-width: 560px; }
.hero__titulo { font: 500 92px/100px var(--archivo); letter-spacing: -2px; color: var(--titulo-hero); max-width: 700px; }
.hero__abajo { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.hero__texto { max-width: 501px; border-left: 1px solid #fff; padding-left: 28px; }
.hero__texto p { font: 500 18px/24px var(--switzer); letter-spacing: -.2px; color: #fff; }
.hero__etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hero__etiquetas a { font: 400 20px/22px var(--archivo); letter-spacing: -.2px; color: #fff; text-decoration: none; }
.hero__etiquetas a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Estudio ---------- */
.estudio { padding: 120px 0; }
.estudio__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.estudio__titulo { display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
.estudio__der { max-width: 780px; display: flex; flex-direction: column; gap: 46px; }
.estudio__texto { font: 500 44px/54px var(--archivo); letter-spacing: -.8px; color: #000; }
.estudio__texto .linea { position: relative; display: block; overflow: hidden; }
.estudio__texto .linea__tapa { position: absolute; inset: 0; background: rgba(253, 248, 231, .46); transform: translateX(var(--x, 0%)); pointer-events: none; }
.estudio__cifras { display: flex; align-items: center; gap: 120px; }
.cifra__n { font: 500 52px/58px var(--archivo); letter-spacing: -1px; color: #000; }
.cifra__t { margin-top: 6px; font: 500 16px/20px var(--switzer); color: var(--gris); }

/* ---------- Logos ---------- */
.logos { position: relative; overflow: hidden; padding-bottom: 140px; }
.logos__pista { display: flex; width: max-content; animation: marquesina var(--dur, 60s) linear infinite; }
.logos__fila { display: flex; gap: 16px; padding-right: 16px; }
.logos__item { flex: none; width: 212px; height: 188px; border-radius: 10px; background: var(--crema2); display: flex; align-items: center; justify-content: center; }
.logos__item img { max-width: 140px; max-height: 56px; width: auto; height: auto; filter: grayscale(1) brightness(.18); opacity: .9; }
.logos__velo { position: absolute; top: 0; bottom: 140px; width: 160px; z-index: 2; pointer-events: none; }
.logos__velo--izq { left: 0; background: linear-gradient(93deg, rgba(253, 248, 231, .8) 30%, rgba(253, 248, 231, 0)); }
.logos__velo--der { right: 0; background: linear-gradient(93deg, rgba(253, 248, 231, 0), rgba(253, 248, 231, .8) 70%); }
@keyframes marquesina { to { transform: translateX(-50%); } }

/* ---------- Trabajo ---------- */
.trabajo { padding: 40px 0 140px; }
.trabajo__rejilla { margin-top: 100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tproy { position: relative; display: block; color: #fff; text-decoration: none; }
.tproy__img { position: relative; display: block; aspect-ratio: 670 / 508; border-radius: 16px; overflow: hidden; background: var(--crema2); }
.tproy__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .5s var(--oc); }
.tproy__img::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(180deg, rgba(5, 5, 26, 0), rgba(5, 5, 26, .62)); }
.tproy__info { position: absolute; left: 0; right: 0; bottom: 16px; padding: 0 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; z-index: 1; }
.tproy__nombre { display: flex; flex-direction: column; gap: 6px; }
.tproy__titulo { font: 500 18px/20px var(--archivo); letter-spacing: -.2px; }
.tproy__anio { font: 500 14px/16px var(--archivo); }
.tproy__cat { position: relative; overflow: hidden; height: 20px; font: 500 16px/20px var(--archivo); text-align: right; }
.tproy__cat > span { display: block; transition: transform .5s var(--oc); }
.tproy__cat > span + span { position: absolute; right: 0; top: 100%; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
	.tproy:hover .tproy__img img { transform: scale(1.08); }
	.tproy:hover .tproy__cat > span { transform: translateY(-100%); }
}
.trabajo__boton { display: flex; justify-content: center; margin-top: 100px; }

/* ---------- Servicios ---------- */
.servicios { padding: 0 12px; }
.servicios__caja { background: var(--negro); border-radius: 24px; padding: 100px 0; }
.servicios__in { max-width: 1700px; padding: 0 40px; }
.servicios__lista { margin-top: 100px; display: flex; flex-direction: column; gap: 48px; }
.servicio { position: sticky; top: 100px; background: var(--negro); border-top: 1px solid var(--linea-osc); padding-top: 32px; display: flex; justify-content: space-between; gap: 20px; }
.servicio__izq { max-width: 580px; display: flex; flex-direction: column; gap: 44px; }
.servicio__cabeza { display: flex; flex-direction: column; gap: 14px; }
.servicio__num { width: 22px; height: 22px; border-radius: 50%; background: var(--cian); color: var(--azul); display: grid; place-items: center; font: 600 11px/14px var(--archivo); }
.servicio__titulo { font: 400 26px/28px var(--archivo); letter-spacing: -.2px; color: var(--claro); }
.servicio__titulo a { text-decoration: none; }
.servicio__titulo a:hover { text-decoration: underline; text-underline-offset: 4px; }
.servicio__texto { font: 500 16px/22px var(--switzer); letter-spacing: -.2px; color: var(--gris2); margin-top: -26px; }
.servicio__etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 360px; }
.servicio__etiquetas li { background: #282828; color: #e0e0e0; font: 400 14px/16px var(--switzer); padding: 9px 13px; border-radius: 100px; }
.servicio__media { display: block; width: 505px; max-width: 100%; aspect-ratio: 505 / 286; border-radius: 20px; overflow: hidden; flex: none; background: #111; }
.servicio__media video, .servicio__media img { width: 100%; height: 100%; object-fit: cover; }
.servicios__boton { display: flex; justify-content: center; margin-top: 80px; }

/* ---------- Precios ---------- */
.precios { padding: 140px 0 0; }
.precios__rejilla { margin-top: 100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.plan { background: var(--crema2); padding: 6px 6px 24px; border-radius: 16px; display: flex; flex-direction: column; }
.plan__arriba { background: var(--crema); padding: 24px; border-radius: 12px; }
.plan__nombre-fila { display: flex; align-items: center; gap: 10px; }
.plan__nombre { font: 500 18px/20px var(--archivo); letter-spacing: -.2px; }
.plan__popular { font: 500 12px/14px var(--archivo); background: var(--azul); color: #fff; padding: 4px 9px; border-radius: 100px; }
.plan__estrella { margin-left: auto; display: flex; color: #000; }
.plan--popular .plan__estrella svg path { fill: var(--azul); stroke: var(--azul); }
.plan__precio { margin-top: 18px; font: 500 28px/28px var(--archivo); letter-spacing: -.5px; }
.plan__desde { font: 400 16px/20px var(--archivo); color: var(--gris); letter-spacing: 0; }
.plan__mes { font: 400 16px/20px var(--archivo); color: var(--gris); letter-spacing: -.2px; }
.plan__texto { margin-top: 14px; max-width: 280px; font: 500 16px/22px var(--switzer); letter-spacing: -.2px; color: var(--gris); }
.plan__abajo { padding: 0 15px; margin-top: 40px; display: flex; flex-direction: column; flex: 1; }
.plan__incluye { font: 500 16px/20px var(--archivo); color: var(--gris); }
.plan__lista { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; flex: 1; }
.plan__lista li { display: flex; align-items: center; gap: 8px; font: 500 16px/20px var(--archivo); color: #000; }
.plan__lista li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); flex: none; }
.plan .btn { margin-top: 32px; }
.precios__nota { margin-top: 28px; text-align: center; font: 500 15px/22px var(--switzer); color: var(--gris); }
.precios__nota a { color: var(--azul); font-weight: 600; }

/* ---------- Proceso ---------- */
.proceso { padding: 140px 0; }
.proceso__rejilla { margin-top: 100px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1200px; }
.paso { position: relative; overflow: hidden; background: var(--negro); border-radius: 12px; padding: 24px; min-height: 348px; display: flex; flex-direction: column; justify-content: space-between; gap: 160px; cursor: default; }
.js .paso.entro { transition: opacity .8s var(--oc) .2s, filter .8s var(--oc) .2s, transform .5s var(--oc); }
.paso__luz { position: absolute; top: -236px; left: -160px; width: 1546px; height: 1546px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, var(--azul-luz) 0%, rgba(36, 36, 159, .85) 28%, rgba(8, 8, 80, .55) 46%, rgba(5, 5, 26, 0) 66%);
	transform: translate(-34.5px, -84px); transition: transform .5s var(--oc); }
.paso__num { position: relative; z-index: 1; font: 500 24px/28px var(--archivo); color: #fff; }
.paso__abajo { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.paso__nombre { font: 600 20px/22px var(--archivo); color: #fff; }
.paso__texto { font: 500 16px/22px var(--switzer); color: #fff; }

/* ---------- Reseñas ---------- */
.resenas { padding: 0 12px; }
.resenas__caja { background: var(--negro); border-radius: 24px; padding: 100px 0; overflow: hidden; }
.resenas__filas { margin-top: 100px; }
.resenas__fila { overflow: hidden; }
.resenas__fila + .resenas__fila { margin-top: 12px; }
.resenas__pista { display: flex; width: max-content; animation: marquesina var(--dur, 60s) linear infinite; }
.resenas__pista[data-sentido="der"] { animation-direction: reverse; }
.resenas__grupo { display: flex; align-items: stretch; gap: 12px; padding-right: 12px; }
.resena { flex: none; width: 433px; background: #121212; padding: 6px; border-radius: 16px; }
.resena__in { height: 100%; background: var(--negro); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; }
.resena__texto { font: 500 18px/24px var(--switzer); letter-spacing: -.2px; color: #fff; max-width: 373px; flex: 1; }
.resena__linea { display: block; height: 1px; background: var(--linea-osc); margin: 40px 0 24px; }
.resena__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.resena__autor { display: flex; align-items: center; gap: 12px; min-width: 0; }
.resena__ini { width: 52px; height: 52px; border-radius: 50%; background: var(--azul); color: var(--cian); display: grid; place-items: center; font: 500 20px/1 var(--archivo); flex: none; }
.resena__nombre { display: block; font: 500 16px/20px var(--archivo); color: #fff; }
.resena__cargo { display: block; margin-top: 6px; font: 400 14px/16px var(--archivo); color: var(--gris2); }
.resenas__movil { display: none; }
.resenas:hover .resenas__pista { animation-play-state: paused; }

/* ---------- Preguntas ---------- */
.faq { padding: 140px 0 0; }
.faq__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.faq__titulo { max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.faq__bajada { max-width: 370px; font: 500 16px/22px var(--switzer); color: var(--gris); }
.faq__lista { width: 100%; max-width: 780px; display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--crema2); border-radius: 12px; padding: 22px; }
.faq__arriba { width: 100%; display: flex; align-items: center; gap: 20px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.faq__num { width: 20px; height: 20px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font: 400 12px/12px var(--archivo); flex: none; }
.faq__pregunta { flex: 1; font: 600 18px/20px var(--archivo); letter-spacing: -.2px; color: #000; }
.mas { position: relative; width: 40px; height: 40px; flex: none; }
.mas span { position: absolute; background: #000; border-radius: 2px; }
.mas span:first-child { left: 10px; top: 19px; width: 20px; height: 2px; }
.mas span:last-child { left: 19px; top: 10px; width: 2px; height: 20px; transition: transform .3s var(--oc); }
.faq__item.abierta .mas span:last-child { transform: rotate(90deg); }
.faq__abajo { height: 0; overflow: hidden; transition: height .3s var(--oc); }
.faq__respuesta { padding-top: 22px; font: 500 16px/22px var(--switzer); color: var(--gris); max-width: 680px; }

/* ---------- Blog ---------- */
.blogsec { padding: 140px 0; }
.blogsec__rejilla { margin-top: 100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 8px; }
.tart { display: block; color: #000; text-decoration: none; }
.tart__img { display: block; aspect-ratio: 444 / 312; border-radius: 10px; overflow: hidden; background: var(--crema2); }
/* Las portadas de los artículos (OpenClaw, 1200×630) llevan el texto a la izquierda: el recorte se ancla ahí. */
.tart__img img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; transition: transform .5s var(--oc); }
.tart__img--marca { display: grid; place-items: center; background: var(--azul); }
.tart__img--marca img { width: 46%; height: auto; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .tart:hover .tart__img img { transform: scale(1.05); } }
.tart__nombre { display: block; margin-top: 16px; font: 600 20px/22px var(--archivo); letter-spacing: -.2px; }
.tart__fecha { display: block; margin-top: 9px; font: 400 14px/16px var(--archivo); color: var(--gris); }

/* ---------- Pie ---------- */
.pie { height: 100vh; height: 100svh; min-height: 720px; padding: 12px; transform-origin: 50% 0; }
.pie__caja { height: 100%; background: var(--negro); border-radius: 24px; padding: 90px 0 28px; color: var(--claro); }
.pie__in { height: 100%; display: flex; flex-direction: column; }
.pie__arriba { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.pie__marca { font: 500 clamp(64px, 9.7vw, 140px)/1.086 var(--archivo); letter-spacing: -2px; color: var(--claro); white-space: nowrap; }
.pie__boletin { width: 100%; max-width: 310px; }
.pie__linea { height: 1px; background: var(--linea-osc); margin: 66px 0 86px; }
.pie__medio { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.pie__izq { max-width: 344px; }
.pie__texto { font: 500 16px/22px var(--switzer); letter-spacing: -.2px; color: var(--claro); margin-bottom: 28px; }
.pie__datos { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; font: 500 15px/20px var(--archivo); }
.pie__datos a { color: var(--gris2); text-decoration: none; }
.pie__datos a:hover { color: var(--claro); }
.pie__cols { display: flex; gap: 96px; justify-content: flex-end; }
.pie__col { display: flex; flex-direction: column; gap: 20px; }
.pie__col-titulo { font: 500 16px/20px var(--archivo); color: var(--gris2); margin-bottom: 4px; }
.pie__link { font: 400 16px/18px var(--archivo); color: var(--claro); text-decoration: none; }

.pie__abajo { margin-top: auto; padding-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 400 14px/18px var(--archivo); }
.pie__redes { display: flex; gap: 20px; flex-wrap: wrap; }
.pie__redes a { color: var(--claro); text-decoration: none; }
.pie__redes a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__credito { color: var(--gris2); }

/* Formularios (Contact Form 7 o respaldo). */
.f-respaldo { position: relative; display: flex; align-items: center; justify-content: space-between; background: var(--claro); border: 1px solid #ccc; border-radius: 16px; padding: 4px 4px 4px 18px; color: var(--gris); text-decoration: none; font: 400 14px/18px var(--archivo); }
.f-respaldo__btn { background: var(--negro); color: #fff; border-radius: 12px; padding: 11px 20px; font: 500 15px/18px var(--archivo); }
.f-boletin { position: relative; }
.f-boletin p, .f--boletin p { margin: 0; }
.f-boletin .wpcf7-form-control-wrap { display: block; }
.f--boletin .wpcf7-not-valid-tip { color: #ffb4b4; font: 400 12px/16px var(--archivo); margin-top: 6px; }
.f--boletin input[type=email] { width: 100%; background: var(--claro); border: 1px solid #ccc; border-radius: 16px; padding: 16px 120px 16px 18px; font: 400 14px/18px var(--archivo); color: #000; }
.f--boletin input[type=submit] { position: absolute; right: 4px; top: 4px; bottom: 4px; background: var(--negro); color: #fff; border: 0; border-radius: 12px; padding: 0 20px; font: 500 15px/18px var(--archivo); cursor: pointer; }
.f--boletin .wpcf7-response-output { color: var(--claro); font: 400 13px/18px var(--archivo); margin: 10px 0 0 !important; border: 0 !important; padding: 0 !important; }
.f--boletin .wpcf7-spinner { position: absolute; right: -28px; top: 14px; }

/* ---------- Título de páginas internas ---------- */
.ptitulo { padding: 90px 0 0; }
.ptitulo__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 46px; }
.ptitulo__izq { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.ptitulo__izq .sub__txt { font: 500 18px/22px var(--archivo); }
.ptitulo__grande { font: 500 88px/92px var(--archivo); letter-spacing: -2px; color: #000; }
.ptitulo__der { max-width: 560px; width: 100%; }
.ptitulo__texto { font: 500 24px/30px var(--switzer); letter-spacing: -.5px; color: #000; }
.ptitulo__botones { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.ptitulo__meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 28px; font: 500 16px/20px var(--archivo); }
.ptitulo__meta div { display: flex; gap: 6px; }
.ptitulo__meta dt { color: var(--gris); }
.clientes { margin-top: 18px; display: flex; align-items: center; gap: 16px; }
.clientes__caras { display: flex; }
.clientes__caras img, .clientes__mas { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--crema); }
.clientes__caras > * + * { margin-left: -8px; }
.clientes__mas { display: grid; place-items: center; background: var(--negro); color: #fff; font: 400 10px/11px var(--archivo); }
.clientes__txt { display: flex; flex-direction: column; gap: 6px; }
.clientes__txt p { font: 400 14px/16px var(--switzer); color: #000; }

/* ==================== Tableta (≤ 991) ==================== */
@media (max-width: 991px) {
	.contenedor { padding: 0 30px; }
	.contenedor-m, .servicios__in { padding: 0 30px; }
	.nav__menu, .nav__cta, .nav__der > .nav__idioma { display: none; }
	.nav__in { display: flex; justify-content: space-between; }
	.nav__boton { display: block; }
	.heroenv .nav { padding-top: 32px; }
	.nav__panel { display: block; position: absolute; top: calc(100% + 10px); left: 10px; right: 10px; padding: 24px 18px; border-radius: 12px; background: rgba(0, 0, 0, .27); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
		clip-path: inset(0 0 100% 0 round 12px); opacity: 0; visibility: hidden; transition: clip-path .4s ease, opacity .3s ease, visibility 0s linear .4s; }
	.nav.abierta .nav__panel { clip-path: inset(0 0 0 0 round 12px); opacity: 1; visibility: visible; transition: clip-path .4s ease, opacity .25s ease; }
	.nav__lista { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
	.nav__panel-pie { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
	.nav--claro .nav__link--panel, .nav--claro .nav__idioma--panel { color: #fff; }
	.nav--oscuro .nav__link--panel, .nav--oscuro .nav__idioma--panel { color: #000; }
	.nav__idioma--panel { border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
	.hero { height: 82vh; height: 82svh; padding: 10px; }
	.hero__velo { opacity: .33; }
	.hero__contenido { padding: 130px 30px 50px; }
	.hero__titulo { font-size: 68px; line-height: 74px; }
	.hero__texto { max-width: 420px; padding-left: 20px; }
	.titulo-grande, .stitulo__grande { font-size: 60px; line-height: 66px; letter-spacing: -1px; }
	.estudio { padding: 90px 0; }
	.estudio__in { flex-direction: column; gap: 40px; }
	.estudio__texto { font-size: 36px; line-height: 44px; }
	.estudio__cifras { gap: 60px; }
	.trabajo__rejilla, .precios__rejilla, .proceso__rejilla, .blogsec__rejilla { margin-top: 70px; }
	.servicio { flex-direction: column; gap: 28px; top: 60px; }
	.servicio__media { width: 100%; }
	.precios__rejilla { grid-template-columns: 1fr 1fr; }
	.proceso__rejilla { grid-template-columns: 1fr 1fr; }
	.trabajo__rejilla { grid-template-columns: 1fr; } /* Zephyr: .work-collection-list pasa a 1 columna en 991 */
	.paso { gap: 140px; }
	.faq__in { flex-direction: column; gap: 40px; }
	.faq__titulo { max-width: none; }
	.blogsec__rejilla { grid-template-columns: 1fr 1fr; }
	.pie { padding: 10px; }
	.pie__medio { flex-direction: column; gap: 50px; }
	.pie__cols { width: 100%; justify-content: space-between; gap: 30px; }
	.ptitulo__in { flex-direction: column; gap: 26px; }
	.ptitulo__grande { font-size: 68px; line-height: 74px; }
}

/* ==================== Celular (≤ 767) ==================== */
@media (max-width: 767px) {
	.contenedor, .contenedor-m, .servicios__in { padding: 0 18px; }
	.nav { padding-top: 26px; }
	.heroenv .nav { padding-top: 26px; }
	.nav__in { min-height: 22px; }
	.nav__logo img { height: 22px; }
	.hero { height: 78vh; height: 78svh; padding: 9px; }
	.hero__caja { border-radius: 18px; }
	.hero__velo { opacity: .36; }
	.hero__contenido { padding: 90px 16px 40px; }
	.hero__titulo { font-size: 44px; line-height: 50px; letter-spacing: -.5px; max-width: none; }
	.hero__h1 { font-size: 15px; line-height: 19px; }
	.hero__abajo { flex-direction: column; align-items: flex-start; gap: 30px; }
	.hero__texto { max-width: 420px; border-left: 0; padding-left: 0; }
	.hero__texto p { font-size: 16px; line-height: 22px; letter-spacing: 0; }
	.hero__etiquetas { gap: 12px; }
	.hero__etiquetas a { font-size: 18px; line-height: 20px; }
	.hero__video--escritorio { display: none; }
	.hero__video--movil { display: block; }
	.sub { gap: 8px; }
	.sub__txt { font-size: 16px; line-height: 20px; }
	.titulo-grande, .stitulo__grande { font-size: 48px; line-height: 56px; letter-spacing: -.4px; }
	.stitulo { flex-wrap: wrap; }
	.estudio { padding: 70px 0; }
	.estudio__in { gap: 26px; }
	.estudio__texto { font-size: 26px; line-height: 30px; letter-spacing: -.4px; }
	.estudio__der { gap: 40px; }
	.estudio__cifras { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 20px 20px; }
	.estudio__cifras .cifra { min-width: 40%; }
	.cifra__n { font-size: 40px; line-height: 48px; letter-spacing: -.3px; }
	.logos { padding-bottom: 80px; }
	.logos__item { width: 150px; height: 145px; }
	.logos__item img { max-width: 104px; max-height: 44px; }
	.logos__velo { bottom: 80px; width: 60px; }
	.trabajo { padding: 40px 0 80px; }
	.trabajo__rejilla { margin-top: 50px; grid-template-columns: 1fr; }
	.tart__nombre { font-size: 18px; line-height: 20px; }
	.tproy__img { border-radius: 10px; }
	.trabajo__boton { margin-top: 50px; }
	.servicios { padding: 0 7px; }
	.servicios__caja { border-radius: 14px; padding: 50px 0; }
	.servicios__lista { margin-top: 50px; gap: 40px; }
	.servicio { top: 50px; padding-top: 28px; gap: 24px; }
	.servicio__izq { gap: 24px; }
	.servicio__texto { margin-top: 0; }
	.servicio__media { border-radius: 14px; }
	.servicios__boton { margin-top: 50px; }
	.precios { padding: 80px 0 0; }
	.precios__rejilla { margin-top: 50px; grid-template-columns: 1fr; gap: 20px; }
	.plan { border-radius: 10px; }
	.proceso { padding: 80px 0; }
	.proceso__rejilla { margin-top: 50px; grid-template-columns: 1fr; }
	.resenas { padding: 0 7px; }
	.resenas__caja { border-radius: 14px; padding: 50px 0 40px; }
	.resenas__filas { display: none; }
	.resenas__movil { display: block; margin-top: 50px; padding: 0 18px; }
	.resenas__ventana { overflow: hidden; border-radius: 16px; }
	.resenas__tira { display: flex; transition: transform .5s ease; }
	.resenas__tira .resena { width: 100%; }
	.resenas__flechas { display: flex; justify-content: center; gap: 34px; margin-top: 28px; }
	.flecha { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cian); color: var(--azul); display: grid; place-items: center; cursor: pointer; }
	.flecha:active { transform: scale(.94); }
	.faq { padding: 80px 0 0; }
	.faq__in { gap: 30px; }
	.faq__arriba { align-items: flex-start; }
	.faq__item .faq__arriba { display: grid; grid-template-columns: 1fr auto; row-gap: 11px; }
	.faq__num { grid-column: 1; }
	.faq__pregunta { grid-column: 1; font-size: 16px; line-height: 20px; }
	.faq__arriba .mas { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
	.blogsec { padding: 80px 0; }
	.blogsec__rejilla { margin-top: 50px; grid-template-columns: 1fr; gap: 42px; }
	.pie { height: auto; min-height: 0; padding: 9px; }
	.pie__caja { border-radius: 14px; padding: 50px 0 20px; }
	.pie__arriba { flex-direction: column; align-items: flex-start; gap: 28px; }
	.pie__marca { font-size: 50px; line-height: 56px; letter-spacing: -.5px; white-space: normal; }
	.pie__boletin { max-width: none; }
	.pie__linea { margin: 40px 0 40px; }
	.pie__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px 20px; }
	.pie__col:nth-child(2) { grid-column: 1 / -1; order: 3; }
	.servicios .stitulo { flex-wrap: nowrap; }
	.servicios .stitulo__izq { flex: 1; }
	.pie__abajo { flex-direction: column; align-items: center; text-align: center; }
	.pie__redes { justify-content: center; }
	.ptitulo { padding: 50px 0 0; }
	.ptitulo__izq { gap: 6px; }
	.ptitulo__grande { font-size: 54px; line-height: 63px; letter-spacing: -.5px; }
	.ptitulo__texto { font-size: 21px; line-height: 30px; letter-spacing: -.2px; }
	.clientes { justify-content: space-between; }
}

@media (max-width: 479px) {
	.hero { height: 80vh; height: 80svh; padding: 7px; }
	.servicios, .resenas { padding: 0 7px; }
	.pie { padding: 7px; }
}

/* Movimiento reducido: sin desplazamientos ni desenfoques; se conservan opacidad y color. */
@media (prefers-reduced-motion: reduce) {
	.js [data-entra] { transform: none; filter: none; transition: opacity .4s ease; }
	.logos__pista, .resenas__pista { animation: none; }
	.heroenv { transform: none !important; }
	.cargador { display: none !important; }
	* { scroll-behavior: auto !important; }
}

/* El botón flotante de WhatsApp (Joinchat) no debe tapar el crédito del pie en celular. */
@media (max-width: 767px) { body:has(.joinchat) .pie__abajo { padding-bottom: 70px; } }