/* ============================================================
   DUALTIC — HOME (index.php) · new content, soft editorial style
   Only loaded on the home page. Coexists with brand.css (header/
   footer/tokens) — that's why generic footer/nav selectors are NOT
   styled here: brand.css already handles those over the real
   header.php/footer.php.
   Concept: the same soft/editorial visual language the previous
   home already used (thin borders, tinted shadows, coral accents,
   the occasional dark block) — so the jump from home to the
   directory isn't jarring.
   The content (opening, the problem, the mechanic, the live demo,
   scope, trust, who it's for, CTA) is the new, more complete and
   honest version.
   No Bootstrap.
   ============================================================ */

/* ---------- home-only tokens: aliased onto brand.css's ----------
   Values are IDENTICAL to brand.css (same hex) — aliased so the
   ported design doesn't need every var() rewritten. */
: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}
/* Same horizontal padding as the navbar's .shell-wrap (brand.css), applied
   directly on the wrap (not on the wrapping <section>) so the visible
   content width and the navbar width are structurally identical, 1:1
   comparable in devtools. Only on sections meant to align with the navbar
   (not demo/trust, which are full-bleed dark panels, deliberately narrower). */
.wrap-aligned{padding-inline:clamp(1rem,4vw,3rem)}

/* brand eyebrow (same component as the previous home) */
.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}}

/* section label */
.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 + satellite column (no enclosing black frame)
   ============================================================ */
.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}

/* buttons (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)}

/* REAL search modes: Sell / Buy / Person / Company (mirrors directory.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)}

/* mechanic column (section 03): number + "no cart" pill */
.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}
  /* mechanic: the 2-card column uses the same width as the card above */
  .mek-col{flex:1 1 100%;width:100%}
  /* search modes (demo and CTA): even 2x2 grid on mobile, no uneven widths */
  .mode-btn{flex:1 1 calc(50% - 4px)}
}

/* feed ORDER control: editorial tabs, deliberately distinct from the modes */
.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)}

/* listing card */
.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}

/* pinned demo (section 04) — one deliberate dark block, like the old 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}

/* CTA search (section 08): soft fade when the placeholder rotates.
   The input has a transparent background and no border, so when empty only
   the placeholder shows → animating the input's opacity is equivalent to a
   placeholder fade (cross-browser, no reliance on ::placeholder). */
#input-busqueda-index{transition:opacity .3s var(--ease)}
#input-busqueda-index.ph-fade{opacity:0}
/* Brand focus: the input is transparent/borderless, so instead of the browser's
   rectangular blue outline we highlight the whole search card with a coral border
   + soft glow (consistent with the site's accent). */
#input-busqueda-index:focus{outline:none}
#form-busqueda{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
/* !important: the form carries border/box-shadow as inline style (the whole home
   is inline-styled), which wins by specificity; the focus state must force it. */
#form-busqueda:focus-within{border-color:var(--coral)!important;box-shadow:0 0 0 3px rgba(237,111,92,.28),var(--sh-lg)!important}

/* stacked demo (mobile / 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}

/* flip card (section 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)}

/* Trust section dark band (06) — same pattern as the old .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] FAQ — native accordion with <details>/<summary>
   The native element was chosen on purpose: without a single line of JS it
   already opens, closes, responds to the keyboard and lets Ctrl+F find text
   inside collapsed answers. Consistent with the safety net used across the
   rest of the home (if JS never runs, the content is still there).
   Height is not animated (you cannot, with <details>, without JS): instead the
   answer ENTERS with opacity+transform, which is what the eye reads as the
   transition — and they are the only two properties that skip 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}
/* Press feedback: on a wide row a scale(.97) would read as a 20px jump, so the
   "press" is an immediate background change instead (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}
/* The "+" turns into a "−" by rotating ONLY the vertical bar 90°: it ends up on
   top of the horizontal one. Pure transform, and the resulting sign is not
   ambiguous (a 45° "×" would read as "close this", not "collapse"). */
.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)}}

/* breathing room between sections (05-08): each takes ~one screen and
   centers its content, matching the natural rhythm sections 1-4 already
   had (avoids everything feeling cramped together further down) */
@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}
}