/* Preguntas y Recursos (desde 2026-10-07): al estilo de la home nueva.
   Hero sobre noche con degradé tonal a petróleo y grano estático; filetes en vez de cajas;
   un solo lima por pantalla en el contenido; cierre igual al de la home y Cómo trabajamos.
   Solo la cargan preguntas.html y recursos.html. Clases propias con prefijo p-
   (v3.css y paginas.css usan nombres cortos). El diálogo de descarga conserva sus clases .dr-*
   porque recursos.js las busca. */
:root{
  --p-texto-2:rgba(230,237,240,.74);          /* 6,9:1 sobre noche · 5,0:1 sobre petróleo */
  --p-filete-claro:rgba(230,237,240,.18);
}
::selection{background:var(--lima-suave);color:var(--tinta)}

/* ── grano (de la home: estático) ── */
.grano{position:relative;isolation:isolate}
.grano::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.grano>*{position:relative;z-index:1}

/* etiqueta «• NOMBRE» */
.p-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:26px;font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--salvia)}
.p-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--salvia);flex:none}

/* sobre claro, el foco va en petróleo: el lima del foco global no se ve sobre hueso */
.p-faq :focus-visible,.p-rec :focus-visible,.dr :focus-visible{outline-color:var(--petroleo)}

/* ═══ HERO ═══════════════════════════════════════════════ */
.p-hero{color:var(--claro);--fuerte:var(--claro);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(34,79,85,.95) 0%, rgba(34,79,85,.45) 38%, rgba(34,79,85,0) 72%),
    var(--noche);
  padding-block:clamp(56px,7vw,104px) clamp(64px,8vw,112px);overflow-x:clip}
.p-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:end}
.p-hero h1{font-size:clamp(40px,5vw,70px);line-height:1.02;letter-spacing:-.04em;color:var(--claro);text-wrap:balance}
.p-hero h1 .serif{color:var(--salvia-claro);font-size:.66em;line-height:1.15;margin-top:14px;letter-spacing:-.005em}
.p-bajada{margin-top:24px;font-size:17.5px;line-height:1.6;color:var(--p-texto-2);max-width:33em;text-wrap:pretty}
.p-bajada a{color:var(--claro);text-decoration:underline;text-decoration-color:rgba(230,237,240,.4);text-underline-offset:4px;transition:text-decoration-color 200ms ease}
@media (hover:hover) and (pointer:fine){.p-bajada a:hover{text-decoration-color:var(--claro)}}

/* índice del hero (Preguntas): los tres momentos, con filetes */
.p-hero-indice ul{list-style:none;border-top:1px solid var(--p-filete-claro)}
.p-hero-indice li{border-bottom:1px solid var(--p-filete-claro)}
.p-hero-indice a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:15px 0 16px;color:var(--claro);text-decoration:none}
.p-hero-indice b{display:block;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;transition:color 200ms ease}
.p-hero-indice small{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--p-texto-2)}
.p-hero-indice .flecha{color:var(--p-texto-2);transition:transform 200ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){
  .p-hero-indice a:hover b{color:var(--salvia-claro)}
  .p-hero-indice a:hover .flecha{transform:translateY(3px);color:var(--claro)}
}
/* Recursos: hero de una columna */
.p-hero-solo .wrap{grid-template-columns:minmax(0,1fr)}

/* ═══ PREGUNTAS ══════════════════════════════════════════ */
.p-faq{background:var(--hueso);padding-block:clamp(72px,9vw,128px)}
.p-bloque{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;
  padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--linea-fuerte);scroll-margin-top:34px}
.p-bloque:first-child{padding-top:0;border-top:0}
.p-bloque-cab{position:sticky;top:calc(66px + 40px)}
.p-bloque h2{font-size:clamp(30px,3.4vw,46px);line-height:1.04;letter-spacing:-.04em;color:var(--tinta)}
.p-bloque-n{margin-top:14px;font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}

/* acordeón: <details> nativo, filetes, un más que pasa a menos */
.p-lista{border-top:1px solid var(--linea-fuerte);interpolate-size:allow-keywords}
.p-lista details{border-bottom:1px solid var(--linea)}
.p-lista summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:24px;align-items:center;
  padding:22px 0;font-size:clamp(18px,1.45vw,20px);font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--tinta);transition:color 200ms ease}
.p-lista summary::-webkit-details-marker{display:none}
.p-mas{position:relative;width:20px;height:20px;color:var(--tinta-suave);transition:color 200ms ease}
.p-mas::before,.p-mas::after{content:'';position:absolute;left:3px;top:9.25px;width:14px;height:1.5px;border-radius:1px;background:currentColor;transition:transform 220ms var(--ease-out)}
.p-mas::after{transform:rotate(90deg)}
.p-lista details[open] .p-mas{color:var(--petroleo)}
.p-lista details[open] .p-mas::after{transform:rotate(90deg) scaleX(0)}
.p-lista summary:active .p-mas{transform:scale(.9);transition:transform 120ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .p-lista summary:hover{color:var(--petroleo)}
  .p-lista summary:hover .p-mas{color:var(--petroleo)}
}
.p-lista details p{padding:0 44px 28px 0;max-width:40em;font-size:16.5px;line-height:1.65;color:var(--tinta-media);text-wrap:pretty}
.p-lista details a{color:var(--petroleo);font-weight:500;text-underline-offset:3px}
/* abrir y cerrar con un desliz corto donde el navegador lo permite; donde no, abre directo */
@supports selector(::details-content){
  .p-lista details::details-content{block-size:0;overflow-y:clip;transition:block-size 240ms var(--ease-out),content-visibility 240ms allow-discrete}
  .p-lista details[open]::details-content{block-size:auto}
}

/* ¿Quiénes somos? al final, como link */
.p-quien{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;padding-top:28px;border-top:1px solid var(--linea-fuerte)}
.p-quien p{font-size:17px;line-height:1.5;color:var(--tinta-media)}
.p-link{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--petroleo);text-decoration:none;padding-block:10px}
.p-link .flecha{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.p-link:hover{text-decoration:underline;text-underline-offset:5px}.p-link:hover .flecha{transform:translateX(3px)}}

/* ═══ RECURSOS ═══════════════════════════════════════════ */
.p-rec{background:var(--hueso);padding-block:clamp(72px,9vw,128px)}
.p-rec-lista{border-top:1px solid var(--linea-fuerte)}
.p-rec-item{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:clamp(24px,4vw,64px);align-items:start;
  padding-block:clamp(32px,4vw,48px);border-bottom:1px solid var(--linea)}
.p-rec-formato{padding-top:9px;font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.p-rec-item h2{font-size:clamp(24px,2.3vw,32px);line-height:1.1;letter-spacing:-.03em;color:var(--tinta);text-wrap:balance}
.p-rec-item h2+p{margin-top:12px;max-width:34em;font-size:16.5px;line-height:1.6;color:var(--tinta-media);text-wrap:pretty}
.p-rec-acc{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding-top:4px}
.p-rec-tiempo{font-size:15px;font-weight:600;color:var(--tinta);white-space:nowrap}
.p-rec-acc .btn{white-space:nowrap}
.p-rec-acc .btn .flecha{transition:transform 200ms var(--ease-out)}
.p-rec-acc .btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.p-rec-acc .btn:hover .flecha{transform:translateX(3px)}}
.p-rec-pronto h2{color:var(--tinta-media)}
.p-rec-pronto .p-rec-tiempo{font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);padding-top:9px}

/* ── diálogo de descarga (markup y clases de recursos.js) ── */
.dr{border:0;border-radius:var(--r);padding:36px 32px 32px;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;background:var(--claro);color:var(--tinta);overflow:auto;
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.dr[open]{opacity:1;transform:none}
@starting-style{.dr[open]{opacity:0;transform:translateY(8px) scale(.98)}}
.dr::backdrop{background:rgba(25,35,42,.6);transition:opacity 200ms ease}
@starting-style{.dr[open]::backdrop{opacity:0}}
.dr h2{font-size:clamp(24px,2.2vw,28px);line-height:1.15;letter-spacing:-.03em;margin:10px 0 10px;text-wrap:balance}
.dr p{color:var(--tinta-media)}
.dr-eyebrow{display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.dr-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--verde-hoja);flex:none}
.dr form{display:grid;gap:16px;margin-top:22px;padding-top:22px;border-top:1px solid var(--linea)}
.dr label{display:grid;gap:6px;font-weight:500;font-size:14px;color:var(--tinta)}
.dr input[type=email],.dr select{font:16px var(--sans);padding:12px;border:1px solid var(--linea-fuerte);border-radius:2px;background:var(--blanco);color:var(--tinta);transition:border-color 200ms ease}
.dr input[type=email]:focus-visible,.dr select:focus-visible{outline:2px solid var(--petroleo);outline-offset:0;border-color:var(--petroleo)}
.dr .dr-check{grid-template-columns:auto 1fr;align-items:start;gap:10px;font-weight:400;font-size:13px;line-height:1.5;color:var(--tinta-media)}
.dr .dr-check input{margin-top:2px;width:18px;height:18px;accent-color:var(--petroleo)}
.dr .dr-check a{color:var(--petroleo);text-underline-offset:3px}
.dr-trampa{position:absolute;left:-9999px}
.dr .dr-error{color:#A63D14;font-size:14px;font-weight:500}
.dr-cerrar{position:absolute;top:6px;right:6px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:2px;cursor:pointer;color:var(--tinta-media);transition:color 200ms ease,transform 160ms var(--ease-out)}
.dr-cerrar svg{width:16px;height:16px}
.dr-cerrar:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.dr-cerrar:hover{color:var(--tinta)}}
.dr .btn{justify-self:start}
.dr .btn:active{transform:scale(.97)}
.dr-listo p a{color:var(--petroleo);font-weight:500;text-underline-offset:3px}
.dr-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ═══ CIERRE (el de la home y Cómo trabajamos) ═══════════ */
.cierre-b{color:var(--claro);--fuerte:var(--claro);padding-block:clamp(88px,10vw,140px);
  background:radial-gradient(60% 80% at 0% 100%, rgba(34,79,85,.85) 0%, rgba(34,79,85,0) 70%),var(--noche)}
.cierre-b .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.cierre-b h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em}
.cierre-b h2 .serif{display:block;color:var(--salvia-claro);font-size:.66em;margin-top:12px}
.cierre-acc{justify-self:end}
.btn-b{display:inline-flex;align-items:center;gap:12px;font:500 16px/1 var(--sans);padding:17px 22px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background-color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.btn-b:active{transform:scale(.97)}
.btn-b .flecha{transition:transform 200ms var(--ease-out)}
.btn-lima-b{background:var(--lima);color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.btn-lima-b:hover{background:#CEDF79}.btn-b:hover .flecha{transform:translateX(3px)}}
.micro{margin-top:16px;font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(230,237,240,.72)}

/* ════════ RESPONSIVE ════════ */
@media (max-width:1000px){
  .p-rec-item{grid-template-columns:minmax(0,1fr) auto;row-gap:14px}
  .p-rec-formato{grid-column:1/-1;padding-top:0}
  .p-rec-item>div:nth-child(2){grid-column:1;grid-row:2}
  .p-rec-acc{grid-column:2;grid-row:2;align-self:end}
}
@media (max-width:900px){
  .p-hero .wrap,.cierre-b .wrap{grid-template-columns:1fr}
  .p-hero .wrap{gap:44px}
  .p-bloque{grid-template-columns:1fr;gap:24px}
  .p-bloque-cab{position:static}
  .cierre-acc{justify-self:start}
}
@media (max-width:700px){
  .p-rec-item{grid-template-columns:1fr}
  .p-rec-item>div:nth-child(2),.p-rec-acc{grid-column:1;grid-row:auto}
  .p-rec-acc{justify-self:start;align-self:start;align-items:flex-start;padding-top:6px}
}
@media (max-width:560px){
  .p-hero{padding-top:44px;padding-bottom:64px}
  .p-bajada{font-size:16.5px}
  .p-hero-indice b{font-size:17px}
  .p-hero-indice small{font-size:13.5px}
  .p-lista summary{font-size:17px;padding:18px 0;gap:16px}
  .p-lista details p{padding:0 0 22px;font-size:16px}
  .p-quien{flex-direction:column;gap:4px}
  .dr{padding:32px 20px 24px}
}

/* ═══ movimiento reducido: todo quieto ═══ */
@media (prefers-reduced-motion:reduce){
  .p-lista details::details-content{transition:none}
  .p-mas::before,.p-mas::after,.p-hero-indice .flecha,.p-link .flecha,.p-rec-acc .btn .flecha,.btn-b,.btn-b .flecha,.dr,.dr::backdrop{transition:none}
}