/* ============================================================
   DUALTIC — HOME (index.php) · contenido nuevo, estilo editorial suave
   Solo se carga en el home. Convive con brand.css (header/footer/
   tokens/botones) — por eso NO se estilan aquí selectores genéricos
   de footer/nav: esos ya los resuelve brand.css sobre el header.php
   y footer.php reales.
   Concepto: el mismo lenguaje visual suave/editorial que ya usaba el
   home anterior (bordes finos, sombras tintadas, acentos coral, algún
   bloque oscuro puntual) — así el salto home → directorio no es brusco.
   El contenido (apertura, problema, mecánica, demo en vivo, alcance,
   confianza, para quién, CTA) es el nuevo, más completo y honesto.
   Sin Bootstrap.
   ============================================================ */

/* ---------- tokens propios del home: alias sobre los de brand.css ----------
   Los valores son IDÉNTICOS a brand.css (mismo hex) — se alias para no
   tener que reescribir cada var() del diseño al portarlo. */
:root{
  --tinta:var(--ink); --blanco:var(--white); --crema:var(--bg);
  --crema-2:#f6e2df;
  --coral-hover:var(--coral-700);
  --tinta-70:rgba(20,20,20,.72); --tinta-45:rgba(20,20,20,.45);
  --linea:var(--line); --linea-clara:rgba(243,231,227,.28);
  --f-titulo:var(--font-display); --f-cuerpo:var(--font-base); --f-mono:var(--font-mono);
  --f-acento:'Instrument Serif',serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.color{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--f-cuerpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main a{color:var(--tinta)} main a:hover{color:var(--coral-hover)}
::selection{background:var(--coral);color:var(--tinta)}
main h1,main h2,main h3,main h4,main p{margin:0}
main button{font:inherit;cursor:pointer}

.mono{font-family:var(--f-mono)}
.titulo{font-family:var(--f-titulo)}
.acento{font-family:var(--f-acento);font-style:italic;font-weight:400}
.wrap{max-width:1440px;margin:0 auto}
.wrap-narrow{max-width:1200px;margin:0 auto}
/* Mismo padding lateral que .shell-wrap del navbar (brand.css), puesto
   directamente en el wrap (no en la <section> que lo envuelve) para que
   el ancho visible del contenido y el del navbar sean estructuralmente
   idénticos, comparables 1:1 en el inspector. Solo en las secciones que
   deben alinearse con el navbar (no en demo/confianza, que son paneles
   oscuros a sangre completa, deliberadamente más angostos). */
.wrap-aligned{padding-inline:clamp(1rem,4vw,3rem)}

/* eyebrow de marca (mismo componente del home anterior) */
.pill{display:inline-flex;align-self:flex-start;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta);background:var(--blanco);border:1px solid var(--line-strong);
  padding:.5rem .85rem;border-radius:999px;box-shadow:var(--sh-sm)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(237,111,92,.45);animation:beat 2.4s var(--ease) infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(237,111,92,.45)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* etiqueta de sección */
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.sec-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--coral-hover)}
.sec-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--blanco);color:var(--tinta);border:1px solid var(--line-strong);border-radius:999px;padding:5px 14px;box-shadow:var(--sh-sm)}
.sec-line{flex:1;height:1px;background:var(--linea);min-width:80px}

/* ============================================================
   [01] HERO — copy + columna satélite (sin marco negro envolvente)
   ============================================================ */
.hero-b{padding:clamp(28px,5vw,56px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero-b::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 12%,rgba(237,111,92,.14),transparent 60%)}
.hero-b .wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
.hero-grid-b{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-copy-b h1{font-weight:800;font-size:clamp(38px,5.6vw,84px);line-height:1.01;letter-spacing:-0.03em;margin-bottom:1.1rem;text-wrap:balance}
.hero-copy-b p{margin-bottom:1.4rem}

.hero-sat-b{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.sat-card{border-radius:24px;padding:24px 28px}
.sat-coral{background:var(--coral);display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:210px;box-shadow:var(--sh-md)}
.sat-dark{background:var(--dark);display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-md)}
.sat-white{background:var(--blanco);border:1px solid var(--line-strong);box-shadow:var(--sh-sm);display:flex;align-items:center;gap:14px;justify-content:space-between}

/* botones (home) */
.btn{display:inline-block;text-decoration:none;font-family:var(--f-titulo);font-weight:700;border-radius:999px;border:1.6px solid var(--tinta);transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-coral{background:var(--coral);color:var(--tinta);border-color:var(--coral);box-shadow:0 8px 22px rgba(237,111,92,.35)}
.btn-coral:hover{background:var(--coral-hover);border-color:var(--coral-hover);color:var(--tinta);transform:translateY(-3px);box-shadow:0 14px 30px rgba(237,111,92,.4)}
.btn-ghost{background:transparent;color:var(--tinta);font-weight:600}
.btn-ghost:hover{background:var(--blanco);color:var(--tinta);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn-tinta{background:var(--tinta);color:var(--crema)}
.btn-tinta:hover{color:var(--crema);transform:translateY(-2px);box-shadow:var(--sh-md)}

.pill-chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;background:var(--blanco);border:1px solid var(--line-strong);border-radius:999px;padding:5px 14px;box-shadow:var(--sh-sm)}

/* MODOS reales del buscador: Buscan / Ofrecen / Persona / Empresa (calcado de directorio.php) */
.modes{display:flex;flex-wrap:wrap;gap:8px}
.mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--blanco);border:1px solid var(--line-strong);border-radius:14px;padding:9px 14px;min-height:44px;justify-content:center;box-shadow:var(--sh-sm);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.mode-lab{font-family:var(--f-titulo);font-weight:700;font-size:13.5px;line-height:1.1}
.mode-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--tinta-45)}
.mode-btn.on{background:var(--coral);border-color:var(--coral);box-shadow:var(--sh-md)}
.mode-btn.on .mode-lab{color:var(--tinta)}
.mode-btn.on .mode-sub{color:var(--tinta-70)}

/* columna de la mecánica (sección 03): numeral + pill "sin carrito" */
.mek-col{flex:.8 1 240px;min-width:min(100%,240px);display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}

@media (max-width:640px){
  .hero-grid-b{grid-template-columns:1fr}
  /* mecánica: la columna de 2 tarjetas usa el mismo ancho que las de arriba */
  .mek-col{flex:1 1 100%;width:100%}
  /* modos del buscador (demo y CTA): 2x2 parejo en mobile, sin anchos dispares */
  .mode-btn{flex:1 1 calc(50% - 4px)}
}

/* control de ORDEN del feed: tabs editoriales, deliberadamente distinto de los modos */
.sort-tabs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sort-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-45)}
.sort-tab{background:none;border:none;padding:6px 2px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-45);border-bottom:2px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.sort-tab::before{content:'□ ';color:var(--tinta-45)}
.sort-tab:hover{color:var(--tinta)}
.sort-tab.on{color:var(--tinta);border-bottom-color:var(--coral)}
.sort-tab.on::before{content:'■ ';color:var(--coral-hover)}
.sort-sep{font-family:var(--f-mono);font-size:12px;color:var(--tinta-45)}

/* tarjeta de publicación */
.card{background:var(--blanco);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.card-img{height:96px;background:repeating-linear-gradient(-45deg,var(--crema-2) 0 14px,var(--crema) 14px 28px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.card-img span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--tinta-45)}
.card-body{padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.badge{align-self:flex-start;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;border-radius:999px;padding:4px 12px;font-weight:600;border:1px solid var(--line-strong)}
.badge-ofrece{background:var(--coral);color:var(--tinta);border-color:var(--coral)}
.badge-busca{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.card h3,.card h4{font-family:var(--f-titulo);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-0.01em}
.card .desc{font-size:13px;line-height:1.45;color:var(--tinta-70)}
.card .meta{border-top:1px solid var(--linea);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.card .empresa{font-size:12.5px;font-weight:600}
.card .empresa em{font-style:normal;font-weight:400;color:var(--tinta-45)}
.card .tags{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--coral-hover)}
.card .loc{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--tinta-45)}

.feed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;align-items:start}
.feed-grid-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;align-items:start}

/* demo pineada (sección 04) — bloque oscuro puntual, como el viejo search-panel */
.pin-wrap{height:380vh}
.pin-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:76px 0 16px}
.demo-shell{width:100%;background:var(--dark);border-radius:36px;padding:clamp(14px,1.6vw,22px);display:flex;gap:clamp(14px,1.6vw,22px);align-items:stretch;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.demo-shell::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 90% at 85% 0%,rgba(237,111,92,.20),transparent 60%)}
.rail{position:relative;flex:0 0 330px;display:flex;flex-direction:column;gap:14px;padding:18px 10px 18px 18px}
.rail-step{border-top:1px solid var(--linea-clara);padding:16px 0;transition:opacity .4s ease;opacity:.42}
.rail-step.on{opacity:1}
.rail-step .n{font-family:var(--f-mono);font-size:12px;color:rgba(243,231,227,.5)}
.rail-step.on .n{color:var(--coral)}
.rail-step h3{font-family:var(--f-titulo);font-weight:700;font-size:19px;color:var(--on-dark)}
.rail-step p{margin:8px 0 0 28px;font-size:14px;line-height:1.5;color:var(--on-dark-muted)}
.rail-step p strong{color:var(--on-dark)}
.prog{flex:1;height:3px;background:var(--linea-clara);border-radius:2px;overflow:hidden}
.prog > div{height:100%;background:var(--coral);transform:scaleX(0);transform-origin:left}
.mock{position:relative;flex:1;background:var(--crema);border-radius:28px;padding:clamp(16px,1.8vw,26px);display:flex;flex-direction:column;gap:14px;min-width:0;overflow:hidden}
.zone{transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.zone.dim{opacity:.38}
.zone.hot{opacity:1;transform:translateY(-4px) scale(1.015)}
.zone-search.hot{box-shadow:var(--sh-lg)}

.input{font-family:var(--f-cuerpo);font-size:15px;border:1px solid var(--linea);border-radius:12px;padding:12px 16px;background:var(--crema);color:var(--tinta);min-width:0}

/* buscador CTA (sección 08): fade suave al rotar el placeholder.
   El input tiene fondo transparente y sin borde, así que cuando está vacío
   solo se ve el placeholder → animar la opacidad del input equivale a hacer
   fade del placeholder (cross-browser, sin depender de ::placeholder). */
#input-busqueda-index{transition:opacity .3s var(--ease)}
#input-busqueda-index.ph-fade{opacity:0}
/* Foco de marca: el input es transparente/sin borde, así que en vez del outline
   azul rectangular del navegador resaltamos toda la tarjeta del buscador con
   borde coral + halo suave (coherente con el acento del sitio). */
#input-busqueda-index:focus{outline:none}
#form-busqueda{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
/* !important: el form lleva border/box-shadow en estilo inline (todo el home es
   inline-styled), que gana por especificidad; hay que forzar el estado de foco. */
#form-busqueda:focus-within{border-color:var(--coral)!important;box-shadow:0 0 0 3px rgba(237,111,92,.28),var(--sh-lg)!important}

/* demo apilada (móvil / reduced-motion) */
.mob-block{background:var(--blanco);border:1px solid var(--line);border-radius:26px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-sm)}
.mob-head{display:flex;gap:12px;align-items:baseline}
.mob-head .n{font-family:var(--f-mono);font-size:12px;color:var(--coral-hover)}
.mob-head h3{font-family:var(--f-titulo);font-weight:700;font-size:21px}
.mob-block > p{font-size:14.5px;line-height:1.5;color:var(--tinta-70);text-wrap:pretty}

/* tarjeta que gira (sección 03) */
.flip-outer{perspective:1400px}
.flip-btn{display:block;width:100%;border:none;background:transparent;padding:0;text-align:left}
.flip-inner{position:relative;transform-style:preserve-3d;transition:transform .9s var(--ease);min-height:420px}
.flip-inner.flipped{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:28px;padding:clamp(24px,2.5vw,36px);display:flex;flex-direction:column;gap:16px;box-shadow:var(--sh-md)}
.flip-back{transform:rotateY(180deg)}

/* banda oscura de Confianza (sección 06) — mismo patrón que el viejo .cta-band */
.conf-band{background:var(--dark);position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.conf-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 50% 0%,rgba(237,111,92,.22),transparent 60%)}

/* ============================================================
   [08] PREGUNTAS FRECUENTES — acordeón nativo con <details>/<summary>
   Se eligió el elemento nativo a propósito: sin una línea de JS ya abre,
   cierra, responde al teclado y deja que Ctrl+F encuentre el texto dentro
   de las respuestas cerradas. Coherente con la red de seguridad del resto
   del home (si el JS no corre, el contenido sigue ahí).
   La altura no se anima (con <details> no se puede sin JS): en su lugar la
   respuesta ENTRA con opacity+transform, que es lo que el ojo lee como
   transición — y son las dos únicas propiedades que no tocan layout.
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:start}
.faq-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.faq-aside h2{font-weight:800;font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-0.03em;text-wrap:balance}
.faq-aside > p{font-size:16px;line-height:1.6;color:var(--tinta-70);max-width:34ch;text-wrap:pretty}
.faq-help{background:var(--blanco);border:1px solid var(--line-strong);box-shadow:var(--sh-sm);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.faq-help a{align-self:flex-start;font-family:var(--f-titulo);font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid var(--coral);padding-bottom:1px}

.faq-list{display:flex;flex-direction:column;gap:10px;min-width:0}
.faq-item{background:var(--blanco);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--sh-sm);overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.faq-item[open]{border-color:var(--coral);box-shadow:var(--sh-md)}
.faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;transition:background .12s var(--ease)}
.faq-q::-webkit-details-marker{display:none}
/* Feedback de presión: en una fila ancha un scale(.97) se leería como un salto
   de 20px, así que el "press" es un cambio de fondo inmediato (120ms). */
.faq-q:active{background:var(--crema-2)}
.faq-q:focus-visible{outline:2px solid var(--coral-hover);outline-offset:-3px;border-radius:20px}
.faq-n{flex:none;font-size:11px;letter-spacing:.12em;color:var(--tinta-45)}
.faq-item[open] .faq-n{color:var(--coral-hover)}
.faq-t{flex:1;font-family:var(--f-titulo);font-weight:700;font-size:clamp(15.5px,1.5vw,18px);line-height:1.3;letter-spacing:-0.01em;text-wrap:pretty}
/* El "+" se vuelve "−" girando SOLO la barra vertical 90°: acaba superpuesta a
   la horizontal. Es transform puro y el signo final no es ambiguo (una "×" a
   45° se leería como "cerrar esto", no como "colapsar"). */
.faq-plus{flex:none;width:22px;height:22px;border-radius:50%;background:var(--crema-2);display:grid;place-items:center;
  transition:background .26s var(--ease)}
.faq-plus::before,.faq-plus i{grid-area:1/1;background:var(--tinta);border-radius:2px}
.faq-plus::before{content:"";width:11px;height:1.8px}
.faq-plus i{width:1.8px;height:11px;transition:transform .26s var(--ease)}
.faq-item[open] .faq-plus{background:var(--coral)}
.faq-item[open] .faq-plus i{transform:rotate(90deg)}
.faq-a{padding:0 20px 20px 56px}
.faq-a p{font-size:15px;line-height:1.62;color:var(--tinta-70);max-width:62ch;text-wrap:pretty}
.faq-a strong{font-weight:700;color:var(--tinta)}
.faq-item[open] .faq-a{animation:faqIn .3s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (hover:hover) and (pointer:fine){
  .faq-item:not([open]):hover{border-color:var(--tinta-45);box-shadow:var(--sh-md)}
}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
  .faq-aside{position:static}
  .faq-a{padding-left:20px}
}

@keyframes giroLento{to{transform:rotate(360deg)}}

/* respiro entre secciones (05-08): cada una toma ~una pantalla y centra su
   contenido, igual que el ritmo natural que ya tenían las secciones 1-4
   (evita que "todo se vea junto" al bajar) */
@media (min-width:901px){
  .sect-vh{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
}

@media (max-width:640px){
  .rail{padding:14px 8px 14px 14px}
  .pin-sticky{padding:66px 0 12px}
}

@media (prefers-reduced-motion:reduce){
  main *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}