/* ============================================
   LIORA — PÁGINA INICIO (CSS depurado)
   Cambios:
   1) Comentado y ordenado por módulos
   2) Reglas duplicadas eliminadas (especialmente #diferenciales)
   3) Espaciado entre secciones: 20px
   4) Ajustes menores de legibilidad
   ============================================ */


/* =========================================================
   0) REGLAS GENERALES / UTILIDADES
   - Espacio entre secciones (20px)
   ========================================================= */
.section + .section { 
  margin-top: 70px;                 /* separación solo entre secciones contiguas */
}

main {
  padding: 0;                       /* mantiene el hero pegado al top si así se desea */
}

/* =========================================================
   1) MÓDULO: HERO (imagen a 100% con overlay)
   - Fondo con .hero-bg + capa de degradados
   - Tipografía con sombras sutiles
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;               /* contexto para pseudo-elementos */
  min-height: 64svh;
  padding: clamp(48px, 6vw, 80px) 24px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}

/* Imagen de fondo ocupando todo el contenedor */
.hero-bg {
  position: absolute; 
  inset: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;                /* recorta sin deformar */
  object-position: center;
  z-index: -2;
  /* Control fino con variables (puedes sobreescribir inline) */
  filter:
    brightness(var(--hero-brightness, .38))
    saturate(var(--hero-saturate, .95))
    contrast(var(--hero-contrast, 1.05));
  transform: scale(var(--hero-scale, 1.02));
}

/* Overlay de degradados para mejorar contraste del texto */
.hero::after {
  content: "";
  position: absolute; 
  inset: 0; 
  z-index: -1;
  background:
    radial-gradient(1000px 520px at 12% 8%, rgba(184,138,45,.18), transparent 55%),
    radial-gradient(900px 480px at 88% 12%, rgba(210,180,108,.12), transparent 50%),
    linear-gradient(
      180deg,
      rgba(10,18,32, var(--hero-overlay-top, .70)),
      rgba(10,18,32, var(--hero-overlay-bottom, .82))
    );
}

/* Contenido centrado y acotado en ancho */
.hero-inner { 
  max-width: 900px; 
  margin-inline: auto; 
}

/* Kicker (pequeño titular superior) */
.hero .kicker {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  font-size: 25px; 
  font-weight: 800; 
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--brand, #B88A2D);
}

/* Titular principal */
.hero h1 {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.05; 
  font-weight: 800; 
  letter-spacing: -.5px;
  margin: .25rem 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  color: var(--text, #EDE8D9);
}

/* Lead / subtítulo */
.hero .lead {
  font-size: clamp(16px, 2.2vw, 20px);
  margin: .4rem 0 1.1rem;
  color: color-mix(in oklab, var(--text, #EDE8D9) 88%, black);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* Botonera (scopeada al hero) */
.hero .actions { 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
  justify-content: center; 
}

.hero .btn {
  display: inline-flex; 
  align-items: center; 
  gap: 10px;
  padding: 14px 18px; 
  border-radius: 14px;
  font-weight: 800; 
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}

.hero .btn-primary {
  background: linear-gradient(135deg, var(--brand, #B88A2D), var(--brand-2, #D2B46C));
  color: #ffffff;
}

.hero .btn-primary:hover { 
  filter: saturate(1.05); 
  transform: translateY(-1px); 
}

.hero .btn-outline {
  background: transparent;
  color: var(--text, #EDE8D9);
  border: 1px solid var(--line, rgba(255,255,255,.14));
}

.hero .btn-outline:hover { 
  border-color: var(--brand, #B88A2D); 
}

/* Accesibilidad / rendimiento */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg { transition: transform 10s ease; }
  .hero:hover .hero-bg { transform: scale(1.06); }
}

/* Responsivo hero */
@media (max-width: 520px) {
  .hero { min-height: 58svh; }
  .hero .actions { gap: 10px; }
}


/* =========================================================
   2) SECCIONES: Quiénes / Por qué / Servicios / CTA
   - Paleta con variables (fallbacks incluidos)
   ========================================================= */

/* ---------- QUIÉNES SOMOS ---------- */
#quienes .card {
  background: var(--surface, #0F1E33);
  border: 1px solid var(--line, #24324A);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.35));
  margin-top: 50px;
}

#quienes .kicker {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  font-size: 13px; 
  font-weight: 800; 
  letter-spacing: .6px; 
  text-transform: uppercase;
  color: var(--brand, #B88A2D);
}

#quienes .title {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15; 
  font-weight: 800;
  margin: .35rem 0 .4rem; 
  color: var(--text, #EDE8D9);
}

#quienes .muted { 
  color: var(--muted, #B9B2A3); 
}


/* ---------- POR QUÉ ASESORARTE ---------- */
#por-que .why {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(18px, 3vw, 28px);
}

@media (max-width: 900px) {
  #por-que .why { grid-template-columns: 1fr; }
}

#por-que .why > .card {
  background: linear-gradient(180deg, var(--surface, #0F1E33), var(--panel, #12233A));
  border: 1px solid var(--line, #24324A);
  border-radius: 16px;
  box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.35));
}

#por-que .kicker {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  font-size: 13px; 
  font-weight: 800; 
  letter-spacing: .6px; 
  text-transform: uppercase;
  color: var(--brand, #B88A2D);
}

#por-que .title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800; 
  margin: .1rem 0 .5rem; 
  color: var(--text, #EDE8D9);
}

#por-que ul {
  margin: .4rem 0 0; 
  padding-left: 1.1rem;
  color: var(--text, #EDE8D9);
}

#por-que li { margin: .35rem 0; }

#por-que .note { 
  margin-top: .6rem; 
  color: var(--muted, #B9B2A3); 
}

#por-que ol {
  margin: .2rem 0 0; 
  padding-left: 1.25rem; 
  color: var(--muted, #B9B2A3);
}

#por-que ol li { margin: .35rem 0; }

.nuestras-forma{
    padding: 25px;
}

/* ---------- SERVICIOS ---------- */
#servicios .services-head {
  text-align: center; 
  max-width: 820px; 
  margin: 0 auto 1.2rem;
}

#servicios .services-head .kicker {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  font-size: 13px; 
  font-weight: 800; 
  letter-spacing: .6px; 
  text-transform: uppercase;
  color: var(--brand, #B88A2D);
}

#servicios .services-head .title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800; 
  margin: .25rem 0 .35rem; 
  color: var(--text, #EDE8D9);
}

#servicios .services-head .muted { 
  color: var(--muted, #B9B2A3); 
}

/* Grid de tarjetas de servicio */
#servicios .services-wrap {
  display: grid; 
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 1rem;
}

#servicios .service-card {
  background: linear-gradient(180deg, var(--surface, #0F1E33), var(--panel, #12233A));
  border: 1px solid var(--line, #24324A);
  border-radius: 14px; 
  padding: 1rem 1.2rem;
  display: grid; 
  grid-template-columns: 52px 1fr; 
  gap: 1rem; 
  align-items: flex-start;
  box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.35));
}

#servicios .svc-ico {
  width: 52px; 
  height: 52px; 
  border-radius: 12px; 
  display: grid; 
  place-items: center;
  border: 1px solid var(--line, #24324A);
  background: rgba(210,180,108,.08);  /* dorado tenue */
  font-size: 1.25rem;
}

#servicios .service-card h3 {
  margin: .15rem 0 .2rem; 
  font-size: 1.05rem; 
  color: var(--text, #EDE8D9);
}

#servicios .service-card p { 
  margin: 0 0 .55rem; 
  color: var(--muted, #B9B2A3); 
}

#servicios .svc-cta {
  font-weight: 800; 
  text-decoration: none; 
  display: inline-flex; 
  gap: .35rem; 
  align-items: center;
  color: var(--brand-2, #D2B46C);
}

#servicios .svc-cta::after {
  content: "→"; 
  transition: transform .2s ease;
}

#servicios .svc-cta:hover::after { 
  transform: translateX(2px); 
}


/* ---------- CTA FINAL (Agenda) ---------- */
#agenda .cta-panel {
  border-radius: 24px;
  padding: clamp(22px, 3vw, 36px);
  text-align: center;
  background: linear-gradient(135deg, var(--brand, #B88A2D), var(--brand-2, #D2B46C));
  color: #0A1220;
  border: 1px solid rgba(10,18,32,.22);
  box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.35));
}

#agenda .cta-panel h2 {
  font-size: clamp(22px, 3vw, 32px);
  margin: .2rem 0 .6rem;
}


/* =========================================================
   3) DIFERENCIALES (#diferenciales)
   - Card con degradado sutil
   - Features en grid y chips tipo pill
   - NOTA: Se eliminaron duplicados de estilos previos
   ========================================================= */

/* Contenedor tipo card (mantiene el dashed inline-coherente) */
#diferenciales .card {
  position: relative;
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px dashed var(--line, #24324A);
  overflow: hidden;
  isolation: isolate;
}

/* Falso fondo degradado detrás de la card */
#diferenciales .card::before {
  content: "";
  position: absolute; 
  inset: 0; 
  z-index: -1; 
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(210,180,108,.10), transparent 45%),
    radial-gradient(100% 130% at 100% 0%, rgba(184,138,45,.08), transparent 50%),
    linear-gradient(180deg, var(--surface, #0F1E33), var(--panel, #12233A));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Encabezados centrados */
#diferenciales .title {
  text-align: center;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15; 
  font-weight: 800;
  color: var(--text, #EDE8D9);
  margin: .2rem 0 .4rem;
}

#diferenciales .muted {
  text-align: center;
  color: var(--muted, #B9B2A3);
}

/* Grid de features con cortes responsivos claros */
#diferenciales .features {
  display: grid; 
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

@media (max-width: 1100px) { 
  #diferenciales .features { grid-template-columns: repeat(3, 1fr); } 
}

@media (max-width: 880px) {  
  #diferenciales .features { grid-template-columns: repeat(2, 1fr); } 
}

@media (max-width: 560px) {  
  #diferenciales .features { grid-template-columns: 1fr; } 
}

/* Tarjeta individual de diferencial */
#diferenciales .feature {
  background: linear-gradient(180deg, #0E1C33, #0B1A2E);
  border: 1px solid var(--line, #24324A);
  border-radius: 18px;
  padding: clamp(16px, 2vw, 22px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  color: var(--text, #EDE8D9);
  min-height: 160px;
  display: grid; 
  align-content: start; 
  gap: 6px;
}

/* Icono cuadrado con degradado dorado */
#diferenciales .feature .icon {
  width: 48px; 
  height: 48px; 
  border-radius: 12px;
  display: grid; 
  place-items: center;
  background: linear-gradient(135deg, var(--brand, #B88A2D), var(--brand-2, #D2B46C));
  color: #0A1220;
  font-size: 1.12rem;
  box-shadow: 0 8px 20px rgba(184,138,45,.35), inset 0 1px 0 rgba(255,255,255,.25);
  margin-bottom: .4rem;
}

#diferenciales .feature h3 {
  margin: .1rem 0 .25rem;
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 800;
}

#diferenciales .feature .muted {
  text-align: left;
  color: var(--muted, #B9B2A3);
}

/* Chips de claims/atributos */
#diferenciales .chips {
  display: flex; 
  flex-wrap: wrap; 
  gap: .6rem;
  margin-top: 16px;
  justify-content: center;
}

#diferenciales .chips span {
  --chip-bg: rgba(8,16,32,.55);
  display: inline-flex; 
  align-items: center; 
  gap: .45rem;
  padding: .5rem .8rem;
  font-size: .92rem; 
  line-height: 1;
  border-radius: 999px;
  color: var(--text, #EDE8D9);
  background: var(--chip-bg);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Check decorativo tipo “pill” */
#diferenciales .chips span::before {
  content: "✔";
  display: grid; 
  place-items: center;
  width: 18px; 
  height: 18px; 
  border-radius: 999px;
  font-size: .72rem; 
  line-height: 1;
  background: linear-gradient(135deg, #7C9CFF, #6EE7D2);
  color: #0A1220;
  box-shadow: 0 6px 12px rgba(124,156,255,.35);
}

/* Botón ghost mejorado */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.1rem;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  color: var(--text, #EDE8D9);
  font-weight:800; text-decoration:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

/* Hover: se “llena” con el dorado Liora */
.btn-ghost:hover{
  background: linear-gradient(135deg, var(--brand, #B88A2D), var(--brand-2, #D2B46C));
  color:#12233A;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Active + Focus accesible */
.btn-ghost:active{ transform: translateY(0); }
.btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,138,45,.45), 0 10px 24px rgba(0,0,0,.28);
}

/* Tamaño opcional (quítalo si no lo necesitas) */
.btn-ghost.btn-lg{ padding:1rem 1.25rem; border-radius:16px; font-size:1.05rem; }

.hero{
  /* min-height: auto (por defecto) */
  padding: clamp(48px, 6vw, 80px) 24px;
}