/* Va en @layer components por la misma razon que cine-scoped.css: una regla
   sin capa gana a cualquier utilidad de Tailwind, y eso rompia los componentes
   heredados (colores de texto y rellenos). Aqui queda por debajo de ellas. */
@layer components {
/* =============================================================================
   Hippo Scrapping — capa cinematográfica
   Personalidad: sala de telemetría. Azul sobre navy profundo, columnas de datos
   cayendo y, como pieza central, una tabla real de leads con su puntuación.
   Todo encerrado en .cine: el área privada de la app no se toca.
   ========================================================================== */

.cine {
  --bg: #060B14;
  --bg-2: #0C1626;
  --fg: #E9F0FA;
  --fg-2: #A8BCD6;
  --fg-3: #8098B8;
  --light: #F4F8FE;
  --light-2: #E4EDFA;
  --ink: #0A0F1A;
  --ink-2: #3A4A61;
  --ink-3: #556A87;
  --b1: #3B8FF5;
  --b2: #1E5FBF;
  --b3: #8FC4FF;
  --on-b1: #04111F;
  --grad: linear-gradient(115deg, #1E5FBF, #3B8FF5 52%, #8FC4FF);
  --veil: 6, 11, 20;

  --font-d: var(--font-inter, "Inter"), system-ui, sans-serif;
  --font-b: var(--font-inter, "Inter"), system-ui, sans-serif;
  --font-m: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1240px;
}

.cine h1, .cine h2, .cine h3 { font-weight: 700; letter-spacing: -.035em; }

/* --- cabecera propia de las páginas públicas ------------------------------ */
.hp-nav { position: fixed; inset: 0 0 auto; z-index: 90; border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s; }
.hp-nav.is-stuck { background: rgba(6,11,20,.88); backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: rgba(143,196,255,.16); }
.hp-nav-in { display: flex; align-items: center; gap: 1rem; height: 76px; }
.hp-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  font-weight: 700; letter-spacing: -.02em; font-size: .95rem; color: #fff; }
.hp-logo img { width: 34px; height: 34px; border-radius: 9px; }
.hp-logo em { font-style: normal; color: var(--b3); }

/* --- héroe ---------------------------------------------------------------- */
.hp-hero { min-height: 100svh; display: flex; align-items: center; padding: 128px 0 5rem; }
.hp-hero h1 { margin-top: 1.5rem; max-width: 18ch; }
.hp-hero .lead { margin-top: 1.6rem; color: #C4D6EE; }
.hp-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.3rem; }
.hp-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.4rem; }
.hp-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1rem;
  border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(143,196,255,.22);
  backdrop-filter: blur(10px); font-size: .85rem; color: #D3E3F8; }
.hp-chip b { font-family: var(--font-m); color: var(--b3); font-weight: 600; }

/* --- la tabla de leads: el producto, en color ----------------------------- */
.hp-panel { margin-top: clamp(2.4rem, 5vw, 3.6rem); border-radius: 22px; overflow: hidden;
  background: #fff; border: 1px solid rgba(10,15,26,.09); box-shadow: var(--shadow-2); }
.hp-panel-bar { display: flex; align-items: center; gap: .55rem; padding: .85rem 1.1rem;
  background: linear-gradient(180deg, #FBFDFF, #EDF3FC); border-bottom: 1px solid rgba(10,15,26,.07); }
.hp-panel-bar i { width: 11px; height: 11px; border-radius: 50%; }
.hp-panel-bar span { margin-left: .8rem; font-family: var(--font-m); font-size: .7rem; color: #55698A;
  background: #fff; border: 1px solid rgba(10,15,26,.09); border-radius: 7px; padding: .3rem .7rem; }
.hp-filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(10,15,26,.07); background: #F7FAFF; }
.hp-filters em { font-style: normal; font-family: var(--font-m); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: #55698A; align-self: center; margin-right: .3rem; }
.hp-filters span { font-size: .78rem; padding: .35rem .8rem; border-radius: 999px;
  background: #E8F1FE; color: #1B4E9B; border: 1px solid rgba(59,143,245,.30); font-weight: 500; }

.hp-table { width: 100%; border-collapse: collapse; }
.hp-table th { text-align: left; font-family: var(--font-m); font-size: .63rem; letter-spacing: .14em;
  text-transform: uppercase; color: #55698A; font-weight: 500; padding: .85rem 1.1rem;
  border-bottom: 1px solid rgba(10,15,26,.09); white-space: nowrap; }
.hp-table td { padding: .9rem 1.1rem; border-bottom: 1px solid rgba(10,15,26,.06);
  font-size: .87rem; color: var(--ink-2); vertical-align: middle; }
.hp-table tr:last-child td { border-bottom: 0; }
.hp-table b { color: var(--ink); font-weight: 600; display: block; }
.hp-table small { color: #55698A; font-size: .76rem; }
.hp-mono { font-family: var(--font-m); font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.hp-score { display: flex; align-items: center; gap: .6rem; min-width: 116px; }
.hp-score-bar { flex: 1; height: 6px; border-radius: 4px; background: #E4EDFA; overflow: hidden; }
.hp-score-bar em { display: block; height: 100%; border-radius: 4px;
  width: calc(var(--v, 50) * 1%); transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.22,1,.36,1); transition-delay: var(--st-d, 0ms); }
.st-in .hp-score-bar em, .st-safety .hp-score-bar em { transform: scaleX(1); }
.hp-score b { font-family: var(--font-m); font-size: .82rem; font-weight: 600; width: 2.2rem;
  text-align: right; display: block; }
.hp-alto em { background: linear-gradient(90deg, #0E7A39, #22C55E); }
.hp-alto b { color: #0B6B32; }
.hp-medio em { background: linear-gradient(90deg, #1E5FBF, #3B8FF5); }
.hp-medio b { color: #1B4E9B; }
.hp-bajo em { background: linear-gradient(90deg, #92400E, #D97706); }
.hp-bajo b { color: #8A4B0B; }
.hp-scroll { overflow-x: auto; }
@media (max-width: 720px) { .hp-table th:nth-child(3), .hp-table td:nth-child(3) { display: none; } }

/* --- campos del lead: rejilla de fichas ----------------------------------- */
.hp-fields { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.7rem, 1.4vw, 1rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.hp-field { background: #fff; border: 1px solid rgba(10,15,26,.08); border-radius: 14px;
  padding: 1.1rem 1rem; box-shadow: var(--shadow-1); }
.hp-field svg { width: 20px; height: 20px; color: var(--b2); }
.hp-field h4 { font-size: .84rem; font-weight: 600; color: var(--ink); margin-top: .8rem; letter-spacing: -.01em; }
.hp-field p { font-size: .74rem; color: var(--ink-3); margin-top: .35rem; line-height: 1.5; }
@media (max-width: 1000px) { .hp-fields { grid-template-columns: repeat(3, 1fr); }
/* Son diez fichas: en tres columnas la ultima fila se queda con UNA y dos huecos
   vacios a su derecha (medido a 768 px y en movil apaisado). Se centra, que es
   lo unico que se lee como intencionado. En 5 columnas (>1000 px) y en 2
   (<620 px) las filas salen completas y esta regla no se activa. */
.hp-fields > :last-child:nth-child(3n + 1) { grid-column: 2; } }
@media (max-width: 620px) { .hp-fields { grid-template-columns: repeat(2, 1fr); } }

/* --- problema: tres paneles oscuros --------------------------------------- */
.hp-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.hp-pain { border-radius: var(--radius); padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: linear-gradient(155deg, rgba(59,143,245,.13), rgba(30,95,191,.05));
  border: 1px solid rgba(143,196,255,.20); }
.hp-pain svg { width: 26px; height: 26px; color: var(--b3); }
.hp-pain h3 { font-size: 1.06rem; margin-top: 1.1rem; }
.hp-pain p { color: var(--fg-2); font-size: .92rem; margin-top: .7rem; }
@media (max-width: 900px) { .hp-pains { grid-template-columns: 1fr; } }

/* --- proceso: cuatro pasos con hilo --------------------------------------- */
.hp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); position: relative; }
.hp-step { background: #fff; border: 1px solid rgba(10,15,26,.08); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.3vw, 1.9rem); box-shadow: var(--shadow-1); position: relative; }
.hp-step-n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-family: var(--font-m); font-size: .84rem; font-weight: 600; }
.hp-step h3 { font-size: 1rem; margin-top: 1.1rem; color: var(--ink); }
.hp-step p { color: var(--ink-2); font-size: .88rem; margin-top: .6rem; }
@media (max-width: 1000px) { .hp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp-steps { grid-template-columns: 1fr; } }

/* --- fuentes de datos ------------------------------------------------------ */
.hp-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.hp-source { border-radius: var(--radius); padding: clamp(1.5rem, 2.4vw, 2rem);
  background: rgba(255,255,255,.05); border: 1px solid rgba(143,196,255,.18); }
.hp-source-h { display: flex; align-items: center; gap: .8rem; }
.hp-source-h svg { width: 24px; height: 24px; color: var(--b3); }
.hp-source h3 { font-size: 1.02rem; }
.hp-badge { font-family: var(--font-m); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; margin-top: .9rem; display: inline-block; }
.hp-badge.full { background: rgba(34,197,94,.16); color: #7BE3A6; border: 1px solid rgba(34,197,94,.34); }
.hp-badge.limited { background: rgba(217,119,6,.16); color: #F5C77E; border: 1px solid rgba(217,119,6,.36); }
.hp-source p { color: var(--fg-2); font-size: .9rem; margin-top: .8rem; }
@media (max-width: 900px) { .hp-sources { grid-template-columns: 1fr; } }

/* --- encaje: sí / no ------------------------------------------------------- */
.hp-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.hp-fit > div { border-radius: var(--radius); padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: #fff; border: 1px solid rgba(10,15,26,.08); box-shadow: var(--shadow-1); }
.hp-fit h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; color: var(--ink); }
.hp-fit ul { list-style: none; margin-top: 1.3rem; display: grid; gap: 1rem; }
.hp-fit li { display: flex; gap: .75rem; font-size: .91rem; color: var(--ink-2); align-items: flex-start; }
.hp-fit li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .18rem; }
.hp-yes h3 svg, .hp-yes li svg { color: #0E7A39; }
.hp-no h3 svg, .hp-no li svg { color: #B4530C; }
.hp-no { background: #F7FAFF; }
@media (max-width: 820px) { .hp-fit { grid-template-columns: 1fr; } }

/* --- pie -------------------------------------------------------------------- */
.hp-foot { background: #04080F; border-top: 1px solid rgba(143,196,255,.14); }
.hp-foot .foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem; }
.hp-foot h4 { font-family: var(--font-m); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500; }
.hp-foot ul { list-style: none; margin-top: 1.1rem; display: grid; gap: .55rem; }
.hp-foot a { font-size: .88rem; color: var(--fg-2); transition: color .25s; }
.hp-foot a:hover { color: var(--b3); }
.hp-foot-brand p { color: var(--fg-3); font-size: .87rem; margin-top: 1rem; max-width: 34ch; }
.hp-foot-brand .foot-claim { color: var(--b3); font-family: var(--font-m); font-size: .8rem;
  letter-spacing: .04em; }
.hp-foot-brand h4 { margin-top: 1.6rem; }
.hp-foot-brand li { color: var(--fg-3); font-size: .84rem; line-height: 1.5; word-break: break-word; }
.hp-foot-mark { font-size: clamp(2.4rem, 13vw, 11rem); font-weight: 800; letter-spacing: -.055em;
  line-height: .84; background: linear-gradient(180deg, rgba(143,196,255,.18), rgba(143,196,255,0));
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; padding-bottom: .1em; }
.hp-foot-legal { border-top: 1px solid rgba(143,196,255,.12); padding: 1.3rem 0 2.2rem;
  font-size: .81rem; color: var(--fg-3); }
@media (max-width: 860px) { .hp-foot .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hp-foot .foot-top { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .hp-foot a { min-height: 44px; display: inline-flex; align-items: center; } }

}