/* ═══════════════════════════════════════════════════════════════════════════
   Sistema editorial de Luxury Punta — portado de luxy.lat

   "Lujo silencioso: el color de marca aparece en un filete y un hover, nunca
   en un botón gritando. La foto manda."  ← esa es la regla de la casa y es la
   que se siguió acá. Nada de tarjetas con sombra, nada de bronce en bloques:
   filetes de 1px, mucho aire y una serif con carácter.

   Lo usan /vende-tu-desarrollo/ y /vende-con-nosotros/. Si se suma otra
   página con este registro, alcanza con ponerle id="lp-editorial" al <main>
   y cargar esta hoja con $cssExtra.

   🔴 POR QUÉ TODO CUELGA DE #lp-editorial
      luxury-je.css tiene una regla nuclear
      html body *:not(i):not([class*="icon"])…{ font-family:Inter !important }
      con especificidad (0,10,2). Un id la vence por la componente A, que pesa
      más que cualquier cantidad de clases. Sin el id, esta página se vería en
      Inter y todo el trabajo tipográfico se pierde en silencio.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'InterVar'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/inter.woff2') format('woff2');
}

#lp-editorial{
  --arena:#F5F2EC; --arena-2:#EDE8DF;
  --noche:#101214; --tinta:#1A1916;
  --piedra:#8B867C; --bronce:#9C7C4F;
  --linea:#DCD5C9; --linea-oscura:#2A2E32;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:40px; --e6:64px; --e7:96px;
  --ancho:1280px; --ancho-texto:68ch;

  background:var(--arena); color:var(--tinta);
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* La sans, sobre TODO lo de adentro; se exceptúan los iconos de lineicons. */
/* Los titulares quedan EXCLUIDOS de esta regla con :not(h1):not(h2):not(h3).
   Sin esa exclusión ganaba ella —tres :not() la ponen en (1,3,0) contra el
   (1,0,1) de la regla de titulares— y todo salía en Inter. */
#lp-editorial,
#lp-editorial *:not(i):not([class*="lni"]):not([class*="icon"]):not(h1):not(h2):not(h3):not(.serif){
  font-family:var(--sans) !important;
}
#lp-editorial h1,#lp-editorial h2,#lp-editorial h3,
#lp-editorial .serif{
  font-family:var(--serif) !important;
  font-weight:400 !important; line-height:1.08 !important;
  letter-spacing:-.015em !important; margin:0;
  color:var(--tinta);
}
/* Los tamaños también van forzados: el sitio trae reglas propias para h1/h2. */
#lp-editorial h1{font-size:clamp(40px,6.2vw,82px) !important}
#lp-editorial h2{font-size:clamp(30px,4vw,50px) !important}
#lp-editorial h3{font-size:clamp(20px,2.2vw,27px) !important;line-height:1.2 !important}
/* El sitio trae reglas propias que bajan el cuerpo a 14px; acá manda el
   ritmo de luxy.lat. Las medidas específicas (.hero__baja, .canales__grid p…)
   vienen más abajo y pisan a ésta por orden. */
#lp-editorial p,
#lp-editorial li{font-size:17px !important;line-height:1.65 !important;margin:0}
#lp-editorial p{margin:0}
#lp-editorial img{max-width:100%;height:auto;display:block}
#lp-editorial a{color:inherit;text-decoration:none}

#lp-editorial .caja{max-width:var(--ancho);margin:0 auto;padding:0 24px}
@media (min-width:900px){ #lp-editorial .caja{padding:0 48px} }

#lp-editorial .kicker{font-size:11px !important;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--bronce)}
#lp-editorial .plomo{color:var(--piedra)}
#lp-editorial .medida{max-width:var(--ancho-texto)}
#lp-editorial .filete{display:block;height:1px;background:var(--linea);border:0;margin:0}
#lp-editorial .filete--bronce{background:var(--bronce);width:56px;height:2px}

/* ── botones ── */
#lp-editorial .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  padding:16px 30px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;text-align:center;
}
#lp-editorial .btn--claro{background:var(--arena);color:var(--tinta) !important}
#lp-editorial .btn--claro:hover{background:#fff}
#lp-editorial .btn--fantasma{background:transparent;color:var(--arena) !important;border-color:var(--linea-oscura)}
#lp-editorial .btn--fantasma:hover{border-color:var(--bronce);color:var(--bronce) !important}
#lp-editorial .btn--solido{background:var(--tinta);color:var(--arena) !important}
#lp-editorial .btn--solido:hover{background:#000}
#lp-editorial .btn--ancho{width:100%}

/* ── secciones ── */
#lp-editorial .seccion{padding:var(--e7) 0}
@media (max-width:760px){ #lp-editorial .seccion{padding:var(--e6) 0} }
#lp-editorial .seccion--oscura{background:var(--noche);color:var(--arena)}
#lp-editorial .seccion--oscura h1,
#lp-editorial .seccion--oscura h2,
#lp-editorial .seccion--oscura h3{color:var(--arena)}
#lp-editorial .seccion--oscura .plomo{color:#9AA0A6}
#lp-editorial .seccion--oscura .filete{background:var(--linea-oscura)}
#lp-editorial .seccion--oscura .filete--bronce{background:var(--bronce)}
#lp-editorial .enc{display:flex;flex-direction:column;gap:var(--e3);margin-bottom:var(--e5)}

/* ── portada: la foto manda ── */
#lp-editorial .hero{position:relative;overflow:hidden;background:var(--noche);color:var(--arena);
  padding:clamp(80px,14vh,160px) 0 clamp(70px,11vh,120px)}
#lp-editorial .hero__foto{position:absolute;inset:0;z-index:0;pointer-events:none}
#lp-editorial .hero__foto img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* Oscuro donde va el texto, transparente donde están las torres. */
#lp-editorial .hero__foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,18,20,.93) 0%,rgba(16,18,20,.86) 26%,
    rgba(16,18,20,.55) 54%,rgba(16,18,20,.18) 78%,rgba(16,18,20,.06) 100%)}
#lp-editorial .hero__in{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--e3);max-width:1000px}
#lp-editorial .hero h1{margin-top:var(--e2);color:var(--arena)}
#lp-editorial .hero__baja{font-size:clamp(17px,2vw,20px) !important;color:#A8AEB4;margin-top:var(--e3);max-width:64ch}
#lp-editorial .hero__baja + .hero__baja{margin-top:var(--e2)}
#lp-editorial .hero__baja strong{color:var(--arena);font-weight:600}
#lp-editorial .hero__ctas{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4)}
@media (max-width:760px){
  #lp-editorial .hero__foto img{object-position:center 30%}
  #lp-editorial .hero__foto::after{background:linear-gradient(180deg,
    rgba(16,18,20,.25) 0%,rgba(16,18,20,.60) 34%,rgba(16,18,20,.88) 62%,rgba(16,18,20,.95) 100%)}
}

/* ── la base: cifras grandes, sin cajas ── */
#lp-editorial .cifras{display:grid;gap:var(--e5) var(--e4);grid-template-columns:repeat(2,1fr);margin-top:var(--e5)}
@media (min-width:860px){ #lp-editorial .cifras{grid-template-columns:repeat(4,1fr)} }
#lp-editorial .cifra{border-top:1px solid var(--linea);padding-top:var(--e3)}
#lp-editorial .cifra__n{display:block;font-family:var(--serif) !important;font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--tinta)}
#lp-editorial .cifra__t{display:block;margin-top:10px;font-size:14px;color:var(--piedra);line-height:1.45}
#lp-editorial .cifras__pie{margin-top:var(--e4);font-size:13px !important;color:var(--piedra)}

/* ── pasos ── */
#lp-editorial .pasos{list-style:none;margin:0;padding:0;display:grid;gap:var(--e4);grid-template-columns:1fr}
@media (min-width:860px){ #lp-editorial .pasos{grid-template-columns:repeat(4,1fr)} }
#lp-editorial .pasos li{display:flex;flex-direction:column;gap:var(--e2);border-top:1px solid var(--linea);padding-top:var(--e3)}
#lp-editorial .pasos__n{font-family:var(--serif) !important;font-size:13px !important;color:var(--bronce);letter-spacing:.1em}

#lp-editorial .canales{margin-top:var(--e7)}
#lp-editorial .canales__t{margin-bottom:var(--e4)}
#lp-editorial .canales__grid{display:grid;gap:var(--e4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#lp-editorial .canales__grid strong{display:block;margin-bottom:8px;font-size:15px}
#lp-editorial .canales__grid p{font-size:14.5px !important}

/* ── IA + personas ── */
#lp-editorial .ia{background:var(--arena-2)}
#lp-editorial .ia__in{display:grid;gap:var(--e5);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){ #lp-editorial .ia__in{grid-template-columns:1fr auto 1fr;gap:var(--e6)} }
#lp-editorial .ia__col{display:flex;flex-direction:column;gap:var(--e2)}
#lp-editorial .ia__mas{font-family:var(--serif) !important;font-size:30px;color:var(--bronce);text-align:center;padding-top:var(--e5)}

/* ── diferencias ── */
#lp-editorial .dif{display:grid;gap:var(--e5);grid-template-columns:1fr}
@media (min-width:860px){ #lp-editorial .dif{grid-template-columns:repeat(3,1fr);gap:var(--e4)} }
#lp-editorial .dif > div{display:flex;flex-direction:column;gap:var(--e2);border-top:1px solid var(--linea-oscura);padding-top:var(--e3)}

/* ── el trato ── */
#lp-editorial .trato{background:var(--noche);color:var(--arena)}
#lp-editorial .trato h2{color:var(--arena)}
#lp-editorial .trato .plomo{color:#9AA0A6}
#lp-editorial .trato__cambio{display:grid;gap:var(--e4);align-items:center;grid-template-columns:1fr;margin-top:var(--e5)}
@media (min-width:900px){ #lp-editorial .trato__cambio{grid-template-columns:1fr auto 1fr} }
#lp-editorial .trato__lado{border:1px solid var(--linea-oscura);padding:var(--e4)}
#lp-editorial .trato__lado--vos{border-color:var(--bronce)}
#lp-editorial .trato__lado ul{list-style:none;margin:var(--e3) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
#lp-editorial .trato__lado li{font-size:16px !important;padding-left:20px;position:relative;line-height:1.5}
#lp-editorial .trato__lado li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--bronce)}
/* El "vos ponés" es una sola línea y va en serif grande: es el corazón del trato. */
#lp-editorial .trato__lado--vos li{font-family:var(--serif) !important;font-size:24px !important;line-height:1.25}
#lp-editorial .trato__nota{margin-top:var(--e3);font-size:14px !important}
#lp-editorial .trato__x{text-align:center;font-size:26px;color:var(--bronce)}
#lp-editorial .trato__fee{margin-top:var(--e5);border-top:1px solid var(--linea-oscura);padding-top:var(--e4)}
#lp-editorial .trato__fee-n{font-family:var(--serif) !important;font-size:clamp(24px,3.2vw,38px);margin:var(--e2) 0;line-height:1.2;color:var(--arena)}
#lp-editorial .trato__fee-n strong{font-weight:400;color:var(--bronce)}

/* ── criterios ── */
#lp-editorial .criterios{background:var(--arena-2)}
#lp-editorial .criterios__in{display:grid;gap:var(--e5)}
@media (min-width:900px){ #lp-editorial .criterios__in{grid-template-columns:1fr 1fr;gap:var(--e6)} }
#lp-editorial .criterios__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#lp-editorial .criterios__lista li{padding:var(--e3) 0;border-bottom:1px solid var(--linea);font-size:16px !important;padding-left:26px;position:relative}
#lp-editorial .criterios__lista li::before{content:"";position:absolute;left:0;top:1.35em;width:12px;height:1px;background:var(--bronce)}

/* ── formulario ── */
#lp-editorial .eval{display:grid;gap:var(--e5);align-items:start}
@media (min-width:980px){ #lp-editorial .eval{grid-template-columns:1fr 500px;gap:var(--e6)} }
#lp-editorial .eval__puntos{list-style:none;margin:var(--e4) 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
#lp-editorial .eval__puntos li{font-size:14.5px !important;color:#A8AEB4;padding-left:20px;position:relative}
#lp-editorial .eval__puntos li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--bronce)}

#lp-editorial .campo{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--e3)}
#lp-editorial .campo label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9AA0A6;font-weight:600}
#lp-editorial .campo input,#lp-editorial .campo select,#lp-editorial .campo textarea{
  width:100%;font-size:16px;color:var(--tinta);background:#fff;
  border:1px solid var(--linea);border-radius:2px;padding:14px 15px;transition:border-color .2s ease;
}
#lp-editorial .campo input:focus,#lp-editorial .campo select:focus,#lp-editorial .campo textarea:focus{
  outline:none;border-color:var(--bronce);
}
#lp-editorial .campo input[type="file"]{padding:11px;font-size:13.5px;background:#fff}
#lp-editorial .duo{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media (min-width:620px){ #lp-editorial .duo{grid-template-columns:1fr 1fr} }
#lp-editorial .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#lp-editorial .aviso{background:#3A2321;border-left:2px solid #A5615B;color:#E8C9C4;padding:13px 15px;margin-bottom:var(--e3);font-size:14px}
#lp-editorial :focus-visible{outline:2px solid var(--bronce);outline-offset:3px}
#lp-editorial .btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Variantes usadas por /vende-con-nosotros/ ──────────────────────────── */
/* Tres pasos en vez de cuatro. */
@media (min-width:860px){ #lp-editorial .pasos--tres{grid-template-columns:repeat(3,1fr)} }

/* El aviso de error también tiene que leerse sobre fondo claro. */
#lp-editorial .aviso--claro{background:#F6EAE8;border-left:2px solid #A5615B;color:#7A322B}

/* Nota chica debajo de un campo (las fotos elegidas). */
#lp-editorial .campo__nota{margin-top:7px;font-size:13px !important;color:var(--bronce);min-height:18px}

/* El formulario sobre fondo claro: los rótulos en piedra, no en gris de fondo oscuro. */
#lp-editorial .criterios .campo label{color:var(--piedra)}