/* ===== Theme Meraki v2 — Aurora ===== */
:root{
  --brand-ink:#2d276d; --brand-oc:#866436; --brand-cu:#b57e55;
  --muted:#f7f5f1; --dark:#171538; --navH:74px; scroll-padding-top:var(--navH);
}

.bg-muted{background:var(--muted)!important}
.btn-pill{border-radius:999px;padding:.74rem 1.25rem;font-weight:900}
.btn-brand{
  --bs-btn-color:#1b0f06; --bs-btn-bg:var(--brand-cu); --bs-btn-border-color:var(--brand-cu);
  --bs-btn-hover-bg:#c8946c; --bs-btn-hover-border-color:#c8946c; --bs-btn-active-bg:#a46f4c;
  box-shadow:0 12px 28px rgba(181,126,85,.28)
}
.btn-outline-brand{
  --bs-btn-color:var(--brand-oc); --bs-btn-border-color:var(--brand-oc);
  --bs-btn-hover-bg:var(--brand-oc); --bs-btn-hover-border-color:var(--brand-oc); --bs-btn-hover-color:#fff;
  border-width:2px
}

/* Navbar sólido (sin perder blur en desktop) */
.nav-meraki{background:#fff;border-bottom:3px solid var(--brand-oc);box-shadow:0 10px 28px rgba(0,0,0,.06)}
.nav-meraki .nav-link{color:#495066!important;font-weight:700}
.nav-meraki .nav-link:hover{color:var(--brand-cu)!important}

/* HERO diagonal (sin invertir ola) */
.hero-aurora{
  position:relative; color:#fff; overflow:hidden;
  padding-top:calc(var(--navH) + 2.2rem); padding-bottom:4.8rem;
  background:
    radial-gradient(1200px 500px at -10% 0%, rgba(181,126,85,.55), transparent 55%),
    radial-gradient(900px 400px at 110% 10%, rgba(45,39,109,.50), transparent 55%),
    linear-gradient(180deg, #332e84 0%, #29256e 45%, #2d276d 100%);
}
.hero-aurora .cut{
  position:absolute; left:0; right:0; bottom:0; height:160px; z-index:0;
  background:linear-gradient(180deg, transparent 0, transparent 70%, var(--muted) 70%, var(--muted) 100%);
  clip-path:polygon(0 45%, 100% 0, 100% 100%, 0 100%); /* diagonal correcta */
}
.hero-aurora .container{position:relative; z-index:2}
.hero-badge{display:inline-block;background:linear-gradient(90deg,var(--brand-cu),var(--brand-oc));color:#1b0f06;font-weight:900;padding:.42rem .8rem;border-radius:.75rem}
.hero-title{font-weight:900;letter-spacing:.2px;text-shadow:0 10px 24px rgba(0,0,0,.5)}
.hero-sub{opacity:.95}

/* Títulos de sección */
.py-6{padding-block:4.8rem}
.section-head{font-weight:900;color:var(--brand-ink)}
.section-head::after{content:"";display:block;width:160px;height:4px;margin:.6rem auto 0;background:linear-gradient(90deg,var(--brand-cu),var(--brand-oc))}

/* Cards asimétricas */
.card-soft{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:1rem;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.svc-card{padding:1.35rem;transition:.15s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.14)}
.svc-icon{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;margin-bottom:.6rem;font-size:1.3rem;color:#221a54;background:rgba(45,39,109,.08);border:1px solid rgba(45,39,109,.18)}

/* Programas con borde degradado */
.pack-card{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--brand-cu),var(--brand-oc)) border-box;
  border:2px solid transparent;border-radius:1.1rem;padding:1.25rem
}
.pack-badge{display:inline-block;background:linear-gradient(90deg,var(--brand-cu),var(--brand-oc));color:#1b0f06;font-weight:900;padding:.36rem .72rem;border-radius:.72rem;margin-bottom:.7rem}
.pack-list{margin:0 0 1rem 0;padding-left:1.1rem}
.pack-list li{margin:.35rem 0}

/* Bloque “Mérito/Por qué Meraki” con grid editorial */
.why .i{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(45,39,109,.12);color:var(--brand-ink);margin-right:.7rem}

/* Formulario PRO (fijo) */
.contact-card{padding:1.5rem}
.rd-mailform .form-wrap{position:relative}
.rd-mailform .form-input{
  height:52px;border-radius:.95rem;border:1px solid #e4e5ea;background:#fff;
  padding:0 16px;font-size:16px;transition:border-color .15s,box-shadow .15s
}
.rd-mailform textarea.form-input{height:140px;padding:14px 16px;resize:vertical}
.rd-mailform .form-input::placeholder{color:#9aa0aa}
.rd-mailform .form-input:focus{border-color:#a17b58;box-shadow:0 0 0 .22rem rgba(181,126,85,.18)}
.rd-mailform .btn{height:52px;border-radius:999px;font-weight:900}
@media (min-width: 992px){ #contacto .d-grid{align-self:end} }

/* Podcast tarjeta destacada */
.podcast-card{background:linear-gradient(180deg,#fff, #fbfaf8);border:1px solid rgba(0,0,0,.06);border-radius:1rem;box-shadow:0 10px 24px rgba(0,0,0,.08);padding:1rem}


/* ===== Metodología: badges, conectores y mejor alineación ===== */
.methodology{ counter-reset: step; } /* resetea contador */

.methodology .step{
  position:relative; padding:1.25rem 1.25rem 1.25rem 1.25rem;
  border:1px solid rgba(0,0,0,.06); border-radius:1rem; background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.08); min-height:170px;
}

/* Nº autogenerado como badge */
.methodology .step::before{
  counter-increment: step; content: counter(step);
  position:absolute; top:-18px; left:22px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; color:#1b0f06;
  background:linear-gradient(135deg,var(--brand-cu),var(--brand-oc));
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Conector entre pasos (solo desktop) */
@media (min-width: 768px){
  .methodology .step:not(:last-child)::after{
    content:""; position:absolute; top:50%; right:-24px; transform:translateY(-50%);
    width:48px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--brand-oc),var(--brand-cu));
    opacity:.7;
  }
}

/* Título del paso */
.methodology .step-title{
  margin-top:.6rem; margin-bottom:.35rem; font-weight:800; color:var(--brand-ink);
}

/* Ajustes finos de texto */
.methodology .step p{ line-height:1.55; color:#2b2f43; }

/* ===== CONTACTO – FIX TOTAL SIN CAMBIAR HTML ===== */

/* 1) FORM: usa todo el ancho del card */
#contacto .contact-card { padding: 32px; }
#contacto .contact-card .form-stack{
  max-width: unset !important;   /* cancela límites previos */
  width: 100%;
  margin: 0;
}

/* Campos más grandes y consistentes */
#contacto .contact-card .form-wrap{ position: relative; }
#contacto .contact-card .form-input{
  width: 100%;
  height: 60px;
  font-size: 17px;
  border-radius: 14px;
  border: 1px solid #e3e5ea;
  background: #fff;
  padding: 0 18px;
  transition: border-color .15s, box-shadow .15s;
}
#contacto .contact-card textarea.form-input{
  height: 170px;
  padding: 16px 18px;
  resize: vertical;
}
#contacto .contact-card .form-input::placeholder{ color:#9aa0aa; }
#contacto .contact-card .form-input:focus{
  border-color:#a17b58;
  box-shadow:0 0 0 .22rem rgba(181,126,85,.18);
}

/* Botón: tamaño correcto y alineación limpia */
#contacto .btn-form{
  width: 100%;
  height: 56px;
  border-radius: 999px;
  font-weight: 900;
}
@media (min-width: 768px){
  #contacto .btn-form{ width:auto; min-width:240px; }
}
#contacto .text-end.d-grid{ display:block !important; } /* neutraliza grids heredados */

/* 2) BLOQUE DE DATOS/REDES – centrado y con estilo de marca */
#contacto .contact-card + .col-lg-12 .card-soft{
  text-align: center;
  padding: 28px 32px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* Teléfono y correo: grandes y destacados */
#contacto .contact-card + .col-lg-12 .card-soft ul.list-unstyled{
  max-width: 1000px;
  margin: 0 auto 10px;
  display: flex; flex-direction: column; gap: .5rem;
}
#contacto .contact-card + .col-lg-12 .card-soft ul li{
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  line-height: 1.5;
}
#contacto .contact-card + .col-lg-12 .card-soft ul li:nth-child(1) a,
#contacto .contact-card + .col-lg-12 .card-soft ul li:nth-child(2) a{
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--brand-ink, #2d276d);
  text-decoration: none;
}
#contacto .contact-card + .col-lg-12 .card-soft ul li:nth-child(1) a:hover,
#contacto .contact-card + .col-lg-12 .card-soft ul li:nth-child(2) a:hover{
  color: var(--brand-cu, #b57e55);
}

/* Iconos de redes: fondo suave, tamaño uniforme y hover */
#contacto .contact-card + .col-lg-12 .card-soft ul li:nth-child(3) a{
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  font-size: 1.1rem;
  color: var(--brand-ink, #2d276d);
  background: rgba(45,39,109,.08);
  transition: transform .15s ease, background .15s ease, color .15s ease;
  margin: 0 .15rem;
}
#contacto .contact-card + .col-lg-12 .card-soft ul li:nth-child(3) a:hover{
  background: linear-gradient(90deg, var(--brand-oc,#866436), var(--brand-cu,#b57e55));
  color: #fff;
  transform: translateY(-2px);
}

/* Leyenda final más legible */
#contacto .contact-card + .col-lg-12 .card-soft .text-muted{
  font-size: 1.05rem;
  color: #6b7280 !important;
}


/* --- 1) Botón Enviar a ancho completo --- */
#contacto .btn-form{
  width:100% !important;
  display:block;
  height:56px;
  border-radius:999px;
  font-weight:900;
}

/* --- 2) Estilo de enlaces del bloque de datos/redes (2º card) --- */
#contacto .row > .col-lg-12:last-child .card-soft{
  text-align:center;
  padding:28px 32px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

/* Lista centrada + tipografía mayor */
#contacto .row > .col-lg-12:last-child .card-soft ul.list-unstyled{
  max-width:1000px;
  margin:0 auto 12px;
  display:flex; flex-direction:column; gap:.55rem;
}

/* Teléfono y correo – destacados, sin subrayado ni azul */
#contacto .row > .col-lg-12:last-child .card-soft ul li:nth-child(1) a,
#contacto .row > .col-lg-12:last-child .card-soft ul li:nth-child(2) a{
  font-size:1.18rem;
  font-weight:800;
  color:var(--brand-ink, #2d276d) !important;
  text-decoration:none !important;
}
#contacto .row > .col-lg-12:last-child .card-soft ul li:nth-child(1) a:hover,
#contacto .row > .col-lg-12:last-child .card-soft ul li:nth-child(2) a:hover{
  color:var(--brand-cu, #b57e55) !important;
}

/* Iconos de redes – badges con hover, sin colores de enlace por defecto */
#contacto .row > .col-lg-12:last-child .card-soft ul li:nth-child(3) a{
  width:40px; height:40px;
  display:inline-grid; place-items:center;
  border-radius:12px;
  font-size:1.1rem;
  color:var(--brand-ink, #2d276d) !important;
  background:rgba(45,39,109,.08);
  text-decoration:none !important;
  margin:0 .15rem;
  transition:transform .15s, background .15s, color .15s;
}
#contacto .row > .col-lg-12:last-child .card-soft ul li:nth-child(3) a:hover{
  background:linear-gradient(90deg, var(--brand-oc,#866436), var(--brand-cu,#b57e55));
  color:#fff !important;
  transform:translateY(-2px);
}

/* Leyenda final un poco más grande y legible */
#contacto .row > .col-lg-12:last-child .card-soft .text-muted{
  font-size:1.05rem;
  color:#6b7280 !important;
}

/* ===== Clientes ===== */
#clientes .clients-grid{ --cPad:18px; }
.client-card{
  height:120px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; padding:var(--cPad);
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.client-card img{
  max-height:100%; max-width:100%; object-fit:contain;
  filter:grayscale(100%) contrast(1.05) brightness(.95);
  opacity:.9; transition:filter .18s ease, opacity .18s ease, transform .18s ease;
}
.client-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,0,0,.12);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}
.client-card:hover img{
  filter:none; opacity:1; transform:scale(1.03);
}

/* compacto en móviles, un poco más alto en desktop */
@media (min-width: 992px){
  .client-card{ height:140px; }
}