/* Pliko Studio · web de una página. Sin JavaScript ni recursos de fuera. */
@font-face{font-family:"Bricolage";src:url(fuentes/bricolage-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter";src:url(fuentes/inter.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --tinta:#16161A;--crema:#F4EFE6;--mandarina:#FF5A1F;--lila:#C9B8FF;
  --gris:#5F5F68;--linea:#16161A22;
  --ancho:1120px;--lado:clamp(16px,5vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 17px/1.55 Inter,system-ui,-apple-system,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--mandarina);outline-offset:3px}
.b{font-family:Bricolage,Inter,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:.95}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
.etiqueta{display:inline-block;border:1.5px solid currentColor;border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:16px;top:16px;background:var(--tinta);color:var(--crema);padding:8px 12px;z-index:9}

/* Cabecera */
.cabecera{background:var(--mandarina)}
.cabecera .envoltorio{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.cabecera .logo img{width:132px}
.cabecera nav{display:flex;gap:22px;font-size:15px;font-weight:600}
.cabecera nav a{text-decoration:none}
.cabecera nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Botones */
.boton{display:inline-flex;align-items:center;gap:10px;background:var(--tinta);color:var(--crema);text-decoration:none;font-weight:700;padding:15px 22px;border-radius:12px;transition:transform .2s,box-shadow .2s}
.boton:hover{transform:translateY(-3px);box-shadow:0 10px 0 -2px #16161A33}
.boton .flecha{transition:translate .2s}
.boton:hover .flecha{translate:5px 0}
.boton.claro{background:var(--crema);color:var(--tinta)}
.boton .flecha{font-size:20px;line-height:1}

/* Portada */
.portada{background:var(--mandarina);padding:48px 0 0;overflow:hidden}
.portada .envoltorio{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end}
.portada h1{font-size:clamp(56px,10.5vw,138px);margin:18px 0 26px}
.portada p.entradilla{font-size:clamp(18px,2vw,21px);max-width:30ch;margin:0 0 30px}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.portada .acciones{margin-bottom:56px}
.acciones small{font-size:15px}
.portada .collage{position:relative;height:520px}
.portada .collage img{position:absolute;width:66%;border-radius:10px;box-shadow:0 18px 40px #16161A40;animation:entra .9s cubic-bezier(.2,.8,.2,1) both,flota 7s ease-in-out infinite alternate;transition:scale .3s}
.portada .collage img:hover{scale:1.04;z-index:3}
.portada .collage img:nth-child(1){left:0;top:40px;rotate:-6deg;animation-delay:.35s,0s}
.portada .collage img:nth-child(2){right:0;top:0;rotate:5deg;animation-delay:.5s,-2s;animation-duration:.9s,8s}
.portada .collage img:nth-child(3){left:20%;top:170px;rotate:-1deg;animation-delay:.65s,-4s;animation-duration:.9s,6s}
.portada .collage img.sello{width:118px;left:-10px;top:auto;bottom:24px;border-radius:50%;box-shadow:0 10px 24px #16161A40;rotate:0deg;z-index:4;animation:entra .9s .9s both,gira 18s linear infinite}
.titular span{display:inline-block;animation:sube .8s cubic-bezier(.2,.8,.2,1) both}
.titular span:nth-child(2){animation-delay:.08s}
.titular span:nth-child(3){animation-delay:.16s}
.titular span:nth-child(4){animation-delay:.24s}
.titular span:nth-child(5){animation-delay:.32s}
@keyframes sube{from{opacity:0;translate:0 .45em}}
@keyframes entra{from{opacity:0;scale:.88}}
@keyframes flota{to{translate:0 -14px}}
@keyframes gira{to{rotate:360deg}}

/* Cinta de servicios */
.cinta{background:var(--lila);overflow:hidden;padding:18px 0;border-block:2px solid var(--tinta)}
.cinta .pista{display:flex;width:max-content;animation:desliza 38s linear infinite}
.cinta span{font:800 clamp(24px,3.2vw,36px)/1 Bricolage,Inter,sans-serif;letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center}
.cinta span::after{content:"";width:.5em;height:.5em;margin:0 .7em;background:var(--mandarina);border-radius:50%}
.cinta:hover .pista{animation-play-state:paused}
@keyframes desliza{to{translate:-50% 0}}

/* Bloque de las tres áreas */
.areas{background:var(--tinta);color:var(--crema);padding:88px 0}
.areas h2{font-size:clamp(40px,6vw,72px);margin:0 0 40px;max-width:12ch}
.areas ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.area{display:grid;grid-template-columns:70px 1fr auto;gap:8px 20px;align-items:baseline;border-radius:16px;padding:26px 28px;color:var(--tinta);transition:transform .25s}
.area:hover{transform:translateX(10px) rotate(-.4deg)}
.area.a1{background:var(--crema)}
.area.a2{background:var(--lila)}
.area.a3{background:var(--mandarina)}
.area .num{font-size:13px;font-weight:700;letter-spacing:.1em}
.area h3{font-size:clamp(26px,3.4vw,40px);margin:0}
.area p{grid-column:2;margin:0;font-size:16px}
.area .desde{grid-column:3;grid-row:1 / span 2;align-self:center;font-weight:700;white-space:nowrap}

/* Trabajos */
.trabajos{padding:88px 0 72px}
.trabajos .cabeza{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.trabajos h2{font-size:clamp(40px,6vw,72px);margin:0}
.trabajos .cabeza p{max-width:38ch;margin:0;color:var(--gris);font-size:15px}
.tira{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,26vw,290px);gap:16px;overflow-x:auto;padding:0 var(--lado) 18px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lado);max-width:none}
.tira figure{margin:0;scroll-snap-align:start}
.tira img{border-radius:10px;aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .3s,box-shadow .3s}
.tira figure:hover img{transform:translateY(-8px) rotate(-1deg);box-shadow:0 18px 30px -10px #16161A55}
.tira figcaption{font-size:14px;margin-top:10px}
.tira figcaption span{color:var(--gris)}

/* Antes / después del feed */
.cambio{background:var(--tinta);color:var(--crema);padding:88px 0}
.cambio .envoltorio{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cambio h2{font-size:clamp(40px,6vw,72px);margin:16px 0 18px;max-width:11ch}
.cambio .lado p{max-width:34ch;margin:0 0 28px;color:#F4EFE6CC}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.interruptor{border:0;margin:0;padding:5px;display:inline-flex;gap:4px;background:#F4EFE61A;border-radius:99px;position:relative}
.interruptor input{position:absolute;opacity:0;pointer-events:none}
.interruptor label{cursor:pointer;font-weight:700;padding:12px 26px;border-radius:99px;transition:background .25s,color .25s}
.interruptor input:checked+label{background:var(--crema);color:var(--tinta)}
#ver-despues:checked+label{background:var(--mandarina)}
.interruptor input:focus-visible+label{outline:3px solid var(--mandarina);outline-offset:2px}
.cambio:has(#ver-antes:checked) label[for=ver-despues]{animation:llama 1.6s ease-in-out 3s 3}
@keyframes llama{50%{background:#FF5A1F55}}
.telefono{position:relative;width:min(100%,340px);aspect-ratio:470/900;margin:0 auto;border:12px solid #2A2A30;border-radius:44px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px #000,0 0 0 2px #3A3A42;rotate:3deg}
.telefono::before{content:"";position:absolute;top:10px;left:50%;translate:-50% 0;width:34%;height:22px;background:#16161A;border-radius:99px;z-index:3}
.telefono img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.telefono .despues{clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.cambio:has(#ver-despues:checked) .telefono .despues{clip-path:inset(0)}

/* Cómo trabajamos */
.pasos{background:var(--lila);padding:88px 0}
.pasos .envoltorio{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.pasos h2{font-size:clamp(40px,6vw,72px);margin:16px 0 18px}
.pasos .lado p{max-width:34ch;margin:0}
.pasos ol{list-style:none;margin:0;padding:0;counter-reset:p}
.pasos li{counter-increment:p;display:grid;grid-template-columns:52px 1fr;gap:4px 18px;padding:18px 0;border-top:1.5px solid var(--tinta)}
.pasos li:last-child{border-bottom:1.5px solid var(--tinta)}
.pasos li::before{content:counter(p);grid-row:1 / span 2;width:40px;height:40px;border-radius:10px;background:var(--tinta);color:var(--crema);display:grid;place-items:center;font-weight:700}
.pasos li strong{font-size:20px}
.pasos li span{color:#16161ACC;font-size:15.5px}

/* Precios */
.precios{padding:88px 0}
.precios h2{font-size:clamp(40px,6vw,72px);margin:16px 0 12px}
.precios .nota{color:var(--gris);margin:0 0 40px;max-width:60ch}
.grupos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grupo h3{font-size:26px;margin:0 0 6px}
.grupo .fila{transition:background .2s,padding .2s}
.grupo .fila:hover{background:#FF5A1F14;padding-inline:10px}
.grupo>p{margin:0 0 14px;font-size:15px;color:var(--gris)}
.grupo dl{margin:0}
.grupo .fila{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:13px 0;border-top:1.5px solid var(--tinta)}
.grupo dt{font-weight:700}
.grupo dd{margin:0;font-weight:700;text-align:right;white-space:nowrap}
.grupo .detalle{grid-column:1 / -1;font-weight:400;font-size:14px;color:var(--gris);text-align:left;white-space:normal}
.propuesta{margin-top:36px;background:var(--tinta);color:var(--crema);border-radius:16px;padding:24px 28px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.propuesta p{margin:0;max-width:62ch}
.propuesta strong{color:var(--mandarina)}

/* Preguntas */
.preguntas{background:var(--tinta);color:var(--crema);padding:88px 0}
.preguntas .envoltorio{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.preguntas h2{font-size:clamp(40px,6vw,72px);margin:0}
details{border-top:1.5px solid #F4EFE640;padding:18px 0}
details:last-child{border-bottom:1.5px solid #F4EFE640}
summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--mandarina);font-size:24px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0;color:#F4EFE6CC;max-width:60ch}

/* Cierre */
.cierre{background:var(--mandarina);padding:96px 0}
.cierre h2{font-size:clamp(48px,9vw,120px);margin:0 0 24px}
.cierre p{font-size:19px;max-width:40ch;margin:0 0 30px}

/* Pie */
.pie{background:var(--tinta);color:var(--crema);padding:40px 0;font-size:14px}
.pie .envoltorio{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.pie img{width:110px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pie a{text-decoration:none}
.pie a:hover{text-decoration:underline}

/* Páginas legales */
.legal{padding:56px 0 88px}
.legal .envoltorio{max-width:760px}
.legal h1{font-size:clamp(40px,7vw,64px);margin:0 0 28px}
.legal h2{font-size:20px;margin:32px 0 8px;font-family:Inter,sans-serif;letter-spacing:0}
.legal p,.legal li{font-size:16px}
.legal .relleno{background:#FF5A1F33;padding:0 4px;border-radius:4px}

/* Móvil */
@media (max-width:860px){
  .cabecera nav a:not(.importante){display:none}
  .portada .envoltorio,.pasos .envoltorio,.preguntas .envoltorio{grid-template-columns:1fr}
  .portada .collage{height:300px;margin:0 -8px}
  .portada .collage img{width:56%}
  .portada .collage img:nth-child(3){top:110px}
  .portada .collage img.sello{width:84px;bottom:6px;left:auto;right:4px}
  .cambio .envoltorio{grid-template-columns:1fr}
  .telefono{width:min(100%,290px)}
  .area:hover{transform:none}
  .portada .acciones{margin-bottom:0}
  .grupos{grid-template-columns:1fr;gap:36px}
  .area{grid-template-columns:1fr;padding:22px}
  .area p,.area .desde{grid-column:1;grid-row:auto}
  .area .desde{margin-top:8px}
}
/* Aparecer al hacer scroll (solo navegadores que lo soportan; los demás lo ven todo directamente) */
@supports (animation-timeline:view()){
  .revela{animation:aparece linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes aparece{from{opacity:0;translate:0 48px}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.legal .dato-fiscal{font-size:11px;color:var(--gris)}