/* =====================================================================
   Alendara — página pública.
   Hoja aparte de la aplicación: una página de venta y un panel de trabajo
   no quieren las mismas proporciones, y mezclarlas acaba estropeando las dos.
   ===================================================================== */

:root{
  --brand:#2E7D52;
  --brand-strong:#245F3F;
  --brand-soft:#DCE9E2;
  --sap:#8FD1A8;
  --gold:#D9A441;
  --gold-soft:#F7EAD2;
  --gold-ink:#7A5510;

  --paper:#FFFFFF;
  --paper-2:#F4F7F5;
  --ink:#16211C;
  --muted:#55665D;
  --rule:#DCE6DF;

  --logo:url('../img/alendara-logo.svg');
  --simbolo:url('../img/alendara-simbolo.svg');
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#8FD1A8;
    --brand-strong:#A9DCBD;
    --brand-soft:#17352A;
    --gold:#E2B45C;
    --gold-soft:#31270F;
    --gold-ink:#E2B45C;

    --paper:#0F1613;
    --paper-2:#151E1A;
    --ink:#E6EEE9;
    --muted:#9AACA2;
    --rule:#25322B;

    --logo:url('../img/alendara-logo-blanco.svg');
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Comfortaa','Nunito Sans',sans-serif;text-wrap:balance;margin:0}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.env{max-width:1120px;margin:0 auto;padding:0 24px}

/* --- Cabecera --------------------------------------------------------- */
.cab{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
.cab .env{display:flex;align-items:center;gap:22px;min-height:72px}
.marca{display:block;width:160px;height:38px;background:var(--logo) left center/contain no-repeat;flex-shrink:0}
.marca span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cab nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cab nav a{padding:8px 13px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600;font-size:15px}
.cab nav a:hover{background:var(--paper-2);color:var(--ink)}
.idiomas{display:flex;gap:2px;margin-left:6px;padding-left:12px;border-left:1px solid var(--rule)}
.idiomas a{font-size:12px;text-transform:uppercase;letter-spacing:.07em;padding:6px 7px}
.idiomas a.on{color:var(--brand);background:var(--brand-soft)}

.boton{
  display:inline-block;padding:12px 24px;border-radius:9px;text-decoration:none;
  background:var(--brand);color:#fff;font-weight:700;font-size:16px;border:0;cursor:pointer;
}
@media (prefers-color-scheme: dark){ .boton{color:#0C1A13} }
.boton:hover{background:var(--brand-strong)}
.boton.linea{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}
.boton.linea:hover{background:var(--brand-soft)}

/* --- Portada ---------------------------------------------------------- */
.portada{padding:88px 0 72px;background:
  radial-gradient(1200px 400px at 78% -10%, var(--brand-soft), transparent 65%)}
.portada h1{font-size:clamp(34px,5.6vw,58px);font-weight:700;line-height:1.06;letter-spacing:-.025em;max-width:15ch}
.portada .entradilla{font-size:20px;color:var(--muted);max-width:56ch;margin:22px 0 34px}
.portada .acciones{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.portada .nota{font-size:14.5px;color:var(--muted);margin-top:26px}

/* --- Secciones -------------------------------------------------------- */
section{padding:76px 0}
section.alterna{background:var(--paper-2)}
.rotulo{
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;
}
section h2{font-size:clamp(27px,3.4vw,38px);font-weight:700;letter-spacing:-.018em;max-width:20ch}
section .entradilla{font-size:18px;color:var(--muted);max-width:62ch;margin:16px 0 44px}

/* --- Los cuatro pasos ------------------------------------------------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;counter-reset:paso}
.paso{position:relative;padding-top:22px;border-top:2px solid var(--rule)}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font-family:'Comfortaa',sans-serif;font-size:13px;font-weight:700;color:var(--brand);
  position:absolute;top:-11px;background:var(--paper);padding-right:10px;
}
section.alterna .paso::before{background:var(--paper-2)}
.paso h3{font-size:18px;margin:0 0 8px}
.paso p{color:var(--muted);font-size:15.5px;margin:0}

/* --- Argumentos ------------------------------------------------------- */
.argumentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.arg{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:26px}
section.alterna .arg{background:var(--paper)}
.arg h3{font-size:19px;margin:0 0 10px}
.arg p{color:var(--muted);font-size:15.5px;margin:0}
.arg .marca-agua{
  width:34px;height:34px;background:var(--simbolo) center/contain no-repeat;
  opacity:.9;margin-bottom:16px;
}

/* --- Bloque del scoring ----------------------------------------------- */
.scoring{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:48px;align-items:center}
.formula{
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--brand);
  border-radius:10px;padding:22px 24px;font-family:ui-monospace,Consolas,monospace;
  font-size:14.5px;line-height:2.1;overflow-x:auto;
}
.formula em{color:var(--muted);font-style:normal}
.matriz-demo{width:100%;border-collapse:collapse;font-size:14px}
.matriz-demo th{
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  padding:9px 8px;text-align:center;font-weight:700;
}
.matriz-demo td{padding:11px 8px;text-align:center;border:1px solid var(--rule);font-weight:700;
  font-family:'Comfortaa',sans-serif}
.matriz-demo td.eti{font-family:inherit;font-weight:400;color:var(--muted);font-size:13px;border:0;text-align:right;padding-right:14px}
.matriz-demo .a{background:var(--brand-soft);color:var(--brand)}
.matriz-demo .b{background:var(--paper-2)}
.matriz-demo .c{color:var(--muted)}

/* --- Idiomas ---------------------------------------------------------- */
.lenguas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.lengua{
  border:1px solid var(--rule);border-radius:999px;padding:8px 18px;
  font-weight:700;font-size:15px;background:var(--paper);
}

/* --- Cierre ----------------------------------------------------------- */
.cierre{text-align:center;padding:88px 0}
.cierre h2{margin:0 auto;max-width:18ch}
.cierre .entradilla{margin:18px auto 34px}

/* --- Pie -------------------------------------------------------------- */
.pie{border-top:1px solid var(--rule);padding:34px 0;color:var(--muted);font-size:14.5px}
.pie .env{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}

@media (max-width:780px){
  .scoring{grid-template-columns:1fr;gap:32px}
  section{padding:56px 0}
  .portada{padding:56px 0 48px}
}

/* --- La comparativa con el mercado ------------------------------------- */
/* En rejilla de dos columnas y filas emparejadas: cada afirmación de la
   izquierda tiene enfrente, a la misma altura, lo que hace Alendara. En dos
   listas sueltas la comparación se pierde en cuanto una línea es más larga.

   La izquierda va apagada a propósito. No es un ataque a nadie: es el punto
   de partida común, y por eso lleva un punto y no una cruz. */
.comparativa{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 20px;margin:34px 0 0;align-items:stretch;
}
.comparativa .cabecera{
  font-family:var(--titulo,inherit);font-weight:700;font-size:1rem;
  padding:0 0 12px;
}
.comparativa .cabecera.ellos{color:var(--muted)}
.comparativa .cabecera.nosotros{color:var(--brand)}

.comparativa .celda{
  padding:16px 18px;line-height:1.6;font-size:.95rem;
  border-top:1px solid var(--rule);
  display:flex;gap:10px;
}
.comparativa .celda::before{font-weight:700;flex:none}
.comparativa .celda.ellos{color:var(--muted)}
.comparativa .celda.ellos::before{content:"·";font-size:1.4em;line-height:1.1}
.comparativa .celda.nosotros::before{content:"→";color:var(--brand)}
/* Solo la columna de la derecha se levanta del fondo: es donde empieza el
   producto, y la izquierda es el suelo que comparte con los demás. */
.comparativa .celda.nosotros{background:var(--paper)}
.comparativa .celda.nosotros:first-of-type{border-top-left-radius:12px;border-top-right-radius:12px}

.nota-humana{margin-top:26px;margin-bottom:0;max-width:70ch}

@media (max-width:720px){
  /* Apiladas, la pareja se lee seguida: primero dónde acaban, debajo dónde
     sigue. Sin la cabecera repitiéndose cinco veces. */
  .comparativa{grid-template-columns:1fr;gap:0}
  .comparativa .cabecera.nosotros{display:none}
  .comparativa .cabecera.ellos{padding-bottom:6px}
  .comparativa .celda{padding:12px 14px}
  .comparativa .celda.ellos{border-top:1px solid var(--rule);padding-bottom:4px}
  .comparativa .celda.nosotros{border-top:0;padding-top:4px;background:transparent}
}