/* Fractalería — sistema visual. Ver DESIGN.md. */

:root{
	--bg:#070605; --bg2:#0D0B08;
	--text:#F7F4EE; --muted:#9B948A; --faint:#8A8377;
	--gold:#C9A227; --gold2:#EED27C; --gold3:#8A6D12;
	--line:rgba(238,210,124,.14);
	--green:#4ADE80; --red:#F87171; --wa:#25D366;

	--serif:'Fraunces',Georgia,'Times New Roman',serif;
	--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

	--r-ctrl:10px; --r-card:16px; --r-bloque:20px; --r-pill:999px;
	--sombra-btn:0 10px 34px rgba(201,162,39,.26);
	--sombra-card:0 18px 50px rgba(0,0,0,.5);

	--ancho:1100px; --ancho-texto:680px; --lado:20px;
	--sec:72px;
}
@media (min-width:860px){ :root{ --sec:128px; --lado:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
	margin:0; background:var(--bg); color:var(--text);
	font-family:var(--sans); font-size:16.5px; line-height:1.7;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold2); }
:focus-visible{ outline:2px solid var(--gold2); outline-offset:3px; border-radius:4px; }

/* El fondo: tres halos muy tenues, para que el negro no sea plano */
body::before{
	content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
	background:
		radial-gradient(900px 500px at 85% -5%, rgba(201,162,39,.13), transparent 60%),
		radial-gradient(700px 500px at 0% 30%, rgba(201,162,39,.06), transparent 60%),
		radial-gradient(800px 600px at 100% 80%, rgba(201,162,39,.05), transparent 60%);
}

/* ---------- Estructura ---------- */
.w{ width:100%; max-width:var(--ancho); margin:0 auto; padding-inline:var(--lado); }
section{ padding-block:var(--sec); }
.texto{ max-width:var(--ancho-texto); }
.centro{ text-align:center; }
.centro .texto{ margin-inline:auto; }
/* Un bloque de lectura dentro de una seccion centrada: el titular va centrado,
   los parrafos largos no. Centrar 4 lineas de texto las vuelve dificiles de seguir. */
.lectura{ max-width:var(--ancho-texto); margin-inline:auto; text-align:left; }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0 0 16px; letter-spacing:-.01em; }
h1{ font-size:clamp(30px,6.4vw,54px); line-height:1.1; }
h2{ font-size:clamp(24px,4.8vw,38px); line-height:1.15; }
h3{ font-size:clamp(20px,2.6vw,24px); line-height:1.25; }
p{ margin:0 0 16px; color:var(--muted); }
p:last-child{ margin-bottom:0; }
strong{ color:var(--text); font-weight:600; }
em{ font-style:italic; color:var(--gold2); }

.lede{ font-size:clamp(17px,2.1vw,19px); line-height:1.65; }
.nota{ font-size:13px; color:var(--faint); line-height:1.55; }

.ante{
	display:inline-flex; align-items:flex-start; gap:9px;
	font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
	color:var(--gold); margin:0 0 18px;
}
.ante::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); flex:none; margin-top:6px; }
.centro .ante{ justify-content:center; }

.oro{
	background:linear-gradient(100deg,var(--gold2) 15%,var(--gold) 55%,var(--gold3));
	-webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Botones ---------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	min-height:52px; padding:16px 32px; border:0; border-radius:var(--r-pill);
	font-family:var(--sans); font-size:16.5px; font-weight:700; line-height:1;
	text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
	background:linear-gradient(100deg,var(--gold2),var(--gold) 55%,var(--gold3));
	color:#0D0B08; box-shadow:var(--sombra-btn);
}
.btn::after{
	content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
	transform:skewX(-18deg); animation:brillo 4s infinite;
}
@keyframes brillo{ 0%,55%{ left:-80%; } 80%,100%{ left:130%; } }

.btn2{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	min-height:52px; padding:16px 28px; border:1px solid var(--line); border-radius:var(--r-pill);
	background:transparent; color:var(--text); font-weight:600; font-size:16px;
	text-decoration:none; cursor:pointer;
}
.btn2:hover{ border-color:rgba(238,210,124,.4); }

.btn-wa{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	min-height:52px; padding:15px 28px; border-radius:var(--r-pill);
	background:var(--wa); color:#fff; font-weight:700; text-decoration:none;
}

@media (max-width:620px){
	.btn,.btn2,.btn-wa{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
	.btn::after{ animation:none; display:none; }
}

/* ---------- Cabecera ---------- */
.cab{
	position:sticky; top:0; z-index:40;
	background:rgba(7,6,5,.82); backdrop-filter:blur(14px);
	border-bottom:1px solid var(--line);
}
.cab .w{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
/* El logo es un emblema sobre la palabra. En una cabecera de 64px esa version
   apilada queda ilegible, asi que ahi van en linea: emblema + palabra con el
   mismo caracter geometrico del logotipo. El logo completo va en el pie. */
.marca{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); white-space:nowrap; }
.marca img{ width:34px; height:34px; flex:none; }
.marca b{ font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; }
.pie .marca img{ width:150px; height:auto; }
.pie .marca b{ display:none; }
.nav{ display:none; gap:28px; align-items:center; }
.nav a{ color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; }
.nav a:hover,.nav a[aria-current]{ color:var(--text); }
.cab .btn{ min-height:44px; padding:12px 22px; font-size:15px; box-shadow:none; }
@media (min-width:900px){ .nav{ display:flex; } }
@media (max-width:899px){ .cab .btn{ padding:11px 18px; font-size:14.5px; } }
.cab .btn{ white-space:nowrap; }
/* En pantallas angostas la palabra deja paso al boton: el emblema basta
   para identificar la marca y el llamado a la accion cabe en una linea. */
@media (max-width:430px){ .marca b{ display:none; } .cab .btn{ padding:11px 16px; } }

.saltar{ position:absolute; left:-9999px; }
.saltar:focus{ left:var(--lado); top:10px; z-index:100; background:var(--gold); color:#0D0B08; padding:10px 18px; border-radius:var(--r-ctrl); }

/* ---------- Portada ---------- */
.hero{ padding-block:clamp(48px,9vw,96px) var(--sec); }
.hero h1{ max-width:16ch; }
.centro .hero h1{ margin-inline:auto; }
.hero .lede{ max-width:56ch; margin-bottom:28px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.centro .hero-cta{ justify-content:center; }

/* ---------- Galería de obras ---------- */
.obras{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.obras img{ aspect-ratio:1; object-fit:cover; width:100%; border-radius:var(--r-ctrl); }
@media (min-width:720px){ .obras{ grid-template-columns:repeat(3,1fr); gap:14px; } }

/* ---------- Tarjetas ---------- */
.card{ background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-card); padding:22px 24px; }
.card h3{ margin-bottom:10px; }
.card p{ font-size:15.5px; margin-bottom:0; }

.cursos{ display:grid; gap:14px; }
@media (min-width:760px){ .cursos{ grid-template-columns:repeat(2,1fr); } }

.curso{ display:flex; gap:16px; align-items:flex-start; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-card); padding:20px 22px; }
.curso .n{ font-family:var(--serif); font-size:26px; line-height:1; color:var(--gold); flex:none; width:36px; }
.curso h3{ font-size:19px; margin-bottom:6px; }
.curso p{ font-size:15px; margin:0; }

/* ---------- Lista con marca ---------- */
.lista{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.lista li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:16px; }
.lista .i{ flex:none; width:20px; height:20px; margin-top:3px; color:var(--gold); }

.i{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Bloque de precio ---------- */
.precio{
	max-width:480px; margin-inline:auto; text-align:center;
	border:1px solid var(--line); border-radius:var(--r-bloque); padding:30px 24px;
	background:linear-gradient(180deg,rgba(238,210,124,.05),rgba(238,210,124,.015));
}
.precio .ancla{ color:var(--muted); font-size:14.5px; margin-bottom:4px; }
.precio .ancla s{ color:var(--faint); }
.precio .cifra{ font-family:var(--serif); font-weight:600; font-size:clamp(42px,9vw,60px); line-height:1; margin:0 0 10px; }
.precio .cifra small{ font-family:var(--sans); font-size:16px; font-weight:500; color:var(--muted); }
.precio .cond{ color:var(--muted); font-size:14px; margin-bottom:20px; }
.precio .btn{ width:100%; }
.precio .pagos{ color:var(--faint); font-size:12.5px; margin:14px 0 0; letter-spacing:.03em; }

.desglose{ margin:0 auto 24px; max-width:480px; text-align:left; }
.desglose div{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14.5px; color:var(--muted); }
.desglose div:last-child{ border-bottom:none; }
.desglose span:first-child{ color:var(--text); }
.desglose .val{ text-decoration:line-through; color:var(--faint); white-space:nowrap; }
.desglose .inval{ color:var(--gold); white-space:nowrap; }

/* ---------- Daniver ---------- */
.daniver{ display:grid; gap:32px; align-items:start; }
.daniver img{ border-radius:var(--r-bloque); }
@media (min-width:860px){ .daniver{ grid-template-columns:380px 1fr; gap:56px; } }
.firma{ font-family:var(--serif); font-size:20px; color:var(--gold2); margin-top:20px; }

/* ---------- FAQ ---------- */
.faq{ max-width:var(--ancho-texto); margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
	cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
	font-weight:500; font-size:16.5px; color:var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
	content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
	width:30px; height:30px; border:1px solid var(--line); border-radius:50%;
	display:grid; place-items:center; color:var(--gold); font-size:18px; transition:transform .25s;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); background:rgba(201,162,39,.12); }
.faq p{ padding:0 0 20px; font-size:15.5px; }
@media (prefers-reduced-motion:reduce){ .faq summary::after{ transition:none; } }

/* ---------- Franja de llamada ---------- */
.franja{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); }

/* ---------- Pie ---------- */
.pie{ border-top:1px solid var(--line); padding-block:48px 40px; font-size:14.5px; }
.pie .cols{ display:grid; gap:28px; margin-bottom:32px; }
@media (min-width:720px){ .pie .cols{ grid-template-columns:1.4fr 1fr 1fr; gap:40px; } }
.pie h4{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pie a{ color:var(--muted); text-decoration:none; }
.pie a:hover{ color:var(--text); }
.pie .legal{ border-top:1px solid var(--line); padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; color:var(--faint); font-size:13px; }
.pie .legal a{ color:var(--faint); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Barra fija de las landings ---------- */
.barra{
	position:fixed; left:0; right:0; bottom:0; z-index:50;
	background:rgba(7,6,5,.94); backdrop-filter:blur(14px);
	border-top:1px solid var(--line); padding:12px var(--lado);
	transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
	padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.barra.ver{ transform:translateY(0); }
.barra .w{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0; }
.barra .p{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--gold2); white-space:nowrap; }
.barra .btn{ min-height:46px; padding:13px 24px; font-size:15px; box-shadow:none; width:auto; }
@media (prefers-reduced-motion:reduce){ .barra{ transition:none; } }

/* ---------- Aparición al entrar en pantalla ---------- */
.fade{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.fade.ver{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .fade{ opacity:1; transform:none; transition:none; } }

/* ---------- Formularios ---------- */
label{ display:block; font-size:14px; font-weight:500; color:var(--text); margin-bottom:7px; }
input[type=text],input[type=email],input[type=tel],select,textarea{
	width:100%; min-height:48px; padding:12px 14px;
	background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-ctrl);
	color:var(--text); font-family:var(--sans); font-size:16px;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,162,39,.3); }
.campo{ margin-bottom:18px; }
.error{ color:var(--red); font-size:13.5px; margin-top:6px; }
input[aria-invalid=true]{ border-color:var(--red); }

/* ---------- Avisos ---------- */
.aviso{ border:1px solid var(--line); background:rgba(238,210,124,.06); border-radius:var(--r-card); padding:18px 20px; }
.aviso.ok{ border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.07); }
.aviso.mal{ border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.07); }
.aviso p{ margin:0; color:var(--text); font-size:15.5px; }
.aviso .t{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold2); margin-bottom:6px; }

/* ---------- Portada: hero a dos columnas ---------- */
.hero-grid{ display:grid; gap:32px; align-items:center; }
.hero-img{ margin:0; }
.hero-img img{ width:100%; border-radius:var(--r-bloque); }
@media (min-width:880px){
	.hero-grid{ grid-template-columns:1.05fr .95fr; gap:56px; }
	.hero-grid h1{ max-width:none; }
}
@media (max-width:879px){ .hero-img{ display:none; } }

/* ---------- Bloque de texto + imagen, con el texto primero ---------- */
.daniver.invertido .txt{ order:2; }
.daniver.invertido img{ order:1; }
@media (min-width:860px){
	.daniver.invertido{ grid-template-columns:1fr 380px; }
	.daniver.invertido .txt{ order:1; }
	.daniver.invertido img{ order:2; }
}

/* ---------- Migas de pan ---------- */
.migas{ border-bottom:1px solid var(--line); font-size:13.5px; color:var(--faint); }
.migas .w{ padding-block:12px; }
.migas a{ color:var(--muted); text-decoration:none; }
.migas a:hover{ color:var(--text); }
.migas span[aria-hidden]{ margin:0 6px; opacity:.5; }

/* El antetitulo con icono delante no lleva el punto */
.ante svg{ width:16px; height:16px; }
.ante:has(svg)::before{ display:none; }

/* ---------- Descargas de plantillas ---------- */
.descargas{ display:grid; gap:14px; max-width:760px; }
.descarga{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
	background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px; }
.descarga .i{ color:var(--gold); width:22px; height:22px; }
.descarga h3{ font-size:18px; margin:0 0 4px; }
.descarga p{ font-size:14.5px; margin:0; }
.descarga .btn2{ grid-column:1 / -1; width:100%; min-height:46px; }
@media (min-width:640px){
	.descarga{ grid-template-columns:auto 1fr auto; }
	.descarga .btn2{ grid-column:auto; width:auto; }
}

/* ---------- Listado de guías ---------- */
.guias{ display:grid; gap:18px; }
@media (min-width:760px){ .guias{ grid-template-columns:repeat(2,1fr); } }
.guia-card{ display:block; text-decoration:none; color:inherit;
	background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.guia-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.guia-card > div{ padding:18px 20px 22px; }
.guia-card h3{ font-size:20px; margin:6px 0 8px; }
.guia-card p{ font-size:15px; margin:0; }
.guia-card:hover{ border-color:rgba(238,210,124,.38); }

/* ---------- Cuerpo de un artículo ---------- */
.articulo h2{ font-size:clamp(21px,3.2vw,27px); margin:36px 0 12px; }
.articulo h2:first-child{ margin-top:0; }
.articulo ul.lista{ margin:16px 0; }
.articulo p + ul{ margin-top:-4px; }