/* Web nueva de Websalia (prueba): lo común a todas las páginas interiores. Valores de vault/websalia/brand/brand-tokens.json */
:root { --tinta:#0f0f0f; --fondo:#f7f7f7; --oscuro:#0b0b0b; --rosa:#f03891; --rosa-boton:#d6106f; --naranja:#ff9d14; --azul:#33bbff;
        --lado:clamp(16px,4vw,56px); --linea:rgba(15,15,15,.12); }
* { box-sizing:border-box; margin:0; }
body { font-family:Inter, system-ui, sans-serif; color:var(--tinta); background:var(--fondo); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.num { font:500 12px/1 ui-monospace, monospace; letter-spacing:.12em; opacity:.55; }
.casilla { display:inline-block; width:.62em; height:.62em; min-width:12px; min-height:12px; border-radius:22%; background:var(--col); flex:none; vertical-align:.02em;
           box-shadow:inset 0 .09em 0 rgba(255,255,255,.28), inset 0 -.09em 0 rgba(0,0,0,.14); }
.boton { display:inline-block; padding:12px 20px; border-radius:999px; font-size:15px; font-weight:500; background:var(--rosa-boton); color:#fff; border:0; cursor:pointer; font-family:inherit; }
.boton.sec { background:transparent; color:inherit; border:1px solid currentColor; }
.boton:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid var(--rosa); outline-offset:3px; }

/* menú */
.nav { position:fixed; top:12px; left:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px); z-index:40; display:flex; align-items:center; justify-content:space-between; padding:10px 10px 10px 20px; border-radius:999px; background:rgba(247,247,247,.78); border:1px solid rgba(15,15,15,.08); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.marca { font-weight:600; font-size:22px; letter-spacing:-.02em; }
.marca span { color:var(--rosa); }
.enlaces { display:flex; gap:26px; font-size:15px; }
.enlaces .act { font-weight:600; }
.cta { background:var(--tinta); color:var(--fondo); padding:10px 18px; border-radius:999px; font-size:14px; font-weight:500; }
.menu-movil { display:none; width:40px; height:40px; border-radius:50%; border:0; background:var(--tinta); color:#fff; font-size:18px; line-height:40px; text-align:center; cursor:pointer; }
@media (max-width:900px) { .enlaces, .nav .cta { display:none; } .menu-movil { display:block; } }

/* cabecera de página interior */
.cabecera { padding:clamp(120px,17vh,170px) var(--lado) clamp(40px,6vh,72px); }
.cabecera .num { display:block; margin-bottom:18px; }
.cabecera h1 { font-weight:500; letter-spacing:-.04em; line-height:1; font-size:clamp(44px,6.4vw,104px); max-width:16ch; }
.cabecera h1 .casilla { margin-right:.18em; }
.cabecera p.entradilla { margin-top:22px; font-size:clamp(18px,1.6vw,23px); line-height:1.5; opacity:.8; max-width:40em; }
.seccion { padding:clamp(48px,8vh,100px) var(--lado); }
.seccion > .num { display:block; margin-bottom:18px; }
.seccion h2 { font-weight:500; letter-spacing:-.035em; line-height:1.04; font-size:clamp(30px,3.4vw,52px); max-width:22ch; }
.texto p { font-size:18px; line-height:1.6; max-width:36em; }
.texto p + p { margin-top:1em; }

/* filas (índice de servicios, listas) */
.filas { list-style:none; padding:0; border-top:1px solid var(--linea); margin-top:28px; }
.filas > li { border-bottom:1px solid var(--linea); }
.fila { display:grid; grid-template-columns:64px 1fr 1.3fr 40px; gap:24px; align-items:center; padding:26px 0; }
.fila .n { font:500 13px ui-monospace, monospace; opacity:.5; }
.fila h3 { font-weight:500; letter-spacing:-.03em; font-size:clamp(26px,2.8vw,42px); display:flex; align-items:center; gap:.3em; }
.fila p { font-size:16px; line-height:1.5; opacity:.75; }
.fila .flecha { font-size:26px; transition:transform .3s ease; }
a.fila:hover .flecha { transform:translateX(6px); }
.fila .prox { font:500 11px ui-monospace, monospace; letter-spacing:.1em; opacity:.5; }
@media (max-width:800px) { .fila { grid-template-columns:1fr; gap:8px; padding:22px 0; } .fila .n, .fila .flecha { display:none; } }

/* lista con la casilla como viñeta */
.incluye { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 40px; margin-top:28px; }
.incluye li { display:flex; gap:14px; align-items:baseline; font-size:18px; line-height:1.45; }
.incluye li .casilla { transform:translateY(.1em); }
@media (max-width:800px) { .incluye { grid-template-columns:1fr; } }

/* cómo trabajamos: 4 pasos en horizontal sobre una línea (Trionn) */
.pasos { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; margin-top:40px; position:relative; }
.pasos::before { content:''; position:absolute; left:0; right:0; top:7px; height:1px; background:var(--linea); }
.pasos li { position:relative; padding-top:34px; }
.pasos li::before { content:''; position:absolute; top:0; left:0; width:15px; height:15px; border-radius:22%; background:var(--col); box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.14); }
.pasos b { display:block; font-weight:500; font-size:20px; letter-spacing:-.02em; margin-bottom:8px; }
.pasos span { font-size:15px; line-height:1.55; opacity:.75; }
@media (max-width:800px) { .pasos { grid-template-columns:1fr; gap:22px; } .pasos::before { left:7px; right:auto; top:0; bottom:0; width:1px; height:auto; } .pasos li { padding:0 0 0 34px; } }

/* tarjetas de proyecto */
.tarjetas { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px 24px; margin-top:32px; }
.tarjeta .foto { aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#e6e6e6; }
.tarjeta .foto img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tarjeta:hover .foto img { transform:scale(1.03); }
.tarjeta .pie-t { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; font-weight:500; }
.tarjeta .etq { display:flex; gap:4px; font-size:14px; }
@media (max-width:1000px) { .tarjetas { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px) { .tarjetas { grid-template-columns:1fr; } }

/* preguntas frecuentes */
.faq { margin-top:28px; border-top:1px solid var(--linea); max-width:900px; }
.faq details { border-bottom:1px solid var(--linea); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:22px 0; font-size:clamp(18px,1.6vw,22px); font-weight:500; letter-spacing:-.015em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-weight:400; font-size:26px; line-height:1; transition:transform .25s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 0 22px; font-size:17px; line-height:1.6; opacity:.8; max-width:44em; }

/* pie negro con la llamada y el logotipo enorme (Paisana) */
.pie { background:var(--oscuro); color:var(--fondo); padding:clamp(56px,8vh,96px) var(--lado) 0; overflow:hidden; }
.pie-arriba { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.pie h2 { font-weight:500; letter-spacing:-.035em; line-height:1.02; font-size:clamp(40px,5vw,80px); }
.pie .boton { margin-top:24px; }
.pie nav a { display:block; font-size:22px; font-weight:500; line-height:1.5; }
.pie .dato { font-size:15px; opacity:.8; line-height:1.9; }
.pie .logo { font-weight:600; letter-spacing:-.06em; line-height:.78; font-size:22vw; margin:clamp(40px,6vw,80px) 0 0 -.04em; white-space:nowrap; }
.pie .logo span { color:var(--rosa); }
.pie .legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:18px 0 22px; font-size:12px; border-top:1px solid rgba(247,247,247,.12); }
.pie .legal, .pie .legal a { color:rgba(247,247,247,.6); }
.pie .legal nav { display:flex; gap:16px; flex-wrap:wrap; }
.pie .legal nav a { font-size:12px; font-weight:400; display:inline; line-height:1.4; }
@media (max-width:800px) { .pie-arriba { grid-template-columns:1fr; } }

/* aparición suave de cada bloque (plan 04: subir 12-16 px y fundido, 400 ms) */
.aparece { opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease; }
.aparece.visto { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity:1; transform:none; transition:none; } }