/* Proyectos de Recreo: la página de proyectos y la ficha de cada uno (contenido/marca/ficha-proyecto.md).
   Encima de estilos.css. Cada ficha fija su color con --c en .f-head y .tarjeta. */
/* Cabecera en el color del área principal */
.f-head{background:var(--c);padding:calc(var(--nav-h) + clamp(40px,6vw,88px)) var(--pad) clamp(40px,6vw,80px)}
.f-head-in{max-width:1240px;margin-inline:auto;display:grid;gap:clamp(24px,3vw,40px)}
.f-migas{font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.f-migas a{color:inherit}
.f-nombre{font-size:clamp(17px,1.4vw,20px);font-weight:500;color:var(--ink)}
.f-t{font-size:clamp(36px,5.6vw,92px);line-height:1;letter-spacing:-.05em;font-weight:500;max-width:16ch}
.f-datos{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;border-top:2px solid var(--ink);padding-top:14px}
.f-datos li{display:grid;gap:2px}
.f-datos span{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.f-datos b{font-weight:500}
.etqs{display:flex;flex-wrap:wrap;gap:8px}
.etq{font:500 13px/1 var(--sans);padding:8px 12px;border:2px solid var(--ink);background:var(--t)}
.etq.osc{color:var(--crema)}

/* Cabecera en dos columnas: la información y, al lado, el ordenador de la home con la web del cliente */
.f-head-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;column-gap:clamp(24px,5vw,80px)}
.f-info{display:grid;gap:clamp(22px,2.6vw,34px);align-content:center}
.f-info .f-t{font-size:clamp(34px,4.6vw,76px)}
.f-maq{display:grid;justify-items:center}
.maquina{position:relative;width:min(100%,460px);aspect-ratio:600/720}
.maquina > img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* El cristal de img/ordenador.svg: 108,68 a 492,380 sobre 600x720. Más grande que el de la home para que se vea la web. */
.pantalla{position:absolute;left:18%;top:9.444%;width:64%;height:43.333%;border-radius:6.8% / 8.3%;overflow:hidden;background:#F3F4EE;container-type:size}
.pantalla::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
             radial-gradient(120% 110% at 50% 45%,transparent 58%,rgba(20,20,10,.28) 100%),
             linear-gradient(160deg,rgba(255,255,255,.35) 0 18%,transparent 34%)}
/* La web del cliente: una captura larga que baja sola, despacio, como si alguien la recorriera. */
.web{position:absolute;left:0;right:0;top:0;animation:recorre 14s ease-in-out infinite alternate}
.web img{display:block;width:100%;height:auto}
@keyframes recorre{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + 100cqh))}}
@media(prefers-reduced-motion:reduce){.web{animation:none}}
/* Mientras no haya captura real, web-ejemplo.svg hace de hueco. */
.f-pie-maq{font:400 11px/1.4 var(--mono);letter-spacing:.04em;margin-top:10px;text-align:center;color:var(--ink)}
.f-pie-maq a{color:inherit}

/* Cuerpo */
.f-cuerpo{background:var(--crema);padding:clamp(56px,8vw,120px) var(--pad)}
.f-cuerpo-in{max-width:1240px;margin-inline:auto;display:grid;gap:0}
.bloque{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,5vw,96px);padding-block:clamp(28px,3.6vw,48px);border-top:2px solid var(--ink)}
.bloque h2{font-size:clamp(22px,2.2vw,34px);line-height:1.05;letter-spacing:-.035em;font-weight:500}
.bloque p{font-size:clamp(17px,1.35vw,20px);color:var(--ink);max-width:56ch}
.montado{display:grid;gap:18px}
.montado div{display:grid;gap:6px}
.montado span{font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.montado ul{list-style:none;display:grid;gap:4px}
.montado li{font-size:17px;color:var(--ink)}
.cifras-f{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.cifras-f li{display:grid;gap:6px;align-content:start}
.cifras-f b{font-size:clamp(40px,5vw,76px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.cifras-f span{font-size:15px;color:var(--ink)}
.cifras-f small{font:400 11px var(--mono);letter-spacing:.04em;color:var(--grey)}
.cita{font-size:clamp(22px,2.4vw,36px);line-height:1.2;letter-spacing:-.025em;font-weight:500;color:var(--ink);max-width:28ch}
.cita-a{font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-top:14px;display:block}
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.galeria img{display:block;width:100%;height:auto;border:2px solid var(--ink)}
.medicion{display:grid;gap:10px}
.medicion b{font-size:clamp(40px,5vw,76px);font-weight:500;letter-spacing:-.05em;line-height:1}
.opcional{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-top:6px;display:block}

/* Pie de la ficha */
.f-pie{background:var(--tomate);padding:clamp(56px,8vw,100px) var(--pad)}
.f-pie-in{max-width:1240px;margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:end}
.f-pie h2{font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.05em;font-weight:500;max-width:14ch}
.f-sig{font:400 13px var(--mono);letter-spacing:.04em}

/* Tarjeta para la página de Proyectos */
.tarjetas{background:var(--crema);padding:clamp(56px,8vw,120px) var(--pad);border-top:2px solid var(--ink)}
.tarjetas.portada{border-top:0;padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px))}
.tarjetas.portada .f-t{max-width:none}
.tarjetas-entrada{font-size:clamp(17px,1.4vw,20px);max-width:48ch;color:var(--ink)}
.tarjetas-in{max-width:1240px;margin-inline:auto;display:grid;gap:24px}
.tarjetas h2{font-size:clamp(28px,3.4vw,52px);letter-spacing:-.045em;font-weight:500;line-height:1}
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tarjeta{display:grid;grid-template-rows:auto 1fr auto;border:2px solid var(--ink);text-decoration:none;color:var(--ink);background:var(--c)}
.tarjeta .img{aspect-ratio:4/3;max-width:100%;border-bottom:2px solid var(--ink);display:grid;place-items:center;padding:18px 12px 0;background:var(--c);overflow:hidden}
.tarjeta .img .maquina{width:62%;align-self:end;margin-bottom:-14%}
.tarjeta:hover .web{animation-play-state:running}
.tarjeta .web{animation-play-state:paused}
.tarjeta .txt{padding:18px;display:grid;gap:8px;align-content:start;background:var(--blanco)}
.tarjeta .txt span{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tarjeta .txt b{font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.tarjeta .txt p{font-size:15px;color:var(--ink)}
.tarjeta .ver{padding:12px 18px;border-top:2px solid var(--ink);background:var(--blanco);font-weight:500;font-size:14px}
.tarjeta:hover .ver{background:var(--amarillo)}
.vacia{border:2px dashed var(--ink);display:grid;place-items:center;text-align:center;padding:24px;background:var(--crema)}
.vacia b{font-size:22px;font-weight:500;letter-spacing:-.03em}

/* Antes de Recreo: la experiencia del fundador, separada de los proyectos del estudio y sin ordenador */
.tarjetas.previos{padding-top:0;border-top:0}
.rejilla.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.empresa{background:var(--c);border-bottom:2px solid var(--ink);padding:18px;display:grid;gap:clamp(40px,5vw,72px);align-content:space-between;color:var(--ink)}
.empresa.osc,.empresa.osc b{color:var(--crema)}
.empresa span{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.empresa b{font-size:clamp(30px,2.8vw,44px);font-weight:500;letter-spacing:-.045em;line-height:1}

@media(max-width:900px){
  .f-head-in{grid-template-columns:minmax(0,1fr)}
  .maquina{width:min(100%,380px)}
  .bloque{grid-template-columns:minmax(0,1fr)}
  .rejilla,.rejilla.cuatro,.galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .rejilla,.rejilla.cuatro,.galeria,.cifras-f{grid-template-columns:minmax(0,1fr)}
}