/* ---------------------------------------------------------
   Datio — grid de bloques (home tipo bento, componente aislado).
   --------------------------------------------------------- */

/* Filas en fracciones de 100vh (no una altura fija) a propósito: así los
   bloques siempre entran en una sola pantalla sin scroll en desktop, sea
   cual sea la altura real de la ventana. En mobile esto se desarma (ver
   media query más abajo) — apilado, con scroll normal. 5×4 = 20 celdas,
   hoy exactas (12 bloques, ver datio_get_bloques()).
   IMPORTANTE: un bloque 'grande' (2×2, como la mascota) necesita que
   cuando le toque su turno en el orden del array queden 2 FILAS enteras
   libres, no solo 2 celdas sueltas — grid-auto-flow:dense llena todo lo
   anterior de forma voraz, así que si un 'grande' queda muy al final
   (después de que ya se llenaron 2+ filas completas) nunca va a
   encontrar dónde entrar limpio y se va a una fila implícita mal
   dimensionada (verificado — pasó con la mascota antes de moverla acá).
   La posición de la mascota en el array está elegida a mano por esto, no
   es arbitraria — si se mueve, hay que volver a simular el packing a
   mano o probar en el navegador antes de dar por bueno el resultado. Lo
   mismo vale para cualquier otro bloque 'grande' que se agregue. */
/* Base: la versión simple (2026-08-22, v3) que ya se probó en pantalla
   real y funciona — sigue siendo el layout de verdad en mobile Y el
   fallback en desktop si por lo que sea el JS de masonry no llega a
   correr (bloqueado, error, gsap no cargó). Nunca queda roto: en el peor
   caso se pierde el escalonado y se ve como esta base ya probada. */
.datio-bloques {
	/* Alto real: min-height, no height fijo — el JS (datioLayoutMasonry)
	   puede hacer crecer esto más allá de 100vh cuando alguna fila pide
	   más lugar del que entra en pantalla (pedido explícito: "no importa
	   si hay que scrollear"), escribiendo un height inline en px. */
	min-height: 100vh;
	max-width: 1200px;
	margin-inline: auto;
	padding: 32px 24px 14px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-auto-flow: dense;
	gap: 12px;
}

.datio-bloque--chico {
	grid-column: span 1;
	grid-row: span 1;
}

.datio-bloque--ancho {
	grid-column: span 2;
	grid-row: span 1;
}

.datio-bloque--alto {
	grid-column: span 1;
	grid-row: span 2;
}

.datio-bloque--grande {
	grid-column: span 2;
	grid-row: span 2;
}

/* Modo masonry (intercalado real, v4): activado por JS agregando esta
   clase — ver datioLayoutMasonry() en bloques.js — recién DESPUÉS de
   calcular y aplicar las posiciones, nunca antes (evita el flash de
   tarjetas superpuestas en 0,0 mientras no hay valores todavía). Usa
   custom properties (--m-top/--m-left/--m-width/--m-height) en vez de
   top/left inline directos a propósito: abrirBloque/cerrarBloqueVisual
   (bloques.js) limpian top/left/position inline con gsap.set(...) para
   volver a medir la posición "de casa" del bloque al cerrarlo — si el
   masonry escribiera esos mismos inline styles, esa limpieza se los
   llevaría puestos también y el bloque cerraría mal. Las custom
   properties quedan afuera de ese alcance. */
.datio-bloques.is-masonry {
	display: block;
	position: relative;
}

.datio-bloques.is-masonry .datio-bloque {
	position: absolute;
	top: var(--m-top, 0px);
	left: var(--m-left, 0px);
	width: var(--m-width, 100%);
	height: var(--m-height, 100%);
}

.datio-bloque {
	position: relative;
	border-radius: var(--datio-radius);
	overflow: hidden;
	background: var(--datio-surface);
	border: 1px solid var(--datio-border);
	/* Profundidad de contraste/borde/luz, no de sombra negra pesada
	   (regla explícita del rediseño) — esta sombra es apenas un
	   despegue del fondo, no un golpe de negro. */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

/* La celda del logo ya NO es transparente (pedido explícito, imagen de
   referencia): lleva la misma superficie/borde/sombra que el resto de
   las tarjetas — es una tarjeta más de la grilla, no un elemento flotante
   aparte. El logo en sí (el video) no se toca. */

/* Regla 70/20/10: el fondo de la tarjeta sigue siendo mayormente oscuro/
   neutro (--datio-surface) — el color de marca aparece como un halo muy
   contenido en la esquina del ícono, nunca como relleno sólido. El propio
   chip de ícono (.datio-bloque__icono) SÍ lleva el color plano — ahí es
   donde vive el 20%, no en la tarjeta entera. */
.datio-bloque--red {
	background: radial-gradient(120% 90% at 14% 0%, var(--datio-glow-red), transparent 58%), var(--datio-surface);
	border-color: rgba(255, 75, 63, 0.45);
}

.datio-bloque--teal {
	background: radial-gradient(120% 90% at 14% 0%, var(--datio-glow-teal), transparent 58%), var(--datio-surface);
	border-color: rgba(24, 197, 191, 0.45);
}

.datio-bloque--yellow {
	background: radial-gradient(120% 90% at 14% 0%, var(--datio-glow-yellow), transparent 58%), var(--datio-surface);
	border-color: rgba(255, 196, 0, 0.45);
}

/* Diseño Web: pedido explícito — la luz amarilla vive detrás de la
   miniatura (a la derecha), no en la esquina del ícono como en el resto
   de las tarjetas amarillas. Reemplaza el halo de --yellow de arriba
   (gana por especificidad, sin !important) y se combina con el glow
   interno de .datio-bloque-browser__cuerpo para que no corte en el borde
   de la maqueta. */
.datio-bloque[data-bloque-id="diseno-web"] {
	background: radial-gradient(75% 90% at 78% 8%, rgba(255, 196, 0, 0.4), transparent 68%), var(--datio-surface);
}

/* "Blanco" en los datos = el ícono es el chip claro/neutro (ver
   Tráfico y SEO) — el halo de fondo es apenas una luz blanca tenue, la
   tarjeta en sí sigue oscura (nunca una superficie blanca completa: eso
   rompería el 70% oscuro dominante que pide el rediseño). */
.datio-bloque--white {
	background: radial-gradient(120% 90% at 14% 0%, rgba(255, 255, 255, 0.07), transparent 58%), var(--datio-surface);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Al expandirse, la misma tarjeta pasa a ocupar toda la pantalla — el
   halo (120%/90% del propio tamaño de la tarjeta) escalaría con ella y
   terminaría siendo un lavado de color demasiado extendido. Achicado acá
   (mismo ancla 14%/0%, mismo color — la identidad no cambia, solo el
   alcance) para que siga leyéndose como una luz en la esquina y no como
   relleno. Ver el punto del brief: "el color debe funcionar como
   identidad, no como relleno gigante". */
.datio-bloque.is-open.datio-bloque--red {
	background: radial-gradient(55% 60% at 14% 0%, var(--datio-glow-red), transparent 62%), var(--datio-surface);
}

.datio-bloque.is-open.datio-bloque--teal {
	background: radial-gradient(55% 60% at 14% 0%, var(--datio-glow-teal), transparent 62%), var(--datio-surface);
}

.datio-bloque.is-open.datio-bloque--yellow {
	background: radial-gradient(55% 60% at 14% 0%, var(--datio-glow-yellow), transparent 62%), var(--datio-surface);
}

.datio-bloque.is-open.datio-bloque--white {
	background: radial-gradient(55% 60% at 14% 0%, rgba(255, 255, 255, 0.07), transparent 62%), var(--datio-surface);
}

/* Contratar es la excepción deliberada: el CTA principal, "debe sentirse
   como una acción importante" — se queda con más color que el resto, un
   halo coral bien presente en vez del toque sutil genérico de arriba. */
.datio-bloque[data-bloque-id="contratar"] {
	background: radial-gradient(135% 130% at 100% 100%, rgba(255, 75, 63, 0.5), transparent 62%), radial-gradient(90% 90% at 0% 0%, rgba(255, 75, 63, 0.22), transparent 60%), var(--datio-surface);
	border-color: rgba(255, 75, 63, 0.35);
}

/* Misma lógica que el resto al expandirse (ver arriba): el halo doble de
   Contratar, pensado para una tarjeta chica, se vuelve demasiado
   presente a pantalla completa. Achicado, mismos anclajes/colores. */
.datio-bloque[data-bloque-id="contratar"].is-open {
	background: radial-gradient(55% 55% at 100% 100%, rgba(255, 75, 63, 0.4), transparent 65%), radial-gradient(45% 45% at 0% 0%, rgba(255, 75, 63, 0.16), transparent 62%), var(--datio-surface);
}

/* Bloques de contenido */

.datio-bloque__abrir {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	/* Título/preview arriba (pedido explícito, imagen de referencia) — antes
	   flex-end + margin-bottom:auto en el ícono empaquetaba todo desde
	   abajo. Ahora todo fluye desde arriba: ícono, título, preview, y el
	   resto de la tarjeta (gráficos/mockups, casi siempre position:absolute)
	   queda como aire/fondo debajo. */
	justify-content: flex-start;
	gap: 2px;
	width: 100%;
	height: 100%;
	padding: 18px;
	cursor: pointer;
}

/* Chip de ícono — el "elemento visual conceptual" mínimo que tiene TODA
   tarjeta (regla del rediseño: título + microcopy + un elemento visual +
   una microinteracción, nada más). Vive arriba a la izquierda, aparte del
   flujo del título/preview que quedan abajo. */
/* Ícono en el flujo normal del flex column (NO position:absolute) — con
   margin-bottom:auto queda anclado arriba mientras título/preview/link se
   empujan solos hacia abajo (justify-content:flex-end del botón). Se
   probó position:absolute (sacarlo del flujo del todo) para que nunca
   compitiera por espacio — pero eso reemplaza un costo de ~31px (icono+
   gap, lo que ya cuesta acá) por uno de ~56px (padding-top fijo para
   evitar que el texto se monte encima), y con 12 tarjetas compartiendo
   un mismo 100vh esos ~25px extra por tarjeta ya no entraban en
   ninguna combinación de pesos — terminaba rompiendo tarjetas que antes
   andaban bien. Vuelve el margin-bottom:auto; el bug real que motivó el
   cambio (ícono recortado arriba, ver [[historial]]) se resuelve dándole
   a cada tarjeta el peso de masonry que su contenido necesita de
   verdad, no cambiando la técnica de layout. */
.datio-bloque__icono {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.datio-bloque__icono svg {
	width: 14px;
	height: 14px;
}

/* Diseño Web y Mascota son 'grande' (2×2) — hay altura real de sobra, el
   ícono puede volver a su tamaño de referencia sin arriesgar el
   desborde que sí existe en las tarjetas 'chico'/'ancho' (158px de alto). */
.datio-bloque--grande .datio-bloque__icono {
	width: 42px;
	height: 42px;
	border-radius: 12px;
}

.datio-bloque--grande .datio-bloque__icono svg {
	width: 20px;
	height: 20px;
}

.datio-bloque--yellow .datio-bloque__icono { background: var(--datio-brand-yellow); color: #241900; }
.datio-bloque--teal .datio-bloque__icono { background: var(--datio-brand-teal); color: #062622; }
.datio-bloque--red .datio-bloque__icono { background: var(--datio-brand-red); color: #2b0805; }
.datio-bloque--white .datio-bloque__icono { background: #ffffff; color: #15111e; }

/* Portfolio usa flex-direction:row (texto a la izquierda, captura a la
   derecha, ver más abajo) — ahí el truco de margin-bottom:auto no aplica
   (es para columnas), así que el ícono vuelve a ir position:absolute. No
   hay riesgo de choque con el texto en este layout: texto y captura ya
   están separados en columnas propias, no empaquetados desde abajo. */
.datio-bloque__abrir--portfolio .datio-bloque__icono {
	position: absolute;
	top: 24px;
	left: 24px;
	margin-bottom: 0;
}

/* Contratar — copiado tal cual de la imagen de referencia: ícono
   (apretón de manos) y título en la misma fila, preview debajo, y una
   flecha circular aparte anclada a la derecha de toda la tarjeta. Grid
   en vez de flex-column (que es lo que usan las demás) porque acá el
   ícono necesita ocupar las DOS filas (título+preview) para quedar
   centrado verticalmente junto al título, no arriba de todo. */
.datio-bloque[data-bloque-id="contratar"] .datio-bloque__abrir {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 14px;
}

.datio-bloque[data-bloque-id="contratar"] .datio-bloque__icono {
	grid-column: 1;
	grid-row: 1 / 3;
	margin-top: 0;
}

.datio-bloque[data-bloque-id="contratar"] .datio-bloque__titulo {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
}

.datio-bloque[data-bloque-id="contratar"] .datio-bloque__preview {
	grid-column: 2;
	grid-row: 2;
}

.datio-bloque-contratar__flecha {
	grid-column: 3;
	grid-row: 1 / 3;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.datio-bloque-contratar__flecha svg {
	width: 20px;
	height: 20px;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-bloque__icono {
		transition: transform 0.2s ease;
	}
	.datio-bloque__abrir:hover .datio-bloque__icono {
		transform: translateY(-2px);
	}
}

/* Nada de nowrap/ellipsis: el pedido explícito es que el texto se vea
   COMPLETO. Envuelve normal (hasta 2 líneas cortas) — con fuente más
   chica que antes, el total (ícono+título+preview+link) entra en el
   presupuesto real de una tarjeta 'chico' sin necesitar trucos de
   recorte. Ver la nota grande de arriba sobre -webkit-line-clamp: esa
   técnica quedó descartada para siempre acá, rompía con flexbox. */
.datio-bloque__titulo {
	display: block;
	font-family: var(--datio-font-titulo);
	font-weight: 600;
	font-size: clamp(0.78rem, 1.05vw, 0.98rem);
	line-height: 1.2;
	color: var(--datio-text);
	/* Un respiro chico respecto del ícono — el resto de las decoraciones
	   (mockups, gráficos) van position:absolute, así que en el flujo
	   normal el título siempre queda pegado al ícono sin esto. */
	margin-top: 6px;
}

/* Las 'grande' tienen alto real de sobra — título más grande, como
   corresponde a la tarjeta más importante del grid. */
.datio-bloque--grande .datio-bloque__titulo {
	font-size: clamp(1.05rem, 1.6vw, 1.5rem);
	margin-bottom: 4px;
}

/* Diseño Web: "Diseño" arriba, "Web" abajo en amarillo — pedido explícito
   de la imagen de referencia, reemplaza el título de una sola línea. */
.datio-bloque__titulo--partido {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.datio-bloque__titulo-acento {
	color: var(--datio-brand-yellow);
	font-size: 1.35em;
}

.datio-bloque__preview {
	display: block;
	margin: 0;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--datio-text-dim);
}

.datio-bloque--grande .datio-bloque__preview {
	font-size: 0.88rem;
	max-width: 32ch;
}


/* Preview animado del tile colapsado de la mascota — retomado ahora que
   el bloque es 'grande': la vez anterior (bloque 'chico') se sacó porque
   el marco competía por espacio con título+preview dentro de la fila
   flex y en ventanas bajas se desbordaba (ver mascota-guardian.js y el
   comentario de arriba sobre por qué la mascota quedó grande). Esta vez
   el marco NO compite por espacio: es position:absolute con su propio
   alto (top:0/bottom:0) y ancho derivado de aspect-ratio:1/1, así que
   cualquiera sea el ancho real del tile (varía con el viewport, algo que
   antes no pasaba con un bloque 'chico' de tamaño más estable) el recorte
   del video sigue siendo EXACTAMENTE el mismo cuadrado ya probado en la
   vista completa (mascota.css) — nunca se vuelve a exponer la barra
   negra propia del archivo por los costados. */
/* Datio Pet "asomándose" — siempre esta versión estática (pedido
   explícito: sin video/emociones ni switch de prender/apagar). Ancla
   abajo a la derecha, con las manos justo en la base de la tarjeta (no
   colgando por fuera, pedido explícito) — el overflow:visible de la
   tarjeta (ver más abajo) queda de sobra por si el recorte de la imagen
   tiene algo de aire debajo de las manos. */
.datio-bloque-mascota__estatica {
	position: absolute;
	right: 6px;
	bottom: -14px;
	z-index: 2;
	width: 58%;
	max-width: 230px;
	height: auto;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-bloque-mascota__estatica {
		transition: transform 0.3s ease;
	}
	.datio-bloque[data-bloque-id="mascota"]:hover .datio-bloque-mascota__estatica {
		transform: translateY(-6px);
	}
}

/* La única tarjeta del grid con overflow:visible — todas las demás
   necesitan overflow:hidden para las esquinas redondeadas. Acá se
   habilita a propósito para que la imagen de arriba pueda "colgar" fuera
   del borde; nada más adentro de esta tarjeta se ve afectado porque nada
   más se posiciona fuera de sus límites normales. */
.datio-bloque[data-bloque-id="mascota"] {
	overflow: visible;
}

/* Scrim para que título/preview se lean encima del video en vez de
   competir con él — el resto de los bloques no lo necesita porque su
   fondo es un color plano de marca, no una imagen en movimiento. */
.datio-bloque__abrir--mascota {
	position: relative;
	z-index: 1;
}

.datio-bloque__abrir--mascota::before {
	content: '';
	position: absolute;
	inset: 0;
	/* to bottom, no to top — el título/preview ahora viven arriba (pedido
	   explícito, imagen de referencia), el scrim tiene que ser oscuro ahí
	   arriba para que el texto blanco se lea sobre el video. */
	background: linear-gradient(to bottom, rgba(8, 24, 22, 0.75), rgba(8, 24, 22, 0) 60%);
	z-index: 1;
	pointer-events: none;
}

.datio-bloque__abrir--mascota .datio-bloque__titulo,
.datio-bloque__abrir--mascota .datio-bloque__preview {
	position: relative;
	z-index: 2;
	color: #ffffff;
	/* Le deja el lugar al marco (ahora abajo a la derecha, ver arriba) —
	   sin esto el texto sigue yendo a ancho completo y monta encima. */
	max-width: 54%;
}

.datio-bloque__abrir--mascota .datio-bloque__preview {
	opacity: 0.92;
}

/* Preview colapsado del portfolio: en vez de una foto de fondo a pantalla
   completa (tapaba el rojo de marca), es un marquito chico con las 3
   capturas turnándose (crossfade) — el bloque conserva su color e igual
   se nota que hay ejemplos reales antes de entrar. */
.datio-bloque__abrir--portfolio {
	flex-direction: row;
	/* flex-start, no center — título/preview arriba (pedido explícito,
	   imagen de referencia), alineado con el ícono, no centrado en el
	   alto de la tarjeta. */
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.datio-bloque-portfolio__texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	/* El ícono va position:absolute arriba a la izquierda acá (layout en
	   fila, no columna) — este padding le hace lugar para que un título
	   largo de 2 líneas ("Portfolio y casos de éxito") no le quede
	   montado encima. */
	padding-top: 40px;
}

/* Una sola maqueta de browser/captura, no un carrusel automático (pedido
   explícito del rediseño: "no un slider, quiero entrar dentro de la
   pieza, no mirar un carrusel"). El hover es la única interacción acá —
   zoom apenas perceptible + leve desplazamiento, nunca un zoom violento. */
.datio-bloque-portfolio__slider {
	position: relative;
	flex-shrink: 0;
	align-self: stretch;
	width: 58%;
	max-width: 340px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--datio-border);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
}

/* Marco de navegador — mismo lenguaje visual que la maqueta de Diseño Web
   (ver .datio-bloque-browser__barra): así la miniatura del portfolio se
   lee como "un sitio abierto en el navegador", no como una foto suelta. */
.datio-bloque-portfolio__navbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	flex-shrink: 0;
	display: flex;
	gap: 5px;
	padding: 8px 10px;
	background: rgba(11, 8, 18, 0.55);
	backdrop-filter: blur(2px);
}

.datio-bloque-portfolio__navbar span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}

.datio-bloque-portfolio__nav-inferior {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
}

.datio-bloque-portfolio__flecha {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(11, 8, 18, 0.75);
	color: var(--datio-text);
	font-size: 0.72rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Envuelve la imagen con un poco de aire extra (-6px) para que el
   parallax (unos px de desplazamiento, ver data-parallax en bloques.js)
   nunca deje ver un borde vacío al desplazarse. */
.datio-bloque-portfolio__parallax {
	position: absolute;
	inset: -6px;
	will-change: transform;
}

.datio-bloque-portfolio__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.datio-bloque-portfolio__contador {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(11, 8, 18, 0.75);
	color: var(--datio-text);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-bloque-portfolio__slide {
		transition: transform 0.5s ease, filter 0.5s ease;
	}
	.datio-bloque__abrir:hover .datio-bloque-portfolio__slide {
		transform: scale(1.02) translateY(-1.5%);
		filter: brightness(1.05);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.datio-bloque {
		transition: transform 0.2s ease, border-color 0.2s ease;
	}
	/* :hover en el contenedor (no en el botón) para que el hover de
	   cualquier hijo — el botón, o el ícono de cerrar — mueva la tarjeta
	   entera (borde y sombra incluidos), sin depender de :has(). */
	.datio-bloque:hover:not(.is-open):not(.is-animating) {
		transform: translateY(-3px);
		border-color: rgba(255, 255, 255, 0.16);
	}
}

/* Ticker del bloque Dominios — mini interfaz de búsqueda (regla del
   rediseño: "no un buscador enorme"), la píldora en sí no cambia de
   tamaño; adentro, un dominio de ejemplo por vez sigue cruzando de
   derecha a izquierda — entra, pausa, un flash de glow, sigue de largo
   saliendo (bloques.js arma la secuencia con GSAP, sin cambios ahí). */
.datio-bloque-ticker {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Se estira más allá del padding del botón (márgenes negativos) —
	   pedido explícito: "casi todo el ancho de la tarjeta", no solo el
	   área de contenido de adentro, para que entre "www.tusitio.com.ar"
	   completo sin achicar la tipografía. */
	width: calc(100% + 36px);
	margin-left: -18px;
	box-sizing: border-box;
	height: 34px;
	padding: 0 12px;
	margin-top: 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--datio-border);
	overflow: hidden;
}

.datio-bloque-ticker__lupa {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	color: var(--datio-text-dim);
}

.datio-bloque-ticker__glow {
	position: absolute;
	inset: -10px;
	border-radius: 10px;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	pointer-events: none;
}

.datio-bloque-ticker__texto {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 0.78rem;
	white-space: nowrap;
	opacity: 0;
	color: var(--datio-text);
}

/* Contenido completo: oculto por defecto (en el DOM igual, para SEO), lo
   muestra el JS al expandir el bloque a pantalla completa. */
.datio-bloque__completo {
	display: none;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 64px 48px;
	overflow-y: auto;
	/* Sin esto, al llegar al final del scroll interno el gesto "se pasa"
	   al scroll de la página de fondo (que ahora puede ser más alta que
	   100vh, ver datioLayoutMasonry) — contain corta ese encadenamiento,
	   así la rueda/trackpad siempre queda scrolleando ESTE panel. */
	overscroll-behavior-y: contain;
}

/* La mascota ocupa el bloque entero sin el padding de texto normal —
   Datio Pet ya se encarga de su propio espaciado interno. */
.datio-bloque__completo--mascota {
	padding: 0;
	overflow: hidden;
}

.datio-bloque.is-open .datio-bloque__abrir {
	display: none;
}

.datio-bloque.is-open .datio-bloque__completo {
	display: block;
}

.datio-bloque__completo-titulo {
	font-family: var(--datio-font-titulo);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	margin: 0 0 20px;
}

.datio-bloque__cuerpo {
	max-width: 960px;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Elementos que aparecen a medida que se scrollea el contenido del
   bloque (no la página — el scroll pasa adentro de __completo). El JS
   les agrega .is-visible vía IntersectionObserver. */
.datio-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.datio-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-reveal {
		transition: opacity 0.5s ease, transform 0.5s ease;
	}
}

/* Promo (Starter Pack) y tarjetas de plan: negras sobre el fondo amarillo
   del bloque — mismo lenguaje "sticker" que el isotipo (negro + acento de
   color), no el overlay translúcido que tenían antes. */

.datio-plan-promo {
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 24px 28px;
	margin-bottom: 32px;
	color: #f4eefb;
}

.datio-plan-promo__badge {
	display: inline-block;
	font-weight: 800;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--datio-brand-yellow);
	color: #241900;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.datio-plan-promo__desc {
	margin: 0 0 10px;
	font-weight: 700;
}

.datio-plan-promo__items {
	margin: 0 0 14px;
	padding-left: 20px;
	color: rgba(244, 238, 251, 0.8);
}

.datio-plan-promo__precio {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}

.datio-plan-promo__precio strong {
	font-size: 1.6rem;
	color: var(--datio-brand-yellow);
}

.datio-plan-promo__precio span {
	font-size: 0.85rem;
	opacity: 0.8;
}

/* Planes */

.datio-planes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.datio-plan {
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	color: #f4eefb;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.datio-plan__nombre {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 800;
	color: #ffffff;
}

.datio-plan__precio {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
}

.datio-plan__precio strong {
	font-size: 1.4rem;
	color: var(--datio-brand-yellow);
}

.datio-plan__precio span {
	font-size: 0.78rem;
	opacity: 0.75;
}

.datio-plan__items {
	margin: 0 0 18px;
	padding-left: 18px;
	font-size: 0.85rem;
	line-height: 1.5;
	flex-grow: 1;
	color: rgba(244, 238, 251, 0.8);
}

.datio-plan__cta {
	align-self: flex-start;
	font: inherit;
	font-weight: 800;
	font-size: 0.85rem;
	padding: 10px 22px;
	border-radius: 999px;
	border: none;
	background: var(--datio-brand-red);
	color: #ffffff;
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-plan__cta {
		transition: transform 0.15s ease;
	}
	.datio-plan__cta:hover {
		transform: scale(1.06);
	}
}

/* Portfolio: grilla de miniaturas + visor con iframe del sitio real */

.datio-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Sin esto, el atributo hidden nativo no alcanza para ocultarla: nuestra
   propia regla de arriba (display:grid) pisa el default del navegador
   ([hidden]{display:none} es del user-agent, y una regla de autor gana
   aunque tenga la misma o menor especificidad). Por eso la grilla se
   quedaba visible detrás/encima del visor con el iframe. */
.datio-portfolio__grid[hidden] {
	display: none;
}

.datio-portfolio__item {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.datio-portfolio__item img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
	object-position: top center;
}

.datio-portfolio__nombre {
	padding: 12px 14px;
	font-weight: 800;
	font-size: 0.9rem;
	color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-portfolio__item {
		transition: transform 0.2s ease;
	}
	.datio-portfolio__item:hover {
		transform: scale(1.02);
	}
}

.datio-portfolio__visor {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.datio-portfolio__visor[hidden] {
	display: none;
}

.datio-portfolio__visor-barra {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.datio-portfolio__volver {
	all: unset;
	font-weight: 800;
	font-size: 0.85rem;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.datio-portfolio__visor-nombre {
	font-weight: 800;
	flex-grow: 1;
}

.datio-portfolio__visitar {
	display: inline-block;
	font-weight: 800;
	font-size: 0.85rem;
	padding: 8px 20px;
	border-radius: 999px;
	background: var(--datio-brand-red);
	color: #ffffff;
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-portfolio__visitar {
		transition: transform 0.15s ease;
	}
	.datio-portfolio__visitar:hover {
		transform: scale(1.06);
	}
}

.datio-portfolio__iframe {
	width: 100%;
	height: 65vh;
	border: none;
	border-radius: 14px;
	background: #ffffff;
}

@media (max-width: 860px) {
	.datio-portfolio__grid {
		grid-template-columns: 1fr;
	}

	.datio-portfolio__iframe {
		height: 50vh;
	}
}

/* Casos de éxito: testimonios con foto redonda, nombre y calificación
   (inventada, con permiso de las 3 clientas — ver comentario en
   datio_get_bloques()). Van siempre visibles debajo del grid/visor,
   no se ocultan al cambiar entre miniaturas e iframe. */
.datio-portfolio__casos-titulo {
	margin: 32px 0 16px;
	font-size: 1.2rem;
	font-weight: 800;
}

.datio-portfolio__casos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.datio-caso {
	display: flex;
	gap: 14px;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 18px;
	color: #f4eefb;
}

.datio-caso__foto {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.datio-caso__cuerpo {
	min-width: 0;
}

.datio-caso__cabecera {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.datio-caso__nombre {
	font-weight: 800;
	font-size: 0.92rem;
	color: #ffffff;
}

.datio-caso__calificacion {
	font-size: 0.82rem;
	color: rgba(244, 238, 251, 0.75);
}

.datio-caso__comentario {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(244, 238, 251, 0.85);
}

@media (max-width: 860px) {
	.datio-portfolio__casos {
		grid-template-columns: 1fr;
	}
}

/* Redes sociales — links simples, debajo del CTA de un bloque de contenido. */
.datio-redes {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

.datio-redes__link {
	font-weight: 700;
	font-size: 0.9rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Herramientas gratis — agrupadas por categoría (v1 chica: 4 categorías,
   ~5 links verificados cada una — el plan completo de 24 categorías queda
   para cuando esto se mude a su propia página, ver memoria del proyecto). */

/* Catálogo estilo Netflix (2026-08-24) — una fila horizontal por
   categoría, tarjetas verticales, "Ver más" al final de las que entran.
   Reemplaza la grilla plana anterior; fuente de datos ahora es
   datio_get_herramientas_completas() (los JSON reales), no el array
   chico de 4 categorías de datio_get_bloques() — ver bloques.php. */

.datio-herramientas-netflix {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.datio-herramientas-netflix__fila-titulo {
	font-family: var(--datio-font-titulo);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 14px;
}

/* Slider tipo Netflix real — scroll horizontal nativo, las flechas
   (ver más abajo) solo empujan ese scroll (bloques.js). Nada de "ver
   más": ese texto ya significa "abrir la sección" en el resto de la
   home, reusarlo acá para "mostrar más tarjetas de esta fila" confundía
   dos comportamientos distintos bajo la misma etiqueta. */
.datio-herramientas-netflix__riel-wrap {
	position: relative;
}

.datio-herramientas-netflix__riel {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.datio-herramientas-netflix__riel::-webkit-scrollbar {
	display: none;
}

.datio-herramienta-card {
	scroll-snap-align: start;
}

/* Flechas — solo aparecen cuando hay contenido para ese lado (bloques.js
   las oculta con [hidden] en los extremos del scroll), superpuestas
   sobre el borde de la fila con un degradé que las despega del fondo
   sin necesitar una sombra dura. */
.datio-herramientas-netflix__flecha {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
	color: #ffffff;
}

.datio-herramientas-netflix__flecha svg {
	width: 20px;
	height: 20px;
}

/* Mismo bug de [hidden] pisado por display:flex ya visto con el
   recuadro de overview (y con el visor de portfolio antes) — cada vez
   que un elemento necesita su propio display distinto de "none" hay que
   repetir esta regla, el default del navegador no alcanza. */
.datio-herramientas-netflix__flecha[hidden] {
	display: none;
}

.datio-herramientas-netflix__flecha--izq {
	left: 0;
	justify-content: flex-start;
	padding-left: 4px;
	background: linear-gradient(to right, var(--datio-surface) 15%, transparent);
}

.datio-herramientas-netflix__flecha--der {
	right: 0;
	justify-content: flex-end;
	padding-right: 4px;
	background: linear-gradient(to left, var(--datio-surface) 15%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.datio-herramientas-netflix__flecha {
		transition: opacity 0.2s ease;
	}
}

.datio-herramienta-card {
	all: unset;
	box-sizing: border-box;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 148px;
	padding: 16px;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	cursor: pointer;
}

.datio-herramienta-card__favicon-marco {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	/* Los favicons suelen venir con fondo blanco/transparente — un chip
	   claro atrás es lo único que los hace leerse bien sobre un fondo
	   oscuro, sea cual sea el color real del ícono. */
	background: rgba(255, 255, 255, 0.92);
	overflow: hidden;
}

.datio-herramienta-card__favicon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.datio-herramienta-card__nombre {
	font-weight: 700;
	font-size: 0.85rem;
	color: #ffffff;
	line-height: 1.3;
}

.datio-herramienta-card__precio {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(244, 238, 251, 0.75);
}

.datio-herramienta-card__precio--gratis {
	background: rgba(24, 197, 191, 0.15);
	color: #5fe0da;
}

.datio-herramienta-card__precio--freemium {
	background: rgba(255, 196, 0, 0.15);
	color: var(--datio-brand-yellow);
}

.datio-herramienta-card__precio--pago {
	background: rgba(255, 75, 63, 0.15);
	color: #ff8177;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-herramienta-card {
		transition: transform 0.15s ease, border-color 0.15s ease;
	}
	.datio-herramienta-card:hover {
		transform: translateY(-3px);
		border-color: rgba(255, 255, 255, 0.2);
	}
}

/* Recuadro de "vista general" — se llena al clickear una tarjeta (ver
   bloques.js), muestra más que el hover: favicon grande, descripción
   completa, para quién es, y la valoración de Datio si el JSON la
   trae. Vive arriba de las filas, siempre en el mismo lugar. */
.datio-herramientas-netflix__overview {
	position: relative;
	display: flex;
	gap: 20px;
	padding: 24px;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
}

/* Sin esto, [hidden] nativo no alcanza — la regla de arriba (display:flex)
   pisa el default del navegador ([hidden]{display:none} es del user-agent,
   y una regla de autor gana aunque tenga igual o menor especificidad).
   Mismo bug ya visto con la grilla/visor de portfolio, ver bloques.css. */
.datio-herramientas-netflix__overview[hidden] {
	display: none;
}

.datio-herramientas-netflix__overview-cerrar {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--datio-text-dim);
	font-size: 16px;
	cursor: pointer;
}

.datio-herramientas-netflix__overview-favicon-marco {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.92);
}

.datio-herramientas-netflix__overview-favicon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.datio-herramientas-netflix__overview-cuerpo {
	min-width: 0;
	max-width: 640px;
}

.datio-herramientas-netflix__overview-cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.datio-herramientas-netflix__overview-cabecera h4 {
	margin: 0;
	font-family: var(--datio-font-titulo);
	font-size: 1.2rem;
	font-weight: 700;
	color: #ffffff;
}

.datio-herramientas-netflix__overview-cuerpo p {
	margin: 0 0 10px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(244, 238, 251, 0.82);
}

.datio-herramientas-netflix__overview-ideal {
	color: var(--datio-text-dim) !important;
	font-size: 0.85rem !important;
}

.datio-herramientas-netflix__overview-valoracion {
	padding: 12px 14px;
	background: rgba(255, 196, 0, 0.08);
	border-radius: 10px;
	border-left: 2px solid var(--datio-brand-yellow);
}

/* Consulta de disponibilidad de dominios */

.datio-consulta-dominio {
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 22px 24px;
	margin-top: 8px;
	color: #f4eefb;
	max-width: 480px;
}

.datio-consulta-dominio__titulo {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 800;
	color: #ffffff;
}

.datio-consulta-dominio__ayuda {
	margin: 0 0 16px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: rgba(244, 238, 251, 0.75);
}

.datio-consulta-dominio__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.datio-consulta-dominio__row {
	display: flex;
	gap: 10px;
}

.datio-consulta-dominio__row input {
	flex: 1;
	min-width: 0;
	font: inherit;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 0.9);
	color: #140a1f;
}

.datio-consulta-dominio__row button {
	flex-shrink: 0;
	font: inherit;
	font-weight: 800;
	font-size: 0.85rem;
	padding: 10px 20px;
	border-radius: 10px;
	border: none;
	background: var(--datio-brand-yellow);
	color: #241900;
	cursor: pointer;
}

.datio-consulta-dominio__row button:disabled {
	opacity: 0.6;
	cursor: default;
}

.datio-consulta-dominio__resultado {
	margin-top: 14px;
	font-size: 0.9rem;
	line-height: 1.5;
}

.datio-consulta-dominio__resultado:empty {
	margin-top: 0;
}

.datio-consulta-dominio__resultado.is-cargando {
	color: rgba(244, 238, 251, 0.7);
}

.datio-consulta-dominio__resultado.is-disponible {
	color: #6fe3a1;
}

.datio-consulta-dominio__resultado.is-disponible .datio-plan__cta {
	margin-left: 4px;
	padding: 6px 16px;
	font-size: 0.78rem;
	vertical-align: middle;
}

.datio-consulta-dominio__resultado.is-ocupado {
	color: rgba(244, 238, 251, 0.85);
}

.datio-consulta-dominio__resultado.is-error {
	color: #ff9b8a;
}

.datio-bloque__cerrar {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.15);
	color: inherit;
	font-size: 20px;
	cursor: pointer;
	/* Sin esto queda tapado por contenido que llena todo el bloque (p. ej.
	   la mascota) — sin z-index, el orden de pintado sigue el del DOM, y
	   ese contenido viene después. */
	z-index: 5;
}

.datio-bloque__formulario {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
	margin-top: 24px;
}

.datio-bloque__formulario label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 700;
	font-size: 0.9rem;
}

/* El email queda claramente secundario — WhatsApp es el campo que importa. */
.datio-bloque__formulario-opcional {
	font-weight: 500;
	font-size: 0.8rem;
	opacity: 0.75;
}

.datio-bloque__formulario input,
.datio-bloque__formulario textarea {
	font: inherit;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 0.9);
	color: #140a1f;
}

.datio-bloque__formulario button {
	align-self: flex-start;
	font: inherit;
	font-weight: 800;
	padding: 10px 24px;
	border-radius: 999px;
	border: none;
	background: #140a1f;
	color: #ffffff;
	cursor: pointer;
}

/* Logo: celda transparente del grid (no un elemento fijo aparte) — así
   queda alineado con el mismo margen/ritmo que el resto de los bloques
   en vez de flotar suelto en una esquina. El video es 16:9 pero la celda
   es casi cuadrada — con object-fit:contain el contenido quedaba como una
   franja angosta centrada que nunca tocaba las esquinas de la caja, así
   que el border-radius no se veía. El __marco fuerza el aspect-ratio real
   del video (16:9, igual que el archivo) para que el radio quede pegado
   al contenido de verdad. */

.datio-bloque-logo__trigger {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 18px;
	cursor: pointer;
}

.datio-bloque-logo__marco {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
}

/* El tratamiento monocromático que llevaba acá (probado, no convenció —
   pedido explícito: que el logo se vea siempre igual, sin nada encima)
   se sacó. Es un video, se deja tal cual está. */
.datio-bloque-logo__fallback,
.datio-bloque-logo__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.datio-bloque-logo__video {
	opacity: 0;
}

.datio-bloque-logo__video.is-ready {
	opacity: 1;
}

/* WhatsApp flotante — abajo a la derecha, redondo y con el mismo
   tratamiento que las tarjetas del grid (superficie oscura + halo de
   color en vez de relleno sólido), pedido explícito. */
.datio-whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(120% 120% at 30% 20%, rgba(37, 211, 102, 0.45), transparent 65%), var(--datio-surface);
	border: 1px solid var(--datio-border);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	z-index: 9998;
}

/* Overlay de detalle: el propio bloque clickeado pasa a fixed y anima su
   rect hasta ocupar toda la pantalla — ver bloques.js. */
.datio-bloque.is-animating {
	position: fixed;
	z-index: 500;
	margin: 0;
}

/* ---------------------------------------------------------
   Composiciones específicas por tarjeta (rediseño 2026-08-22) — cada una
   es "UN elemento visual conceptual" (regla del brief), nada más. Todas
   position:absolute, ancladas arriba a la derecha (espejo del ícono, que
   vive arriba a la izquierda) para no pelear con el título/preview que
   quedan abajo por el justify-content:flex-end del botón.
   --------------------------------------------------------- */

/* Diseño Web — mini maqueta de browser, la tarjeta más grande del grid a
   propósito ("una de las más importantes"). Parallax sutil vía JS
   (data-parallax, ver bloques.js), nunca 3D/rotación. */
.datio-bloque-browser {
	position: absolute;
	top: 26px;
	right: 26px;
	bottom: 26px;
	width: min(46%, 290px);
	background: var(--datio-bg-alt);
	border: 1px solid var(--datio-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.datio-bloque-browser__barra {
	flex-shrink: 0;
	display: flex;
	gap: 5px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--datio-border);
	background: linear-gradient(to right, rgba(255, 196, 0, 0.55), transparent 75%);
}

.datio-bloque-browser__barra span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--datio-brand-yellow);
}

/* Fila de nav debajo de la barra de puntos — DATIO a la izquierda, dos
   rayitas + ícono de menú a la derecha, con línea separadora — tal cual
   la imagen de referencia. */
.datio-bloque-browser__nav {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--datio-border);
}

.datio-bloque-browser__marca {
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--datio-text-dim);
}

.datio-bloque-browser__nav-lineas,
.datio-bloque-browser__nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
}

.datio-bloque-browser__nav-lineas span {
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: rgba(255, 255, 255, 0.18);
}

.datio-bloque-browser__nav-menu span {
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: rgba(255, 255, 255, 0.18);
}

.datio-bloque-browser__cuerpo {
	position: relative;
	flex: 1;
	min-height: 0;
	padding: 18px;
	overflow: hidden;
}

/* Luz amarilla de fondo — pedido explícito: detrás de la miniatura, no de
   toda la tarjeta (esa ya tiene su propio halo de esquina, ver
   .datio-bloque--yellow). Ancla abajo a la derecha, donde vive el ícono
   de imagen + el chip "Aa". */
.datio-bloque-browser__cuerpo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 70% at 78% 0%, rgba(255, 196, 0, 0.6), transparent 68%);
	pointer-events: none;
}

.datio-bloque-browser__titular {
	position: relative;
	margin: 0 0 8px;
	font-family: var(--datio-font-titulo);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--datio-text);
}

.datio-bloque-browser__subrayado {
	position: relative;
	display: block;
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--datio-brand-yellow);
	margin-bottom: 12px;
}

.datio-bloque-browser__linea {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.14);
	margin-bottom: 7px;
}

.datio-bloque-browser__linea--media {
	width: 62%;
}

.datio-bloque-browser__linea--corta {
	width: 44%;
}

.datio-bloque-browser__cta {
	position: relative;
	display: block;
	width: 46px;
	height: 16px;
	border-radius: 5px;
	background: var(--datio-brand-yellow);
	margin-top: 12px;
}

.datio-bloque-browser__cta span {
	position: absolute;
	top: 50%;
	left: 10px;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: rgba(36, 25, 0, 0.6);
	transform: translateY(-50%);
}

/* Ícono de imagen (marco + circulito + montaña) reemplaza el bloque de
   gradiente sólido de antes — tal cual la imagen de referencia. */
.datio-bloque-browser__imagen {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 44%;
	max-width: 92px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	border: 1px solid rgba(255, 196, 0, 0.3);
	color: rgba(255, 196, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
}

.datio-bloque-browser__imagen svg {
	width: 60%;
	height: 60%;
}

.datio-bloque-browser__puntos {
	position: absolute;
	left: -34px;
	bottom: -6px;
	width: 26px;
	height: 26px;
	background-image: radial-gradient(rgba(255, 196, 0, 0.35) 1px, transparent 1.5px);
	background-size: 6px 6px;
}

/* El texto de Diseño Web se queda en la mitad izquierda a propósito —
   la maqueta de browser ocupa la derecha (ver .datio-bloque-browser), sin
   esto el título/preview (que por defecto ocupan todo el ancho del botón)
   quedarían por debajo/detrás de la maqueta. */
.datio-bloque[data-bloque-id="diseno-web"] .datio-bloque__titulo,
.datio-bloque[data-bloque-id="diseno-web"] .datio-bloque__preview {
	max-width: 48%;
}

/* Título/preview ahora arriba (justify-content:flex-start) — en
   Automatización eso los pone justo debajo del diagrama de flujo (que
   vive arriba a la derecha, ver .datio-bloque-flujo). Sin este ancho
   quedan por detrás del diagrama en vez de al lado. */
.datio-bloque[data-bloque-id="automatizacion"] .datio-bloque__titulo,
.datio-bloque[data-bloque-id="automatizacion"] .datio-bloque__preview {
	max-width: 55%;
}

.datio-bloque-browser__chip {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--datio-brand-yellow);
	color: #241900;
	font-size: 0.68rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Hosting — estado en vivo, no una foto de servidores. Ahora en el flujo
   normal, debajo del título/preview (pedido explícito, imagen de
   referencia) — ya no flotando arriba a la derecha. */
.datio-bloque-estado {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 14px;
}

.datio-bloque-estado__linea {
	display: flex;
	align-items: center;
	gap: 6px;
}

.datio-bloque-estado__pulso {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--datio-brand-teal);
}

.datio-bloque-estado__texto {
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--datio-text-dim);
}

/* Ecualizador de uptime — copiado tal cual de la imagen de referencia,
   barritas de alto creciente en vez de un simple pulso. */
.datio-bloque-estado__barras {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 20px;
}

.datio-bloque-estado__barras span {
	display: block;
	width: 4px;
	border-radius: 2px;
	background: var(--datio-brand-teal);
	opacity: 0.85;
}

.datio-bloque-estado__barras span:nth-child(1) { height: 30%; }
.datio-bloque-estado__barras span:nth-child(2) { height: 45%; }
.datio-bloque-estado__barras span:nth-child(3) { height: 60%; }
.datio-bloque-estado__barras span:nth-child(4) { height: 50%; }
.datio-bloque-estado__barras span:nth-child(5) { height: 70%; }
.datio-bloque-estado__barras span:nth-child(6) { height: 85%; }
.datio-bloque-estado__barras span:nth-child(7) { height: 65%; }
.datio-bloque-estado__barras span:nth-child(8) { height: 100%; }

/* "99.9% uptime" — dato de sistema funcionando, no una promesa de venta;
   por eso va chico y apagado, subordinado al ONLINE de arriba. */
.datio-bloque-estado__uptime {
	font-size: 0.58rem;
	font-weight: 500;
	color: var(--datio-text-dim);
	opacity: 0.65;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-bloque-estado__pulso {
		animation: datio-pulso-vivo 2.6s ease-in-out infinite;
	}
}

@keyframes datio-pulso-vivo {
	0%, 100% { box-shadow: 0 0 0 0 rgba(24, 197, 191, 0.55); }
	50% { box-shadow: 0 0 0 5px rgba(24, 197, 191, 0); }
}

/* Tráfico y SEO — línea ascendente mínima, no un dashboard financiero.
   Copiado tal cual de la imagen de referencia: título+preview arriba, el
   sparkline abajo (ya no arriba a la derecha, mismo criterio que Hosting/
   Cursos) — con la tarjeta más alta ahora, el preview ya entra sin pisar
   nada, así que vuelve a mostrarse. */
.datio-bloque[data-bloque-id="hosting"] .datio-bloque__abrir .datio-bloque__preview {
	/* "Tu sitio, siempre online." repetía el "SIEMPRE ONLINE" del estado
	   de abajo (ver .datio-bloque-estado) — pedido explícito, sacarlo. */
	display: none;
}

.datio-bloque-sparkline {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	height: 30px;
	color: var(--datio-text-dim);
}

/* Academia (id interno "cursos") navega a una página real en vez de abrir
   el panel interno — este nombre compartido con .datio-cursos-page (ver
   cursos-datio.css) es lo que hace que el navegador "morphee" la tarjeta
   hacia la página completa en la transición, en vez de un corte seco.
   Ver @view-transition en main.css. */
.datio-bloque[data-bloque-id="cursos"] .datio-bloque__abrir {
	view-transition-name: academia-panel;
}

/* Cursos — mini reproductor, copiado tal cual de la imagen de referencia:
   barra de progreso ancha + punto + tiempo, anclado abajo de la tarjeta
   (ya no arriba a la derecha) — con título/preview ahora arriba (ver
   justify-content:flex-start), abajo quedó libre para esto. */
.datio-bloque-player {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.datio-bloque-player__progreso {
	position: relative;
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.14);
}

.datio-bloque-player__relleno {
	position: absolute;
	inset: 0;
	width: 28%;
	border-radius: 2px;
	background: var(--datio-brand-red);
}

.datio-bloque-player__punto {
	position: absolute;
	left: 28%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--datio-brand-red);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 2px var(--datio-surface);
}

.datio-bloque-player__tiempo {
	flex-shrink: 0;
	font-size: 0.6rem;
	color: var(--datio-text-dim);
	white-space: nowrap;
}


/* Herramientas gratis — etiquetas como metadata, no como botones. */
.datio-bloque-etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 12px;
}

.datio-bloque-etiquetas span {
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 196, 0, 0.12);
	color: var(--datio-brand-yellow);
}


/* Flujo de Automatización — tarea→tarea (con salida)→listo, vertical,
   copiado tal cual de la imagen de referencia (reemplaza el mini path
   horizontal de antes). Glow con drop-shadow, no relleno — el diagrama
   tiene que leerse como líneas de luz sobre el fondo oscuro. */
.datio-bloque-flujo {
	position: absolute;
	top: 24px;
	right: 18px;
	width: 78px;
	height: 130px;
	color: var(--datio-brand-teal);
	filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.55));
}

/* Sparkline decorativo abajo a la derecha — mismo lenguaje visual que el
   de Tráfico y SEO, pero mudo/tenue acá (Automatización no promete una
   métrica puntual, es solo textura). */
.datio-bloque-automatizacion__spark {
	position: absolute;
	right: -6px;
	bottom: 0;
	width: 55%;
	max-width: 130px;
	height: auto;
	color: rgba(255, 255, 255, 0.16);
}

/* Datio Pet en la vista COMPLETA de Contacto (no en el tile colapsado —
   quedaba redundante con el de Asistente, ver bloques.php). Asomándose
   desde abajo a la derecha del panel entero, con presencia real ahora
   que hay pantalla completa; en desktop nomás — abajo de 900px el panel
   no tiene el aire lateral para que no choque con el texto (ver media
   query). */
.datio-bloque__completo {
	position: relative;
}

.datio-bloque-completo__pet {
	position: absolute;
	right: 48px;
	bottom: 0;
	width: min(26%, 240px);
	height: auto;
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 900px) {
	.datio-bloque-completo__pet {
		display: none;
	}
}

@media (max-width: 860px) {
	.datio-bloques {
		height: auto;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-rows: auto;
	}

	.datio-bloque--chico {
		grid-column: span 1;
		min-height: 140px;
	}

	.datio-bloque--ancho,
	.datio-bloque--alto,
	.datio-bloque--grande {
		grid-column: span 1;
		min-height: 220px;
	}
}

/* ---------------------------------------------------------
   Diseño Web — vista completa a medida, copiada de la imagen de
   referencia (dos columnas: copy+selector de planes a la izquierda,
   maqueta desktop/celular a la derecha). Todo bajo .datio-diseno-web,
   no reutiliza .datio-plan-promo/.datio-planes (esos siguen siendo el
   layout genérico del resto de las tarjetas con planes).
   --------------------------------------------------------- */

.datio-bloque__completo--diseno-web .datio-bloque__cuerpo {
	max-width: 1400px;
}

.datio-diseno-web__paginacion {
	position: absolute;
	top: 28px;
	right: 76px;
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 2;
}

.datio-diseno-web__pag-texto {
	font-size: 0.8rem;
	color: var(--datio-text-dim);
	font-variant-numeric: tabular-nums;
}

.datio-diseno-web__pag-barra {
	width: 140px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.datio-diseno-web__pag-barra span {
	display: block;
	height: 100%;
	background: var(--datio-brand-yellow);
	transition: width 0.25s ease;
}

.datio-diseno-web__pag-flecha {
	all: unset;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--datio-border);
	color: var(--datio-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.datio-diseno-web__pag-flecha svg {
	width: 16px;
	height: 16px;
}

.datio-diseno-web__pag-flecha:hover {
	background: rgba(255, 255, 255, 0.12);
}

.datio-diseno-web__grid {
	display: grid;
	grid-template-columns: minmax(0, 460px) 1fr;
	gap: 56px;
	align-items: start;
	padding-top: 24px;
}

/* Columna izquierda ------------------------------------------------- */

.datio-diseno-web__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 196, 0, 0.14);
	color: var(--datio-brand-yellow);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.datio-diseno-web__badge svg {
	width: 14px;
	height: 14px;
}

.datio-diseno-web__titulo {
	font-family: var(--datio-font-titulo);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 18px;
	color: var(--datio-text);
}

.datio-diseno-web__titulo-acento {
	color: var(--datio-brand-yellow);
}

.datio-diseno-web__parrafo {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--datio-text-dim);
	margin: 0 0 28px;
	max-width: 46ch;
}

/* Verticales, uno al lado del otro, sin marco — pedido explícito (mismo
   lenguaje visual que .datio-diseno-web__destacado de más abajo, pero acá
   con un emoji en vez de un ícono en chip de color). */
.datio-diseno-web__planes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 26px;
}

.datio-diseno-web__plan {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	cursor: pointer;
}

/* Recuadro amarillo/transparente — mismo lenguaje visual que los chips
   de ícono del resto del sitio (ver .datio-bloque__icono), pedido
   explícito en vez del emoji suelto de antes. */
.datio-diseno-web__plan .datio-diseno-web__plan-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(255, 196, 0, 0.14);
	color: var(--datio-brand-yellow);
	margin-bottom: 4px;
}

.datio-diseno-web__plan-icono svg {
	width: 16px;
	height: 16px;
}

.datio-diseno-web__plan strong {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--datio-text);
}

.datio-diseno-web__plan span {
	font-size: 0.68rem;
	line-height: 1.35;
	color: var(--datio-text-dim);
}

.datio-diseno-web__plan.is-active strong {
	color: var(--datio-brand-yellow);
}

@media (prefers-reduced-motion: no-preference) {
	.datio-diseno-web__plan strong {
		transition: color 0.15s ease;
	}
}

@media (max-width: 560px) {
	.datio-diseno-web__planes {
		grid-template-columns: repeat(2, 1fr);
	}
}

.datio-diseno-web__callout {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--datio-border);
	margin-bottom: 22px;
}

.datio-diseno-web__callout-icono {
	flex-shrink: 0;
	font-size: 1.1rem;
}

.datio-diseno-web__callout-texto {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.datio-diseno-web__callout-texto strong {
	font-size: 0.88rem;
	color: var(--datio-text);
}

.datio-diseno-web__callout-texto span {
	font-size: 0.76rem;
	color: var(--datio-text-dim);
}

.datio-diseno-web__callout-cta {
	all: unset;
	box-sizing: border-box;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--datio-brand-yellow);
	color: #241900;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
}

.datio-diseno-web__callout-cta svg {
	width: 14px;
	height: 14px;
}

.datio-diseno-web__notas {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.datio-diseno-web__nota {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--datio-text-dim);
}

.datio-diseno-web__nota svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--datio-brand-teal);
}

.datio-diseno-web__nota strong {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--datio-text);
}

.datio-diseno-web__nota span {
	font-size: 0.82rem;
}

/* Columna derecha ----------------------------------------------------- */

.datio-diseno-web__mockups {
	position: relative;
	padding-bottom: 54px;
}

/* Luz amarilla detrás de las maquetas desktop/celular — pedido
   explícito, imagen de referencia. Va en el propio ::before del
   contenedor (z-index detrás de ambas maquetas) para no competir con
   el glow más chico que ya tiene .datio-diseno-web__desktop-cuerpo. */
.datio-diseno-web__mockups::before {
	content: '';
	position: absolute;
	inset: -40px -40px 0;
	z-index: 0;
	background: radial-gradient(55% 55% at 68% 55%, rgba(255, 196, 0, 0.28), transparent 70%);
	pointer-events: none;
}

.datio-diseno-web__desktop {
	position: relative;
	z-index: 1;
}

.datio-diseno-web__mobile {
	z-index: 1;
}

.datio-diseno-web__desktop {
	border-radius: 18px;
	background: var(--datio-bg-alt);
	border: 1px solid var(--datio-border);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.datio-diseno-web__desktop-barra {
	flex-shrink: 0;
	display: flex;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--datio-border);
}

.datio-diseno-web__desktop-barra span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
}

.datio-diseno-web__desktop-nav {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	border-bottom: 1px solid var(--datio-border);
}

.datio-diseno-web__desktop-marca {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--datio-text);
	white-space: nowrap;
}

.datio-diseno-web__desktop-marca svg {
	width: 16px;
	height: 16px;
	color: var(--datio-brand-yellow);
}

.datio-diseno-web__desktop-links {
	display: flex;
	gap: 18px;
	font-size: 0.78rem;
	color: var(--datio-text-dim);
}

.datio-diseno-web__desktop-cta {
	flex-shrink: 0;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--datio-brand-yellow);
	color: #241900;
	font-size: 0.76rem;
	font-weight: 700;
}

.datio-diseno-web__desktop-cuerpo {
	position: relative;
	flex: 1;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 34px;
	background: radial-gradient(90% 120% at 100% 100%, rgba(255, 196, 0, 0.14), transparent 60%);
}

/* Caso real (Doña Gladys, plan Landing Page) — reemplaza la maqueta
   abstracta de arriba, no convive con ella (ver dwSeleccionar en
   bloques.js). [hidden] solo no alcanza porque .datio-diseno-web__desktop-cuerpo
   es flex y eso pisa el display:none nativo del atributo. */
.datio-diseno-web__desktop-real {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.datio-diseno-web__desktop-real[hidden] {
	display: none;
}

.datio-diseno-web__desktop-texto {
	max-width: 260px;
}

.datio-diseno-web__desktop-titular {
	margin: 0 0 12px;
	font-family: var(--datio-font-titulo);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--datio-text);
}

.datio-diseno-web__desktop-titular em {
	font-style: normal;
	color: var(--datio-brand-yellow);
}

.datio-diseno-web__desktop-sub {
	margin: 0 0 16px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--datio-text-dim);
}

.datio-diseno-web__desktop-btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--datio-brand-yellow);
	color: #241900;
	font-size: 0.76rem;
	font-weight: 700;
}

.datio-diseno-web__desktop-figura {
	position: relative;
	flex-shrink: 0;
	width: 38%;
	max-width: 220px;
	aspect-ratio: 4 / 5;
}

.datio-diseno-web__desktop-figura span {
	position: absolute;
	bottom: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.datio-diseno-web__desktop-figura span:nth-child(1) { left: 0; width: 42%; height: 55%; }
.datio-diseno-web__desktop-figura span:nth-child(2) { left: 46%; width: 24%; height: 78%; }
.datio-diseno-web__desktop-figura span:nth-child(3) { left: 74%; width: 26%; height: 40%; }

.datio-diseno-web__desktop-figura i {
	position: absolute;
	left: 40%;
	bottom: 45%;
	width: 30%;
	height: 30%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--datio-brand-yellow), rgba(255, 196, 0, 0.15) 70%);
	filter: blur(1px);
}

.datio-diseno-web__mobile {
	position: absolute;
	right: 6%;
	bottom: -40px;
	width: 30%;
	max-width: 190px;
	aspect-ratio: 9 / 18.5;
	border-radius: 22px;
	background: var(--datio-bg-alt);
	border: 2px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Caso real (Doña Gladys): la captura no tiene la proporción de un
   celular genérico. Forzar 9:18.5 ahí recorta casi un tercio de cada
   lado (logo y plato se pierden). Con proporción propia de la imagen
   se ve completa, como navegando de verdad. */
.datio-diseno-web__mobile--real {
	aspect-ratio: 513 / 691;
}

.datio-diseno-web__mobile-barra {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 12px 8px;
}

.datio-diseno-web__mobile-barra .datio-diseno-web__desktop-marca {
	font-size: 0.62rem;
}

.datio-diseno-web__mobile-barra svg {
	width: 14px;
	height: 14px;
	color: var(--datio-text-dim);
}

.datio-diseno-web__mobile-cuerpo {
	flex: 1;
	position: relative;
	padding: 6px 12px 12px;
	background: radial-gradient(120% 90% at 100% 100%, rgba(255, 196, 0, 0.14), transparent 60%);
}

.datio-diseno-web__mobile-real {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.datio-diseno-web__mobile-real[hidden] {
	display: none;
}

/* Mismo bug de siempre: [hidden] nativo no gana contra un display:flex/
   block puesto por una regla de autor (ver la nota grande de más arriba
   en este archivo) — se repite acá para el contenido abstracto de las
   maquetas cuando se muestra una captura real en su lugar. */
[data-dw-desktop-abstracto][hidden],
[data-dw-mobile-abstracto][hidden] {
	display: none;
}

.datio-diseno-web__mobile-titular {
	margin: 0 0 8px;
	font-family: var(--datio-font-titulo);
	font-size: 0.82rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--datio-text);
}

.datio-diseno-web__mobile-titular em {
	font-style: normal;
	color: var(--datio-brand-yellow);
}

.datio-diseno-web__mobile-sub {
	margin: 0 0 10px;
	font-size: 0.6rem;
	line-height: 1.4;
	color: var(--datio-text-dim);
}

.datio-diseno-web__mobile-cuerpo .datio-diseno-web__desktop-btn {
	padding: 6px 12px;
	font-size: 0.62rem;
}

.datio-diseno-web__mobile-cuerpo i {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--datio-brand-yellow), rgba(255, 196, 0, 0.12) 70%);
	filter: blur(1px);
}

/* Precio + descripción completa del plan elegido (pedido explícito) —
   la mini descripción vive en el selector; esto es el detalle. */
.datio-diseno-web__plan-info {
	position: relative;
	z-index: 1;
	margin-top: 18px;
	padding: 18px 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--datio-border);
}

.datio-diseno-web__plan-info-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.datio-diseno-web__plan-info-cabecera strong {
	font-size: 1rem;
	color: var(--datio-text);
}

.datio-diseno-web__plan-info-precio {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-shrink: 0;
}

.datio-diseno-web__plan-info-precio strong {
	font-size: 1.1rem;
	color: var(--datio-brand-yellow);
}

.datio-diseno-web__plan-info-precio span {
	font-size: 0.72rem;
	color: var(--datio-text-dim);
}

.datio-diseno-web__plan-info-items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.datio-diseno-web__plan-info-items li {
	position: relative;
	padding-left: 14px;
	font-size: 0.78rem;
	color: var(--datio-text-dim);
}

.datio-diseno-web__plan-info-items li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--datio-brand-teal);
}

.datio-diseno-web__callout-mini {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 14px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--datio-border);
	font-size: 0.85rem;
	color: var(--datio-text);
}

.datio-diseno-web__destacados {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 18px;
}

.datio-diseno-web__destacado {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--datio-border);
}

.datio-diseno-web__destacado strong {
	font-size: 0.82rem;
	color: var(--datio-text);
}

.datio-diseno-web__destacado span {
	font-size: 0.74rem;
	color: var(--datio-text-dim);
}

@media (max-width: 980px) {
	.datio-diseno-web__grid {
		grid-template-columns: 1fr;
	}
	.datio-diseno-web__mockups {
		padding-bottom: 70px;
	}
	.datio-diseno-web__destacados {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.datio-diseno-web__paginacion {
		display: none;
	}
	.datio-diseno-web__destacados {
		grid-template-columns: 1fr;
	}
}