/* =============================================================================
   Las Cositas de Sita · estilos
   El lenguaje visual sale de la guía «Los 10 elementos…»: papel, rotulador
   amarillo, círculos naranjas a mano, notas grises giradas, bocadillos azules,
   bandas de papel rasgado y tarjetas un pelín torcidas.
   ========================================================================== */

:root {
	--tinta: #0a1128;
	--azul: #0066ff;
	--azul-osc: #0052d6;
	--naranja: #ff6b35;
	--naranja-osc: #cc3300;
	--amarillo: #ffd43f;
	--morado: #7c4dff;
	--verde: #33d62b;

	--crema: #fff1cc;
	--melocoton: #ffd5c7;
	--cielo: #bfd5ff;

	--papel: #f6f7f9;
	--gris: #efefef;
	--gris-2: #e4e4e6;
	--linea: #e1e4ea;
	--suave: #6b7280;
	--nota: #7d828c;

	--radio: 14px;
	--radio-g: 24px;
	--ancho: 1180px;
	--cab: 92px;
	--sombra: 0 1px 2px rgba(10, 17, 40, .05), 0 10px 28px rgba(10, 17, 40, .07);
	--sombra-alta: 0 2px 4px rgba(10, 17, 40, .06), 0 22px 48px rgba(10, 17, 40, .14);

	--rasgado-arriba: polygon(0.0% 5.9px, 1.7% 15px, 3.1% 15px, 5.0% 9.2px, 6.9% 15px, 8.5% 11.1px, 12.5% 12.2px, 16.6% 5.9px, 18.7% 7.5px, 21.6% 15px, 24.7% 13.2px, 26.1% 7.0px, 29.3% 6.0px, 32.3% 5.4px, 35.9% 8.2px, 38.8% 8.5px, 42.2% 5.5px, 43.7% 4.4px, 45.4% 15px, 46.8% 15px, 50.5% 12.8px, 53.2% 0px, 57.2% 0px, 58.6% 2.8px, 62.8% 7.3px, 65.1% 7.5px, 67.4% 9.1px, 69.3% 6.1px, 71.6% 11.9px, 73.3% 10.5px, 75.0% 9.6px, 78.3% 15px, 80.6% 0px, 82.5% 0px, 85.5% 7.5px, 88.3% 9.0px, 89.9% 14.1px, 93.0% 15px, 96.8% 15px, 99.7% 13.6px, 100% 11.9px, 100% 100%, 0 100%);
	--rasgado-abajo: polygon(0 0, 100% 0, 100% calc(100% - 8.4px), 98.1% calc(100% - 0px), 94.2% calc(100% - 0px), 92.8% calc(100% - 0.3px), 91.2% calc(100% - 5.2px), 88.8% calc(100% - 0px), 85.6% calc(100% - 0px), 84.3% calc(100% - 0px), 81.8% calc(100% - 0px), 79.8% calc(100% - 14.9px), 76.0% calc(100% - 15px), 71.8% calc(100% - 15px), 67.9% calc(100% - 10.1px), 65.6% calc(100% - 7.5px), 63.9% calc(100% - 10.7px), 60.4% calc(100% - 4.7px), 57.3% calc(100% - 0px), 53.2% calc(100% - 1.0px), 50.4% calc(100% - 0px), 49.2% calc(100% - 3.0px), 47.5% calc(100% - 0px), 43.3% calc(100% - 14.3px), 41.0% calc(100% - 15px), 37.1% calc(100% - 15px), 34.4% calc(100% - 15px), 30.5% calc(100% - 2.2px), 26.9% calc(100% - 0px), 25.5% calc(100% - 0px), 22.9% calc(100% - 0.7px), 20.3% calc(100% - 0px), 18.6% calc(100% - 15px), 17.1% calc(100% - 9.3px), 15.8% calc(100% - 11.7px), 12.4% calc(100% - 6.4px), 10.5% calc(100% - 12.8px), 9.1% calc(100% - 8.7px), 7.9% calc(100% - 10.5px), 5.1% calc(100% - 10.5px), 3.3% calc(100% - 6.4px), 0.0% calc(100% - 4.5px));
	--rasgado-doble: polygon(0.0% 5.9px, 1.7% 15px, 3.1% 15px, 5.0% 9.2px, 6.9% 15px, 8.5% 11.1px, 12.5% 12.2px, 16.6% 5.9px, 18.7% 7.5px, 21.6% 15px, 24.7% 13.2px, 26.1% 7.0px, 29.3% 6.0px, 32.3% 5.4px, 35.9% 8.2px, 38.8% 8.5px, 42.2% 5.5px, 43.7% 4.4px, 45.4% 15px, 46.8% 15px, 50.5% 12.8px, 53.2% 0px, 57.2% 0px, 58.6% 2.8px, 62.8% 7.3px, 65.1% 7.5px, 67.4% 9.1px, 69.3% 6.1px, 71.6% 11.9px, 73.3% 10.5px, 75.0% 9.6px, 78.3% 15px, 80.6% 0px, 82.5% 0px, 85.5% 7.5px, 88.3% 9.0px, 89.9% 14.1px, 93.0% 15px, 96.8% 15px, 99.7% 13.6px, 100% 11.9px, 100% calc(100% - 8.4px), 98.1% calc(100% - 0px), 94.2% calc(100% - 0px), 92.8% calc(100% - 0.3px), 91.2% calc(100% - 5.2px), 88.8% calc(100% - 0px), 85.6% calc(100% - 0px), 84.3% calc(100% - 0px), 81.8% calc(100% - 0px), 79.8% calc(100% - 14.9px), 76.0% calc(100% - 15px), 71.8% calc(100% - 15px), 67.9% calc(100% - 10.1px), 65.6% calc(100% - 7.5px), 63.9% calc(100% - 10.7px), 60.4% calc(100% - 4.7px), 57.3% calc(100% - 0px), 53.2% calc(100% - 1.0px), 50.4% calc(100% - 0px), 49.2% calc(100% - 3.0px), 47.5% calc(100% - 0px), 43.3% calc(100% - 14.3px), 41.0% calc(100% - 15px), 37.1% calc(100% - 15px), 34.4% calc(100% - 15px), 30.5% calc(100% - 2.2px), 26.9% calc(100% - 0px), 25.5% calc(100% - 0px), 22.9% calc(100% - 0.7px), 20.3% calc(100% - 0px), 18.6% calc(100% - 15px), 17.1% calc(100% - 9.3px), 15.8% calc(100% - 11.7px), 12.4% calc(100% - 6.4px), 10.5% calc(100% - 12.8px), 9.1% calc(100% - 8.7px), 7.9% calc(100% - 10.5px), 5.1% calc(100% - 10.5px), 3.3% calc(100% - 6.4px), 0.0% calc(100% - 4.5px));
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cab) + 16px);
}

body {
	margin: 0;
	font-family: 'Funnel Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--tinta);
	background-color: var(--papel);
	/* Grano de papel, como el fondo de la guía. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .07 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amarillo); color: var(--tinta); }

.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 40px, 800px); }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; }
.saltar:focus { left: 8px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.icono { width: 1.15em; height: 1.15em; flex: none; }

/* =============================================================================
   Piezas de la guía
   ========================================================================== */

/* Rotulador amarillo */
.marca {
	background: linear-gradient(transparent 56%, var(--amarillo) 56%, var(--amarillo) 93%, transparent 93%);
	padding: 0 .1em;
	margin: 0 -.1em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Círculo naranja dibujado a mano */
.circulo { position: relative; display: inline-block; margin: 0 .14em; white-space: nowrap; z-index: 0; }
.circulo::after {
	content: '';
	position: absolute;
	inset: -6% -7% -14% -7%;
	z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M118 9C60 6 8 22 6 50c-2 30 60 44 142 44 86 0 148-16 146-46C292 20 214 4 132 7 98 8 72 13 56 20' fill='none' stroke='%23ff6b35' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

.azul { color: var(--azul); font-weight: 700; }

/* Estrellita */
.estrella { display: inline-block; width: 56px; height: 56px; }
.estrella .icono { width: 100%; height: 100%; display: block; }
.estrella--azul { color: var(--azul); }
.estrella--amarillo { color: var(--amarillo); }
.estrella--naranja { color: var(--naranja); }

/* Nota gris girada con su flecha */
.nota {
	margin: 0;
	color: var(--nota);
	font-size: clamp(1.25rem, 2.1vw, 1.65rem);
	line-height: 1.15;
	text-align: center;
	max-width: 15ch;
}
.nota span { display: block; transform: rotate(5deg); }
.flecha-curva { display: block; width: 46px; margin: 14px auto 0; color: var(--azul); transform: rotate(-4deg); }

.onda { display: block; width: 180px; color: var(--naranja); margin-top: 28px; }

/* Bocadillo azul */
.bocadillo {
	position: relative;
	display: inline-block;
	margin: 0 0 22px;
	padding: 16px 24px;
	max-width: 22rem;
	background: var(--azul);
	color: #fff;
	border-radius: 28px;
	font-size: 1.05rem;
	line-height: 1.3;
	letter-spacing: .01em;
}
.bocadillo::after {
	content: '';
	position: absolute;
	left: 30px;
	bottom: -19px;
	width: 34px;
	height: 22px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 6% 100%);
}

/* Tarjeta-apunte: blanca, con borde fino y un pelín torcida */
.apunte {
	margin: 0;
	background: #fff;
	border: 1.5px solid var(--linea);
	border-radius: var(--radio);
	padding: 22px 24px;
	box-shadow: var(--sombra);
	transform: rotate(-1.2deg);
}
.apunte--recto { transform: none; }
.apunte__titulo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; margin-bottom: 14px; }
.apunte__titulo span { color: var(--naranja); }

/* Pegatina tipo «Ejemplo» */
.pegatina {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 15px;
	background: var(--azul);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	border-radius: 9px;
	transform: rotate(-4deg);
	box-shadow: 0 6px 16px rgba(10, 17, 40, .16);
}
.pegatina .icono { width: .8em; height: .8em; }
.pegatina--amarilla { background: var(--amarillo); color: var(--tinta); }
.pegatina--naranja { background: var(--naranja); }

/* Etiqueta pequeña sobre los titulares */
.etiqueta {
	margin: 0 0 14px;
	color: var(--azul);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.etiqueta a { text-decoration: none; }
.etiqueta a:hover { text-decoration: underline; }
.etiqueta--chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	background: #fff;
	border: 1.5px solid var(--linea);
	border-radius: 999px;
	color: var(--tinta);
	letter-spacing: .04em;
	box-shadow: var(--sombra);
}
.etiqueta--chip .icono { color: var(--azul); width: .95em; height: .95em; }
.etiqueta--clara { color: var(--amarillo); }

/* Titulares */
.titular {
	font-weight: 800;
	font-size: clamp(2rem, 4.2vw, 3.2rem);
	line-height: 1.06;
	letter-spacing: -.025em;
	text-wrap: balance;
}
.titular--hero { font-size: clamp(2.5rem, 5.2vw, 4.15rem); line-height: 1.04; text-wrap: wrap; }
.titular--pagina { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; }
.titular--medio { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.titular--centro { text-align: center; margin-bottom: 44px; }
.titular--claro { color: #fff; }
.titular--claro .marca { background: linear-gradient(transparent 84%, var(--amarillo) 84%, var(--amarillo) 96%, transparent 96%); }

/* Botones */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border: 2px solid transparent;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn .icono { transition: transform .18s ease; }
.btn:hover .icono { transform: translateX(3px); }
.btn--azul { background: var(--azul); color: #fff; box-shadow: 0 8px 20px rgba(0, 102, 255, .28); }
.btn--azul:hover { background: var(--azul-osc); }
.btn--tinta { background: var(--tinta); color: #fff; }
.btn--tinta:hover { background: #1a2550; }
.btn--linea { background: #fff; border-color: var(--tinta); color: var(--tinta); }
.btn--linea:hover { background: var(--tinta); color: #fff; }
.btn--claro { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--claro:hover { background: #fff; color: var(--tinta); }
.btn--grande { padding: 16px 28px; font-size: 1.06rem; }
.btn--ancho { width: 100%; }
.botones { display: flex; flex-wrap: wrap; gap: 14px; }
.botones--centro { justify-content: center; }

/* Lista con vistos */
.vistos { display: grid; gap: 10px; }
.vistos li { display: flex; gap: 10px; align-items: flex-start; }
.vistos .icono { margin-top: .22em; color: var(--naranja); }
.vistos--grande { gap: 16px; font-size: 1.12rem; margin-top: 28px; }

/* =============================================================================
   Cabecera
   ========================================================================== */

.cabecera { position: sticky; top: 0; z-index: 100; padding-top: 14px; height: var(--cab); pointer-events: none; }
.cabecera__barra {
	view-transition-name: cabecera;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 10px 10px 22px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1.5px solid var(--linea);
	border-radius: 18px;
	box-shadow: var(--sombra);
}
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; text-decoration: none; color: var(--tinta); }
.logo .icono { color: var(--azul); width: .85em; height: .85em; transition: transform .4s ease; }
.logo:hover .icono { transform: rotate(90deg); }

.menu { display: flex; align-items: center; gap: 22px; }
.menu__lista { display: flex; align-items: center; gap: 4px; }
.menu__lista a { position: relative; isolation: isolate; display: block; padding: 9px 12px; font-weight: 500; font-size: .98rem; text-decoration: none; }
/* El trazo de rotulador: se dibuja al pasar el ratón y se queda en la página actual.
   Al cambiar de página se desliza de un enlace a otro (ver «Cambio de página»). */
.menu__marca { position: absolute; left: 9px; right: 9px; bottom: 11px; z-index: -1; height: .58em; background: var(--amarillo); border-radius: 2px; opacity: .5; transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
/* Al pasar el ratón, el trazo se dibuja en claro: es un «aquí irías». El de la página actual va entero. */
.menu__lista a:hover .menu__marca,
.menu__lista a:focus-visible .menu__marca { transform: scaleX(1); }
.menu__lista .current-menu-item > a .menu__marca,
.menu__lista .current_page_parent > a .menu__marca,
.menu__lista .es-actual > a .menu__marca { opacity: 1; transform: scaleX(1); view-transition-name: menu-marca; }
.btn--menu { padding: 11px 18px; font-size: .96rem; white-space: nowrap; }

/* El botón del menú en móvil: tres rayas naranjas, como en la guía */
.menu-boton { display: none; width: 46px; height: 46px; padding: 0; background: none; border: 0; border-radius: 12px; }
.menu-boton span { display: block; width: 26px; height: 4px; margin: 5px auto; background: var(--naranja); border-radius: 4px; transition: transform .2s ease, opacity .2s ease; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* =============================================================================
   Secciones
   ========================================================================== */

.seccion { position: relative; padding: clamp(64px, 9vw, 116px) 0; }
.seccion--banda { background: var(--banda, var(--crema)); clip-path: var(--rasgado-doble); padding: clamp(80px, 10vw, 130px) 0; }
.seccion--crema { --banda: var(--crema); }
.seccion--melocoton { --banda: var(--melocoton); }
.seccion--cielo { --banda: var(--cielo); }
.seccion--faq { padding-bottom: clamp(56px, 7vw, 88px); }
.seccion__mas { margin-top: 44px; text-align: center; }

.sec-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-cab__titulo { max-width: 760px; }
.sec-cab__texto { margin-top: 18px; max-width: 60ch; font-size: 1.12rem; color: #2b3350; }
.sec-cab .nota { padding-bottom: 6px; }
.sec-cab--centro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-cab--centro .sec-cab__texto { margin-inline: auto; }
.sec-cab--centro .nota { display: none; }
.sec-cab--apilada { grid-template-columns: 1fr; margin-bottom: 28px; }
.sec-cab--apilada .nota { max-width: none; text-align: left; padding-left: 12px; }
.sec-cab--apilada .nota span { display: inline-block; transform: rotate(-3deg); }
.sec-cab--apilada .flecha-curva { display: none; }

/* =============================================================================
   Portada
   ========================================================================== */

.hero,
.guia-hero {
	position: relative;
	margin-top: calc(var(--cab) * -1);
	padding-top: calc(var(--cab) + clamp(36px, 6vw, 72px));
	background:
		radial-gradient(circle at 12% 62%, rgba(0, 102, 255, .22), transparent 42%),
		radial-gradient(circle at 96% 4%, rgba(255, 107, 53, .14), transparent 36%),
		radial-gradient(rgba(0, 102, 255, .2) 1.4px, transparent 1.6px) 0 0 / 26px 26px,
		#f1f6ff;
}
.hero__dentro { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 40px; align-items: center; padding-bottom: clamp(56px, 8vw, 96px); }
.hero__texto { position: relative; }
.hero__entradilla { margin: 18px 0 32px; max-width: 54ch; font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: #2b3350; }
.nota--hero { max-width: none; margin: 10px 0 0; padding-right: 6%; text-align: right; }
.nota--hero span { display: inline-block; transform: rotate(-3deg); }

.hero__datos { margin: 34px 0 0; gap: 12px 36px; }
.hero__datos strong { font-size: 1.5rem; }
.hero__datos li:nth-child(2) strong { color: var(--naranja); }

/* Portada: saludo y tres webs reales apiladas */
.hero__muestra { position: relative; justify-self: center; width: min(100%, 500px); }
.hero__saludo { position: relative; z-index: 5; display: grid; justify-items: start; margin: 0 0 -58px -7%; }
.hero__saludo .bocadillo { max-width: 16.5rem; margin: 0 0 20px 34px; transform: rotate(-2deg); box-shadow: 0 12px 26px rgba(0, 102, 255, .28); }
.hero__avatar { width: 120px; height: 120px; margin-left: 0; border: 5px solid #fff; border-radius: 50%; box-shadow: var(--sombra-alta); }
.hero__webs { position: relative; aspect-ratio: 10 / 8.6; }
.hero__web { position: absolute; display: block; box-shadow: var(--sombra-alta); }
.hero__web .proyecto__barra { height: 24px; }
.hero__web--1 { right: 0; top: 0; width: 88%; z-index: 1; transform: rotate(2.2deg); }
.hero__web--2 { left: -7%; bottom: 2%; width: 56%; z-index: 2; transform: rotate(-5deg); }
.hero__web--3 { right: -6%; bottom: -5%; width: 45%; z-index: 3; transform: rotate(4.5deg); }
.hero__web:hover { z-index: 4; transform: rotate(0) scale(1.03); }
.hero__sector { position: absolute; left: 9px; bottom: 9px; padding: 3px 10px; background: #fff; border: 1.5px solid var(--linea); border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta); box-shadow: 0 4px 10px rgba(10, 17, 40, .16); }
.hero__web--1 .hero__sector { left: auto; right: 12px; bottom: auto; top: 36px; font-size: .76rem; }
.hero__pegatina { position: absolute; right: 5%; top: -16px; z-index: 4; transform: rotate(5deg); }
.hero__estrella { position: absolute; left: -9%; top: 34%; z-index: 0; width: 60px; height: 60px; animation: girar 14s linear infinite; }

/* Cinta de palabras */
.cinta { position: relative; z-index: 2; margin: 0 -2%; padding: 15px 0; background: var(--tinta); color: #fff; overflow: hidden; transform: rotate(-1.1deg) translateY(14px); box-shadow: 0 14px 30px rgba(10, 17, 40, .2); }
.cinta__pista { display: flex; width: max-content; animation: cinta 160s linear infinite; will-change: transform; }
.cinta__grupo { display: flex; flex: none; align-items: center; gap: 26px; padding-right: 26px; }
.cinta__pista span { font-weight: 700; font-size: 1.08rem; white-space: nowrap; }
.cinta__pista .icono { color: var(--amarillo); width: 16px; height: 16px; }

@keyframes cinta { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 50% { translate: 0 -8px; } }

/* El problema */
.problema { padding-top: clamp(96px, 11vw, 150px); }
.problema__dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.problema__der { display: grid; gap: 30px; padding-top: 12px; }
.duda { display: grid; justify-items: start; }
.duda .bocadillo { margin-bottom: 20px; font-weight: 700; font-size: 1.12rem; }
.duda__resp { margin-left: clamp(20px, 6vw, 64px); max-width: 30rem; }
.duda:nth-child(even) { justify-items: end; }
.duda:nth-child(even) .bocadillo { background: var(--naranja); }
.duda:nth-child(even) .bocadillo::after { left: auto; right: 30px; clip-path: polygon(0 0, 100% 0, 94% 100%); }
.duda:nth-child(even) .duda__resp { margin-left: 0; margin-right: clamp(20px, 6vw, 64px); transform: rotate(1.2deg); }

/* El cuadradito gris */
.cuadradito { position: relative; margin-top: 96px; max-width: 440px; }
.cuadradito__bocadillo { position: absolute; right: -12%; top: -72px; z-index: 2; max-width: 16.5rem; margin: 0; transform: rotate(2deg); }
.cuadradito__web { position: relative; display: grid; gap: 10px; padding: 26px 22px 22px; background: var(--gris); border-radius: var(--radio-g); }
.cuadradito__pieza { padding: 9px; background: var(--gris-2); border-radius: 9px; text-align: center; font-size: .92rem; color: #2b3350; }
.cuadradito__pieza--hero { padding: 30px 18px; background: var(--naranja); color: #fff; font-size: 1.02rem; line-height: 1.25; border-radius: 13px; }
.cuadradito__pieza--hero strong { display: block; font-size: 1.15rem; letter-spacing: .02em; }
.cuadradito__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cuadradito__pieza--am { padding: 26px 6px; background: var(--amarillo); color: var(--tinta); font-size: .86rem; }
.cuadradito__pieza--pie { padding: 16px; background: var(--tinta); color: #fff; font-weight: 700; }
.cuadradito__flotante { position: absolute; right: 12px; bottom: 76px; width: 30px; height: 30px; border-radius: 50%; background: var(--verde); box-shadow: 0 6px 12px rgba(10, 17, 40, .25); }
.cuadradito__pegatina { position: absolute; right: -14px; bottom: -14px; }

/* Servicios (tarjetas) */
.servicios-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.servicio { --c: var(--azul); position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px; background: #fff; border: 1.5px solid var(--linea); border-top: 7px solid var(--c); border-radius: 20px; text-decoration: none; box-shadow: var(--sombra); transition: transform .22s ease, box-shadow .22s ease; }
.servicio:hover { transform: translateY(-6px) rotate(-.7deg); box-shadow: var(--sombra-alta); }
.servicio--naranja { --c: var(--naranja); }
.servicio--morado { --c: var(--morado); }
.servicio__num { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 20px; border-radius: 50%; background: var(--c, var(--azul)); color: #fff; font-weight: 800; font-size: 1.2rem; }
.servicio__num--naranja { --c: var(--naranja); }
.servicio__num--morado { --c: var(--morado); }
.servicio__distintivo { position: absolute; top: -18px; right: 18px; transform: rotate(4deg); }
.servicio__nombre { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.servicio__texto { color: #2b3350; margin-bottom: 22px; }
.servicio__mas { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1.5px dashed var(--linea); font-weight: 700; color: var(--c); }
.servicio:hover .servicio__mas .icono { transform: translateX(4px); }
.servicio__mas .icono { transition: transform .18s ease; }

/* El servicio principal: tarjeta grande y azul */
.servicio--principal { overflow: hidden; padding: clamp(30px, 4vw, 48px); background: var(--azul); border: 0; border-radius: 28px; color: #fff; box-shadow: 0 24px 54px rgba(0, 102, 255, .34); }
.servicio--principal:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 30px 64px rgba(0, 102, 255, .42); }
.servicio--principal .servicio__num { width: 48px; height: 48px; background: #fff; color: var(--azul); font-size: 1.35rem; }
.servicio--principal .servicio__distintivo { top: 26px; right: 26px; font-size: 1.02rem; padding: 9px 18px; }
.servicio--principal .servicio__nombre { font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height: 1; letter-spacing: -.03em; margin-bottom: 16px; }
.servicio--principal .servicio__texto { max-width: 34ch; font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.45; color: #fff; margin-bottom: 26px; }
.servicio--principal .vistos { position: relative; z-index: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin-bottom: 34px; font-weight: 600; }
.servicio--principal .vistos .icono { color: var(--amarillo); }
.servicio--principal .servicio__mas { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; margin-top: auto; padding: 15px 26px; background: #fff; border: 0; border-radius: 12px; color: var(--tinta); font-size: 1.06rem; }
.servicio__estrella { position: absolute; right: -46px; bottom: -52px; width: 230px; height: 230px; opacity: .2; pointer-events: none; }

/* Los otros dos, en pequeño */
.servicios-rejilla__resto { display: grid; grid-template-rows: auto 1fr 1fr; gap: 16px; }
.servicios-rejilla__ademas { margin: 0 0 0 6px; color: #5d6474; font-size: 1.25rem; transform: rotate(-2deg); transform-origin: left center; }
.servicio--menor { padding: 22px 24px 20px; border-top-width: 5px; border-radius: 18px; }
.servicio--menor .servicio__nombre { display: flex; align-items: center; gap: 12px; font-size: 1.22rem; line-height: 1.15; }
.servicio--menor .servicio__num { flex: none; width: 32px; height: 32px; margin: 0; font-size: .98rem; }
.servicio--menor .servicio__texto { margin-bottom: 14px; font-size: .97rem; }
.servicio--menor .servicio__mas { padding-top: 12px; font-size: .95rem; }

/* Proyectos */
.proyectos-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.proyecto { display: block; text-decoration: none; }
.proyecto[hidden] { display: none; }
.proyecto__marco { overflow: hidden; background: #fff; border: 1.5px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); transition: transform .25s ease, box-shadow .25s ease; }
.proyecto__barra { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #f1f2f6; border-bottom: 1.5px solid var(--linea); }
.proyecto__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--naranja); }
.proyecto__barra i:nth-child(2) { background: var(--amarillo); }
.proyecto__barra i:nth-child(3) { background: var(--azul); }
.proyecto__barra span { margin-left: 10px; font-size: .78rem; color: var(--suave); }
.proyecto__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .5s ease; }
a.proyecto:hover .proyecto__marco { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--sombra-alta); }
a.proyecto:hover .proyecto__img { transform: scale(1.03); }
.proyecto__hueco { display: grid; place-items: center; align-content: center; gap: 14px; aspect-ratio: 16 / 10; background: radial-gradient(rgba(10, 17, 40, .12) 1.3px, transparent 1.5px) 0 0 / 22px 22px, var(--crema); }
.proyecto__hueco .estrella { width: 44px; height: 44px; color: var(--naranja); }
.proyecto__pie { padding: 18px 4px 0; }
.proyecto__meta, .entrada__meta { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.proyecto__nombre { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.proyecto__texto { color: #414a66; font-size: .98rem; }
a.proyecto:hover .proyecto__nombre { color: var(--azul); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filtro { display: inline-block; padding: 8px 17px; background: #fff; border: 1.5px solid var(--tinta); border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--tinta); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.filtro:hover { background: var(--crema); }
.filtro.es-activo { background: var(--tinta); color: #fff; }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: paso; }
.pasos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paso { position: relative; padding: 30px 24px 26px; background: #fff; border: 1.5px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); }
.paso:nth-child(odd) { transform: rotate(-1deg); }
.paso:nth-child(even) { transform: rotate(1deg) translateY(14px); }
.paso__num { display: block; margin-bottom: 14px; font-size: 2.7rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--naranja); }
.paso h2, .paso h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.paso p { color: #414a66; font-size: .99rem; }

/* Sobre mí (portada) */
.sobre__dentro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.sobre__foto, .herramientas__foto { position: relative; }
.sobre__foto img, .herramientas__foto img { width: 100%; border: 8px solid #fff; border-radius: 20px; box-shadow: var(--sombra-alta); transform: rotate(-2.5deg); }
.sobre__pegatina, .herramientas__foto .pegatina { position: absolute; right: -6px; bottom: -14px; transform: rotate(5deg); font-size: 1.02rem; padding: 9px 18px; }
.sobre__estrella { position: absolute; left: -22px; top: -26px; width: 62px; height: 62px; }
.datos { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 26px 0 30px; }
.datos li { display: grid; }
.datos strong { font-size: 1.75rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.datos span { color: var(--suave); font-size: .95rem; }
.datos--tarjetas strong { font-size: 2.1rem; }
.datos--tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
.datos--tarjetas li:nth-child(even) { transform: rotate(1.4deg); }
.datos--tarjetas li:nth-child(3) strong { color: var(--naranja); }
.datos--tarjetas li:nth-child(2) strong { color: var(--azul); }

/* Razones */
.razones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.razon { padding: 26px 26px 28px; }
.razon:nth-child(even) { transform: rotate(1.1deg); }
.razon:nth-child(3n) { transform: rotate(-.4deg); }
.razon__emoji { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: 14px; }
.razon h3 { font-size: 1.22rem; font-weight: 800; margin-bottom: 8px; }
.razon p { color: #414a66; font-size: .99rem; }

/* Banda de la guía y cierre oscuro */
.guia-banda,
.cta {
	position: relative;
	color: #dfe5f5;
	background:
		radial-gradient(circle at 88% 10%, rgba(0, 102, 255, .28), transparent 40%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
		var(--tinta);
}
.guia-banda { padding: clamp(72px, 9vw, 120px) 0; clip-path: var(--rasgado-doble); overflow: hidden; }
.guia-banda__dentro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.guia-banda__texto p { font-size: 1.12rem; max-width: 52ch; }
.guia-banda__texto .titular { margin-bottom: 22px; }
.guia-banda__texto .btn { margin-top: 14px; }
.guia-banda__hojas, .guia-hero__hojas { position: relative; justify-self: center; width: min(100%, 380px); aspect-ratio: 5 / 6; }
.hoja { border-radius: 10px; background: #fff; box-shadow: 0 24px 56px rgba(0, 0, 0, .32); }
.guia-banda__hojas .hoja, .guia-hero__hojas .hoja { position: absolute; width: 72%; }
.hoja--1 { right: 0; top: 4%; transform: rotate(5deg); z-index: 2; }
.hoja--2 { left: 0; top: 12%; transform: rotate(-8deg); }
.guia-banda__estrella { position: absolute; left: 34%; top: -6%; z-index: 3; width: 70px; height: 70px; }

.cta { padding: clamp(72px, 9vw, 116px) 0; text-align: center; clip-path: var(--rasgado-arriba); }
.cta__dentro { position: relative; max-width: 820px; }
.cta__estrella { position: absolute; right: -4%; top: -28px; width: 66px; height: 66px; animation: flotar 5s ease-in-out infinite; }
.cta__texto { margin: 20px auto 30px; font-size: 1.18rem; max-width: 46ch; }
.cta__form { max-width: 460px; margin: 0 auto; text-align: left; color: var(--tinta); }

/* Blog (tarjetas) */
.entradas-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.entrada { --fondo: var(--crema); display: block; text-decoration: none; }
.entrada--melocoton { --fondo: var(--melocoton); }
.entrada--cielo { --fondo: var(--cielo); }
.entrada__img { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; border: 1.5px solid var(--linea); background: var(--fondo); transition: transform .25s ease, box-shadow .25s ease; }
.entrada__img img { width: 100%; height: 100%; object-fit: cover; }
.entrada:hover .entrada__img { transform: translateY(-6px) rotate(.7deg); box-shadow: var(--sombra-alta); }
.entrada__portada { position: relative; display: flex; align-items: flex-end; height: 100%; padding: 22px 24px; background: radial-gradient(rgba(10, 17, 40, .1) 1.3px, transparent 1.5px) 0 0 / 22px 22px; }
.entrada__portada span { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; max-width: 14ch; }
.entrada__portada .estrella { position: absolute; right: 20px; top: 18px; width: 46px; height: 46px; }
.entrada__pie { padding: 18px 4px 0; }
.entrada__titulo { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.entrada__texto { color: #414a66; font-size: .98rem; margin-bottom: 12px; }
.entrada__mas { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--azul); }
.entrada:hover .entrada__titulo { color: var(--azul); }
.vacio { text-align: center; color: var(--suave); font-size: 1.15rem; }

.paginacion { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.paginacion .page-numbers { padding: 9px 16px; background: #fff; border: 1.5px solid var(--tinta); border-radius: 999px; font-weight: 600; text-decoration: none; }
.paginacion .page-numbers.current { background: var(--tinta); color: #fff; }

/* Preguntas frecuentes */
.faq { display: grid; gap: 14px; }
.faq__item { background: #fff; border: 1.5px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__mas { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--azul); transition: transform .25s ease, background-color .25s ease; }
.faq__mas::before, .faq__mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; background: #fff; border-radius: 2px; }
.faq__mas::after { transform: rotate(90deg); }
.faq__item[open] .faq__mas { transform: rotate(45deg); background: var(--naranja); }
.faq__resp { padding: 0 24px 22px; color: #2b3350; max-width: 66ch; }

/* Cierre con formulario */
.cierre__dentro, .contacto__dentro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.cierre__correo { margin: 22px 0; color: #2b3350; }
.cierre__correo a { font-weight: 700; color: var(--azul); }
.cierre__form, .contacto__form { padding: clamp(22px, 3vw, 36px); border-radius: 22px; }

/* =============================================================================
   Formularios
   ========================================================================== */

.form__campos { display: grid; gap: 18px; }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo label { display: block; margin-bottom: 7px; font-weight: 700; font-size: .93rem; }
.campo input, .campo select, .campo textarea {
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	color: var(--tinta);
	background: #fff;
	border: 2px solid var(--linea);
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1128' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(0, 102, 255, .15); }
.campo ::placeholder { color: #9aa1b2; }
.campo-check { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: #2b3350; cursor: pointer; }
.campo-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azul); }
.campo-check a { color: var(--azul); font-weight: 600; }
.form__msg { margin-bottom: 20px; padding: 16px 18px; border-radius: 12px; border: 2px solid; }
.form__msg--ok { background: #e9f9ee; border-color: #2fbf62; }
.form__msg--error { background: #ffece5; border-color: var(--naranja); }

.guia-form { display: grid; gap: 14px; }
.guia-form__titulo { margin: 0 0 2px; font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; }
.guia-form__puntos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; font-weight: 600; color: #2b3350; }
.guia-form__puntos li { display: inline-flex; align-items: center; gap: 5px; }
.guia-form__puntos .icono { color: var(--naranja); }
.guia-form__legal { font-size: .78rem; line-height: 1.45; color: var(--suave); }
.guia-form__legal a { color: inherit; }

/* =============================================================================
   Páginas interiores
   ========================================================================== */

.pag-cab { position: relative; margin-top: calc(var(--cab) * -1); padding: calc(var(--cab) + clamp(44px, 7vw, 84px)) 0 clamp(64px, 8vw, 100px); }
.pag-cab__banda { position: absolute; inset: 0; background: var(--banda, var(--crema)); clip-path: var(--rasgado-abajo); }
.pag-cab--crema { --banda: var(--crema); }
.pag-cab--melocoton { --banda: var(--melocoton); }
.pag-cab--cielo { --banda: var(--cielo); }
.pag-cab__dentro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.pag-cab--simple .pag-cab__dentro { grid-template-columns: 1fr; }
.pag-cab--simple .titular--pagina { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.pag-cab__texto { margin-top: 22px; max-width: 58ch; font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: #1d2647; }
.nota--cab { color: #5d6474; padding-bottom: 8px; }
.pag-cab__estrella { position: absolute; right: 5%; top: calc(var(--cab) + 14px); width: 58px; height: 58px; animation: flotar 5s ease-in-out infinite; }
.articulo__meta { margin: 18px 0 0; color: #414a66; font-weight: 500; }

/* Servicios */
.indice { margin-top: 34px; }
.indice__dentro { display: flex; flex-wrap: wrap; gap: 12px; }
.indice a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 8px; background: #fff; border: 1.5px solid var(--linea); border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: var(--sombra); transition: transform .18s ease; }
.indice a:hover { transform: translateY(-3px) rotate(-1deg); }
.indice .servicio__num { width: 32px; height: 32px; margin: 0; font-size: 1rem; }

.detalle__cab { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.detalle__num { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detalle__num .servicio__num { margin: 0; }
.detalle__intro .titular { margin-bottom: 14px; }
.detalle__intro p { font-size: 1.12rem; color: #2b3350; max-width: 56ch; }
.detalle__incluye { padding: 28px 30px; transform: rotate(1.4deg); }
.detalle__bocadillo { margin: 0 0 30px 18px; font-weight: 600; font-size: 1.08rem; max-width: 24rem; transform: rotate(-1.5deg); }
.detalle__boton { margin: 30px 0 0; }
.opciones + .detalle__boton { margin-top: 36px; }

.incluye { margin-top: clamp(64px, 8vw, 96px); }
.incluye .titular { margin-bottom: 30px; }
.incluye__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.incluye__bloque { transform: none; padding: 24px 22px; font-size: .97rem; }
.incluye__bloque:nth-child(even) { transform: translateY(16px); }

.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.opcion { --c: var(--naranja); position: relative; padding: 30px 28px; background: #fff; border: 1.5px solid var(--linea); border-top: 7px solid var(--c); border-radius: 20px; box-shadow: var(--sombra); }
.opcion--morado { --c: var(--morado); }
.opcion__nombre { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.opcion__texto { color: #2b3350; margin-bottom: 18px; }
.opcion .vistos { font-size: .98rem; }
.opcion .vistos .icono { color: var(--c); }

/* Sobre mí */
.presentacion__dentro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.presentacion__foto { position: relative; justify-self: center; width: min(100%, 520px); }
.presentacion__foto img { width: 100%; filter: drop-shadow(0 18px 30px rgba(10, 17, 40, .16)); }
.presentacion__bocadillo { position: absolute; left: -4%; bottom: -30px; margin: 0; max-width: 16rem; transform: rotate(-2deg); }
.presentacion__bocadillo::after { bottom: auto; top: -19px; left: auto; right: 40px; clip-path: polygon(0 100%, 100% 100%, 80% 0); }
.credenciales { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.herramientas { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.herramientas .titular { margin-bottom: 18px; }
.herramientas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 24px; }
.herramientas__lista li { display: grid; padding: 14px 0; border-bottom: 1.5px dashed #cfd4de; }
.herramientas__lista strong { font-size: 1.12rem; font-weight: 800; }
.herramientas__lista span { color: var(--suave); font-size: .93rem; }

/* Contacto y reservas */
.contacto__dentro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.contacto__vias .bocadillo { transform: rotate(-2deg); }
.contacto__vias .titular { margin: 10px 0 20px; }
.vias { display: grid; gap: 14px; margin-bottom: 28px; }
.via { display: flex; align-items: center; gap: 16px; padding: 16px 20px; text-decoration: none; transform: none; transition: transform .18s ease, box-shadow .18s ease; }
.via:hover { transform: translateX(6px) rotate(-.6deg); box-shadow: var(--sombra-alta); }
.via .icono { width: 28px; height: 28px; color: var(--azul); }
.via span { display: grid; color: var(--suave); font-size: .93rem; overflow-wrap: anywhere; }
.via strong { color: var(--tinta); font-size: 1.04rem; }

.agenda { margin-top: 64px; padding: 0; overflow: hidden; min-height: 320px; border-radius: 22px; }
.agenda__aviso { display: grid; justify-items: center; gap: 18px; padding: clamp(40px, 7vw, 80px) 24px; text-align: center; background: radial-gradient(rgba(0, 102, 255, .16) 1.3px, transparent 1.5px) 0 0 / 24px 24px; }
.agenda__aviso > .icono { width: 54px; height: 54px; color: var(--azul); }
.agenda__aviso p { max-width: 42ch; color: #2b3350; }
.agenda iframe { display: block; width: 100%; min-height: 720px; border: 0; }
.reservar__pie { margin-top: 30px; text-align: center; color: #2b3350; }
.reservar__pie a { font-weight: 700; color: var(--azul); }

/* Guía */
.guia-hero { padding-bottom: clamp(64px, 8vw, 100px); }
.guia-hero__dentro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.titular--guia { font-size: clamp(2.3rem, 4.8vw, 3.7rem); }
.guia-hero__form { max-width: 470px; padding: 26px 28px; border-radius: 22px; }
.guia-hero__hojas { width: min(100%, 440px); }
.guia-hero__hojas .hoja { box-shadow: var(--sombra-alta); border: 1.5px solid var(--linea); }
.guia-hero__flecha { position: absolute; left: -12%; top: -2%; width: 62px; transform: rotate(-38deg) scaleX(-1); }
.guia-hero__estrella { position: absolute; right: -4%; bottom: 2%; z-index: 3; width: 64px; height: 64px; animation: girar 14s linear infinite; }

.diez { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.diez__item { padding: 22px 20px 24px; transform: none; }
.diez__item:nth-child(odd) { transform: rotate(-1deg); }
.diez__item:nth-child(even) { transform: rotate(1deg) translateY(8px); }
.diez__num { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 800; }
.diez__item:nth-child(3n) .diez__num { background: var(--naranja); }
.diez__item h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 6px; }
.diez__item p { font-size: .92rem; color: #414a66; line-height: 1.45; }

.vistazo__hojas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 10px 0 20px; }
.vistazo__hojas .hoja { width: 100%; border: 1.5px solid var(--linea); box-shadow: var(--sombra-alta); transition: transform .25s ease; }
.vistazo__hojas .hoja:nth-child(odd) { transform: rotate(-2.5deg); }
.vistazo__hojas .hoja:nth-child(even) { transform: rotate(2deg) translateY(18px); }
.vistazo__hojas .hoja:hover { transform: rotate(0) scale(1.04); z-index: 2; }
.razones--tres .razon h3 { font-size: 1.35rem; }

/* Ficha de proyecto */
.ficha { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 100px); }
.ficha__dentro { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.ficha__marco { transform: rotate(-.8deg); box-shadow: var(--sombra-alta); }
.ficha__datos { padding: 28px; border-radius: 20px; }
.ficha__datos dl { margin: 0 0 22px; display: grid; gap: 4px; }
.ficha__datos dt { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-top: 12px; }
.ficha__datos dt:first-child { margin-top: 0; }
.ficha__datos dd { margin: 0; font-size: 1.15rem; font-weight: 700; }
.ficha__texto { margin-top: 48px; max-width: 760px; }
.ficha__nav { margin-top: 48px; }

/* Artículo y texto largo */
.articulo { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 100px); }
.articulo__portada { margin: 0 0 44px; }
.articulo__portada img { width: 100%; border-radius: 20px; border: 1.5px solid var(--linea); }
.prosa { font-size: 1.14rem; line-height: 1.72; color: #1d2647; }
.prosa > * { margin-top: 0; margin-bottom: 1.25em; }
.prosa h2 { margin-top: 2em; margin-bottom: .6em; font-size: clamp(1.6rem, 2.8vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }
.prosa h3 { margin-top: 1.7em; margin-bottom: .5em; font-size: 1.35rem; font-weight: 800; color: var(--tinta); }
.prosa a { color: var(--azul); font-weight: 600; text-underline-offset: 3px; }
.prosa strong { color: var(--tinta); font-weight: 700; }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li { margin-bottom: .5em; padding-left: .2em; }
.prosa li::marker { color: var(--naranja); font-weight: 800; }
.prosa blockquote { position: relative; margin: 1.6em 0 2.2em; padding: 20px 26px; background: var(--azul); color: #fff; border-radius: 26px; font-size: 1.12rem; line-height: 1.45; }
.prosa blockquote p { margin: 0; }
.prosa blockquote::after { content: ''; position: absolute; left: 34px; bottom: -19px; width: 34px; height: 22px; background: inherit; clip-path: polygon(0 0, 100% 0, 6% 100%); }
.prosa blockquote cite { display: block; margin-top: 8px; font-size: .9rem; opacity: .85; font-style: normal; }
.prosa img { border-radius: 16px; }
.prosa figcaption { margin-top: 8px; font-size: .9rem; color: var(--suave); text-align: center; }
.prosa hr { border: 0; height: 1.5px; background: var(--linea); margin: 2.4em 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prosa th { background: var(--azul); color: #fff; text-align: left; padding: 10px 14px; }
.prosa td { padding: 10px 14px; background: #e9ecf2; border-top: 2px solid #fff; }
.prosa .azul { font-size: 1.2em; }
.prosa .lcs-destacado { padding: 20px 24px; background: var(--crema); border-radius: 16px; transform: rotate(-.5deg); }

.firma { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: 56px; padding: 22px 24px; border-radius: 20px; }
.firma img { width: 72px; height: 72px; border-radius: 18px; }
.firma p { font-size: .97rem; color: #414a66; }
.firma strong { display: block; font-size: 1.12rem; color: var(--tinta); }

/* 404 */
.error404 { text-align: center; padding-top: clamp(40px, 7vw, 90px); }
.error404__num { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; font-size: clamp(5rem, 16vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.error404__num .estrella { width: .7em; height: .7em; animation: girar 10s linear infinite; }
.error404 .titular { margin-bottom: 14px; }
.nota--centro { max-width: none; margin-bottom: 26px; }
.error404 p { max-width: 50ch; margin-inline: auto; }
.error404 .botones { margin-top: 30px; }

/* =============================================================================
   Pie y botón flotante
   ========================================================================== */

.pie { position: relative; margin-top: clamp(56px, 8vw, 100px); padding: clamp(72px, 9vw, 110px) 0 26px; background: var(--tinta); color: #b9c2d9; clip-path: var(--rasgado-arriba); }
/* Si la página acaba en la banda oscura, el pie continúa sin corte. */
main:has(> .cta:last-child) + .pie { margin-top: 0; clip-path: none; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, .12); }
.nota--pie { max-width: none; margin-bottom: 40px; text-align: left; color: #8792b0; }
.nota--pie span { display: inline-block; transform: rotate(-2deg); }
main:has(> .cta:last-child) + .pie .nota--pie { display: none; }
.pie__rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.pie .logo { color: #fff; font-size: 1.35rem; margin-bottom: 14px; }
.pie .logo .icono { color: var(--amarillo); }
.pie__marca p { max-width: 34ch; font-size: .97rem; }
.pie__redes { display: flex; gap: 10px; margin-top: 20px; }
.pie__redes a { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 12px; color: #fff; transition: background-color .18s ease, transform .18s ease; }
.pie__redes a:hover { background: var(--azul); border-color: var(--azul); transform: translateY(-3px) rotate(-4deg); }
.pie__redes .icono { width: 20px; height: 20px; }
.pie__titulo { margin-bottom: 14px; color: #fff; font-weight: 700; }
.pie__lista { display: grid; gap: 9px; font-size: .97rem; }
.pie__lista a { text-decoration: none; overflow-wrap: anywhere; }
.pie__lista a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--amarillo); text-underline-offset: 4px; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; }
.pie__base p { margin: 0; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie__legal a { text-decoration: none; }
.pie__legal a:hover { color: #fff; }

.flotante { view-transition-name: flotante; position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--verde); color: #fff; box-shadow: 0 10px 24px rgba(10, 17, 40, .28); transition: transform .18s ease; }
.flotante:hover { transform: scale(1.08) rotate(-6deg); }
.flotante .icono { width: 28px; height: 28px; }

/* =============================================================================
   Cambio de página
   La cabecera y el botón flotante se quedan quietos, el contenido se funde y
   el trazo amarillo del menú se desliza hasta la página nueva.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: pagina-sale .16s ease both; }
::view-transition-new(root) { animation: pagina-entra .38s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-group(cabecera),
::view-transition-group(flotante) { animation-duration: .01s; }
::view-transition-group(menu-marca) { animation-duration: .42s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); mix-blend-mode: multiply; }

@keyframes pagina-sale { to { opacity: 0; } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(12px); } }

/* =============================================================================
   Aparición al hacer scroll
   ========================================================================== */

.js .aparece { opacity: 0; translate: 0 22px; }
.js .aparece.es-visto { opacity: 1; translate: 0 0; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }

/* =============================================================================
   Pantallas medianas y pequeñas
   ========================================================================== */

@media (max-width: 1080px) {
	.menu { gap: 12px; }
	.menu__lista a { padding: 9px 9px; font-size: .94rem; }
	.menu__marca { left: 7px; right: 7px; }
	.diez { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.incluye__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pasos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	.menu-boton { display: block; }
	.cabecera__barra { position: relative; padding: 8px 8px 8px 18px; }
	.menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; background: #fff; border: 1.5px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra-alta); }
	.menu.es-abierto { display: flex; }
	.menu__lista { flex-direction: column; align-items: flex-start; gap: 2px; }
	.menu__lista a { padding: 12px 14px; font-size: 1.08rem; }
	.menu__marca { left: 12px; right: 12px; bottom: 14px; }
	.btn--menu { padding: 14px 18px; font-size: 1.02rem; }

	.hero__dentro, .problema__dentro, .sobre__dentro, .guia-banda__dentro, .cierre__dentro, .contacto__dentro,
	.detalle__cab, .presentacion__dentro, .credenciales, .herramientas, .guia-hero__dentro, .ficha__dentro { grid-template-columns: 1fr; }
	.hero__muestra { width: min(92%, 440px); margin-top: 12px; }
	.hero__saludo { margin-left: -2%; margin-bottom: -46px; }
	.hero__avatar { width: 96px; height: 96px; }
	.hero__saludo .bocadillo { margin-left: 26px; }
	.hero__web--2 { left: -4%; }
	.hero__web--3 { right: -4%; }
	.hero__estrella { display: none; }
	.nota--hero { text-align: left; }
	.servicios-rejilla, .opciones, .razones { grid-template-columns: 1fr; }
	.proyectos-rejilla, .entradas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pasos--tres { grid-template-columns: 1fr; }
	.diez { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vistazo__hojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pie__rejilla { grid-template-columns: 1fr 1fr; }
	.sec-cab, .pag-cab__dentro { grid-template-columns: 1fr; }
	.sec-cab .nota, .nota--cab { max-width: none; text-align: left; }
	.sec-cab .nota span, .nota--cab span { display: inline-block; transform: rotate(-2deg); }
	.sec-cab .flecha-curva, .nota--cab .flecha-curva { display: none; }
	.guia-banda__hojas { margin-top: 20px; }
	.guia-hero__hojas { order: -1; width: min(80%, 330px); }
	.guia-hero__flecha { display: none; }
	.cuadradito { margin-inline: auto; }
	.cuadradito__bocadillo { right: 0; }
	.detalle__incluye, .detalle__bocadillo { transform: none; }
	.detalle__bocadillo { margin-left: 0; }
	.pag-cab__estrella { width: 40px; height: 40px; right: 6%; }
	.firma { grid-template-columns: auto 1fr; }
	.firma .btn { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	body { font-size: 1rem; }
	:root { --cab: 82px; }
	.proyectos-rejilla, .entradas-rejilla, .pasos, .form__fila, .herramientas__lista { grid-template-columns: 1fr; }
	.paso:nth-child(even), .incluye__bloque:nth-child(even), .diez__item:nth-child(even) { transform: rotate(1deg); }
	.incluye__rejilla { grid-template-columns: 1fr; }
	.pie__rejilla { grid-template-columns: 1fr; gap: 32px; }
	.hero__saludo .bocadillo { font-size: .98rem; max-width: 14.5rem; padding: 13px 19px; }
	.hero__datos strong { font-size: 1.3rem; }
	.botones .btn--grande { flex: 1 1 100%; }
	.servicio--principal .vistos { grid-template-columns: 1fr; }
	.servicio--principal .servicio__distintivo { position: static; align-self: flex-start; margin-bottom: 18px; transform: rotate(-3deg); }
	.servicio--principal .servicio__mas { align-self: stretch; justify-content: center; }
	.duda__resp { margin-left: 12px; }
	.duda:nth-child(even) .duda__resp { margin-right: 12px; }
	.cinta__pista span { font-size: .98rem; }
	.datos strong { font-size: 1.7rem; }
	.datos--tarjetas { grid-template-columns: 1fr 1fr; }
	.vistazo__hojas { gap: 14px; }
	.flotante { width: 50px; height: 50px; right: 14px; bottom: 14px; }
	.logo { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .aparece { opacity: 1; translate: 0 0; }
}

@media print {
	.cabecera, .flotante, .cinta, .cta, .pie { display: none; }
}