/* =========================================================
   La S Abogados — Hoja de estilos compartida
   Paleta:  Azul profundo #122561  ·  Crema #FFFFBF
   Tipos:   Cormorant Garamond (display) + Inter (sans)
   ========================================================= */

:root{
  --azul:#122561;
  --azul-hondo:#0c1a47;
  --azul-claro:#1a3380;
  --crema:#FFFFBF;
  --crema-tenue:rgba(255,255,191,0.08);
  --crema-medio:rgba(255,255,191,0.55);
  --crema-borde:rgba(255,255,191,0.18);
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--azul);
  color:var(--crema);
  line-height:1.6;
  font-weight:300;
  overflow-x:hidden;
  min-height:100vh;
}

a{color:inherit}
img{max-width:100%;display:block}

/* =========================================================
   Patrón decorativo de fondo (easter egg con valores)
   ========================================================= */
.easter-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;opacity:0.4;
}
.easter-bg .word{
  position:absolute;
  font-family:var(--serif);
  font-style:italic;
  color:var(--crema);
  opacity:0.018;
  white-space:nowrap;
  user-select:text;
  transition:opacity 0.6s ease;
  letter-spacing:0.02em;
}
.easter-bg .word:hover{opacity:0.4}
.easter-bg .word::selection{background:rgba(255,255,191,0.4);color:var(--azul)}

.w1{top:8%;left:3%;font-size:7rem;transform:rotate(-8deg)}
.w2{top:14%;right:5%;font-size:5rem;transform:rotate(4deg)}
.w3{top:28%;left:10%;font-size:9rem;transform:rotate(-3deg)}
.w4{top:42%;right:8%;font-size:6rem;transform:rotate(6deg)}
.w5{top:55%;left:2%;font-size:8rem;transform:rotate(-5deg)}
.w6{top:68%;right:12%;font-size:5.5rem;transform:rotate(3deg)}
.w7{top:80%;left:15%;font-size:7rem;transform:rotate(-7deg)}
.w8{top:92%;right:4%;font-size:6.5rem;transform:rotate(5deg)}
.w9{top:20%;left:45%;font-size:4.5rem;transform:rotate(-2deg)}
.w10{top:50%;left:40%;font-size:5rem;transform:rotate(8deg)}
.w11{top:75%;left:50%;font-size:5.5rem;transform:rotate(-4deg)}
.w12{top:35%;left:65%;font-size:4rem;transform:rotate(2deg)}
.w13{top:62%;left:30%;font-size:4.5rem;transform:rotate(-6deg)}

.wrap{position:relative;z-index:1}

/* =========================================================
   NAVEGACIÓN SUPERIOR
   ========================================================= */
nav.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(18,37,97,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--crema-borde);
  transition:padding 0.3s ease;
}
nav.site-nav .nav-inner{
  max-width:1280px;margin:0 auto;
  padding:18px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
nav.site-nav .logo-mini{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--crema);
}
nav.site-nav .logo-mini img{
  width:42px;height:42px;border-radius:4px;object-fit:cover;
}
nav.site-nav .logo-mini .name{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
  letter-spacing:0.04em;
}
nav.site-nav ul{
  list-style:none;display:flex;gap:34px;align-items:center;
}
nav.site-nav ul a{
  color:var(--crema);
  text-decoration:none;
  font-size:0.82rem;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  position:relative;
  padding:6px 0;
  transition:color 0.3s;
}
nav.site-nav ul a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--crema);transition:width 0.4s ease;
}
nav.site-nav ul a:hover::after,
nav.site-nav ul a.active::after{width:100%}
nav.site-nav ul a.active{color:var(--crema)}

/* Dropdown de Servicios */
nav.site-nav .has-drop{position:relative}
nav.site-nav .has-drop > a::before{
  content:'';display:inline-block;
  width:6px;height:6px;
  border-right:1px solid var(--crema-medio);
  border-bottom:1px solid var(--crema-medio);
  transform:rotate(45deg) translateY(-2px);
  margin-right:8px;
  transition:transform 0.3s;
}
nav.site-nav .has-drop:hover > a::before,
nav.site-nav .has-drop.open > a::before{transform:rotate(-135deg) translateY(0)}

nav.site-nav .drop{
  position:absolute;top:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--azul-hondo);
  border:1px solid var(--crema-borde);
  min-width:300px;padding:14px 0;
  list-style:none;display:block;
  opacity:0;pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
/* Puente invisible entre el ítem del nav y el dropdown:
   evita que el menú se cierre al mover el mouse hacia abajo */
nav.site-nav .has-drop::after{
  content:'';position:absolute;
  top:100%;left:0;right:0;height:24px;
  pointer-events:none;
}
nav.site-nav .has-drop:hover::after{pointer-events:auto}
nav.site-nav .has-drop:hover .drop,
nav.site-nav .has-drop.open .drop,
nav.site-nav .drop:hover{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
nav.site-nav .drop li{display:block}
nav.site-nav .drop a{
  display:block;
  padding:10px 26px;
  font-size:0.78rem;letter-spacing:0.08em;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
nav.site-nav .drop a::after{display:none}
nav.site-nav .drop a:hover{background:rgba(255,255,191,0.05);color:var(--crema)}

.nav-cta{
  border:1px solid var(--crema);
  padding:10px 22px !important;
  border-radius:2px;
  transition:background 0.3s,color 0.3s !important;
}
.nav-cta:hover{background:var(--crema);color:var(--azul) !important}
.nav-cta::after{display:none !important}

.menu-toggle{
  display:none;background:none;border:none;
  color:var(--crema);font-size:1.6rem;cursor:pointer;
  padding:6px 10px;
}

/* =========================================================
   TIPOGRAFÍA Y SECCIONES BASE
   ========================================================= */
section{padding:110px 40px;position:relative}
.container{max-width:1280px;margin:0 auto}

.section-head{text-align:center;margin-bottom:80px}
.section-head .kicker{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--crema-medio);
  letter-spacing:0.04em;
  margin-bottom:14px;
  display:block;
}
.section-head h2{
  font-family:var(--serif);
  font-size:clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.005em;
}
.section-head h2 em{font-style:italic;color:var(--crema-medio);font-weight:400}
.section-head .sub{
  margin-top:22px;
  max-width:640px;margin-left:auto;margin-right:auto;
  color:rgba(255,255,191,0.72);
  font-size:1.05rem;
}

.divider{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;max-width:300px;padding:40px 0;
}
.divider::before,.divider::after{
  content:'';flex:1;height:1px;background:var(--crema-borde);
}
.divider span{
  padding:0 18px;
  font-family:var(--serif);
  font-style:italic;
  color:var(--crema-medio);
  font-size:1.1rem;
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-block;
  padding:16px 32px;
  font-size:0.85rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:500;
  border-radius:2px;
  transition:all 0.3s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{background:var(--crema);color:var(--azul)}
.btn-primary:hover{background:transparent;color:var(--crema);border-color:var(--crema)}
.btn-ghost{background:transparent;color:var(--crema);border-color:var(--crema-borde)}
.btn-ghost:hover{border-color:var(--crema);background:var(--crema-tenue)}

/* =========================================================
   TARJETAS GENÉRICAS
   ========================================================= */
.card{
  background:rgba(255,255,191,0.03);
  border:1px solid var(--crema-borde);
  padding:48px 42px;
  position:relative;
  transition:border-color 0.4s,background 0.4s;
}
.card:hover{border-color:var(--crema-medio);background:rgba(255,255,191,0.05)}
.card .num{
  font-family:var(--serif);
  font-style:italic;
  font-size:0.95rem;
  color:var(--crema-medio);
  margin-bottom:18px;
}
.card h3{
  font-family:var(--serif);
  font-size:2rem;font-weight:500;
  margin-bottom:18px;letter-spacing:0.01em;
}
.card p{color:rgba(255,255,191,0.78);font-size:1rem;line-height:1.75}

/* =========================================================
   HERO INTERIOR (páginas de servicio, etc.)
   ========================================================= */
.page-hero{
  padding:160px 40px 80px;
  text-align:center;
  border-bottom:1px solid var(--crema-borde);
}
.page-hero .breadcrumb{
  font-family:var(--serif);
  font-style:italic;
  color:var(--crema-medio);
  font-size:0.95rem;
  margin-bottom:18px;
  letter-spacing:0.04em;
}
.page-hero .breadcrumb a{text-decoration:none;color:inherit;transition:color 0.3s}
.page-hero .breadcrumb a:hover{color:var(--crema)}
.page-hero .breadcrumb .sep{margin:0 10px;opacity:0.5}
.page-hero h1{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 5.2vw, 4.6rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-bottom:24px;
}
.page-hero h1 em{font-style:italic;color:var(--crema-medio);font-weight:400}
.page-hero .lead{
  max-width:720px;margin:0 auto;
  font-size:1.1rem;
  color:rgba(255,255,191,0.78);
  line-height:1.7;
}

/* =========================================================
   KPI BAR (tres datos clave en páginas de servicio)
   ========================================================= */
.kpi-bar{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--crema-borde);
  border-bottom:1px solid var(--crema-borde);
  background:rgba(255,255,191,0.025);
}
.kpi{
  padding:48px 32px;
  text-align:center;
  border-right:1px solid var(--crema-borde);
}
.kpi:last-child{border-right:none}
.kpi .value{
  font-family:var(--serif);
  font-size:2.6rem;font-weight:500;
  color:var(--crema);
  line-height:1;margin-bottom:10px;
}
.kpi .label{
  font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--crema-medio);
  line-height:1.5;
}

/* =========================================================
   COLUMNAS DE TEXTO + IMAGEN (servicios internos)
   ========================================================= */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.split.reverse > div:first-child{order:2}
.split h2{
  font-family:var(--serif);
  font-size:clamp(2rem, 3.5vw, 2.8rem);
  font-weight:500;line-height:1.1;
  margin-bottom:24px;
}
.split h2 em{font-style:italic;color:var(--crema-medio);font-weight:400}
.split p{
  color:rgba(255,255,191,0.78);
  font-size:1.02rem;line-height:1.8;
  margin-bottom:18px;
}
.split .kicker{
  font-family:var(--serif);font-style:italic;
  color:var(--crema-medio);
  margin-bottom:12px;display:block;
  font-size:1.05rem;
}

/* =========================================================
   LISTA DE PILARES (tres diferenciadores)
   ========================================================= */
.pilares{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.pilar{
  background:rgba(255,255,191,0.025);
  border:1px solid var(--crema-borde);
  padding:44px 36px;
  transition:transform 0.4s,border-color 0.4s,background 0.4s;
  position:relative;overflow:hidden;
}
.pilar::before{
  content:'';
  position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--crema);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.5s ease;
}
.pilar:hover{transform:translateY(-4px);border-color:var(--crema-medio);background:rgba(255,255,191,0.05)}
.pilar:hover::before{transform:scaleX(1)}
.pilar .icon{
  font-family:var(--serif);
  font-size:2.4rem;font-style:italic;
  color:var(--crema);
  margin-bottom:18px;display:inline-block;
}
.pilar h4{
  font-family:var(--serif);
  font-size:1.35rem;font-weight:500;
  margin-bottom:14px;line-height:1.25;
}
.pilar p{color:rgba(255,255,191,0.74);font-size:0.95rem;line-height:1.7}

/* =========================================================
   BLOQUE DE PROCESO / TIMELINE
   ========================================================= */
.proceso{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--crema-borde);
}
.proceso .paso{
  padding:36px 24px;
  border-right:1px solid var(--crema-borde);
  position:relative;
}
.proceso .paso:last-child{border-right:none}
.proceso .paso .step-num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--crema-medio);
  font-size:1rem;margin-bottom:14px;
}
.proceso .paso h5{
  font-family:var(--serif);
  font-size:1.2rem;font-weight:500;
  margin-bottom:10px;
}
.proceso .paso p{
  font-size:0.9rem;color:rgba(255,255,191,0.72);line-height:1.65;
}

/* =========================================================
   CITAS / BLOQUES DESTACADOS
   ========================================================= */
.pull-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.6rem;
  line-height:1.4;
  max-width:880px;margin:0 auto;
  padding:40px 60px;
  border-left:2px solid var(--crema);
  background:rgba(255,255,191,0.03);
  color:rgba(255,255,191,0.92);
}

/* =========================================================
   TARJETAS DE SERVICIOS (en hub /servicios/)
   ========================================================= */
.servicios-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.servicio{
  background:rgba(255,255,191,0.025);
  border:1px solid var(--crema-borde);
  padding:42px 36px;
  position:relative;
  transition:transform 0.4s,border-color 0.4s,background 0.4s;
  overflow:hidden;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
}
.servicio::before{
  content:'';
  position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--crema);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.5s ease;
}
.servicio:hover{transform:translateY(-4px);border-color:var(--crema-medio);background:rgba(255,255,191,0.05)}
.servicio:hover::before{transform:scaleX(1)}
.servicio .icon{
  font-family:var(--serif);
  font-size:2.4rem;font-style:italic;
  color:var(--crema);
  margin-bottom:20px;display:inline-block;
}
.servicio h4{
  font-family:var(--serif);
  font-size:1.4rem;font-weight:500;
  margin-bottom:14px;line-height:1.2;
}
.servicio p{color:rgba(255,255,191,0.72);font-size:0.95rem;line-height:1.65;flex:1}
.servicio .arrow{
  margin-top:24px;
  font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--crema-medio);
  transition:color 0.3s;
}
.servicio:hover .arrow{color:var(--crema)}
.servicio .arrow::after{
  content:' →';transition:transform 0.3s;display:inline-block;
}
.servicio:hover .arrow::after{transform:translateX(4px)}

/* =========================================================
   RETAINER (planes)
   ========================================================= */
.retainer{background:linear-gradient(180deg, var(--azul) 0%, var(--azul-hondo) 100%)}
.retainer-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:20px;
}
.plan{
  background:rgba(255,255,191,0.03);
  border:1px solid var(--crema-borde);
  padding:48px 36px;
  position:relative;
  display:flex;flex-direction:column;
  transition:transform 0.4s,border-color 0.4s;
}
.plan:hover{transform:translateY(-6px);border-color:var(--crema)}
.plan.featured{
  border-color:var(--crema);
  background:rgba(255,255,191,0.06);
  transform:scale(1.02);
}
.plan.featured::after{
  content:'Recomendado';
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--crema);color:var(--azul);
  padding:6px 18px;font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;font-weight:600;
}
.plan .plan-name{
  font-family:var(--serif);font-style:italic;
  color:var(--crema-medio);font-size:1.05rem;margin-bottom:8px;
}
.plan .plan-tier{
  font-family:var(--serif);
  font-size:2.2rem;font-weight:500;
  margin-bottom:24px;letter-spacing:0.01em;
}
.plan .price{
  font-family:var(--serif);
  font-size:2.6rem;font-weight:500;
  line-height:1;margin-bottom:6px;
}
.plan .price .currency{font-size:1.2rem;vertical-align:top;color:var(--crema-medio);margin-right:4px}
.plan .price-note{
  font-size:0.8rem;color:var(--crema-medio);
  margin-bottom:30px;letter-spacing:0.05em;
}
.plan .features{list-style:none;flex:1;margin-bottom:32px}
.plan .features li{
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,191,0.08);
  font-size:0.92rem;color:rgba(255,255,191,0.85);
  display:flex;align-items:flex-start;gap:10px;
}
.plan .features li::before{
  content:'+';color:var(--crema);font-weight:500;flex-shrink:0;
}
.plan .features li:last-child{border-bottom:none}
.plan .btn{width:100%;text-align:center}

/* =========================================================
   TABLA DE HONORARIOS
   ========================================================= */
.tarifas-table{
  width:100%;border-collapse:collapse;
  background:rgba(255,255,191,0.025);
  border:1px solid var(--crema-borde);
}
.tarifas-table th,
.tarifas-table td{
  padding:18px 24px;
  text-align:left;
  border-bottom:1px solid var(--crema-borde);
  font-size:0.95rem;
}
.tarifas-table th{
  font-family:var(--serif);
  font-style:italic;
  color:var(--crema-medio);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.8rem;
  background:rgba(255,255,191,0.04);
}
.tarifas-table tr:last-child td{border-bottom:none}
.tarifas-table tr:hover{background:rgba(255,255,191,0.04)}
.tarifas-table td:last-child{text-align:right;color:var(--crema)}

/* =========================================================
   EQUIPO
   ========================================================= */
.equipo{background:var(--azul-hondo)}
.equipo-card{
  background:rgba(255,255,191,0.03);
  border:1px solid var(--crema-borde);
  padding:60px;
  display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:center;
  max-width:1100px;margin:0 auto;
}
/* Foto del equipo: cuadrada 1:1, sin marco ni viñeta */
.equipo-foto{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.equipo-foto img{
  width:100%;
  height:auto;
  max-width:480px;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:saturate(0.95) contrast(1.02);
  display:block;
}

/* =========================================================
   ACORDEONES COLAPSABLES (móvil principalmente)
   ========================================================= */
.collapsible{
  border:1px solid var(--crema-borde);
  background:rgba(255,255,191,0.025);
  margin-bottom:14px;
  overflow:hidden;
  transition:border-color 0.3s,background 0.3s;
}
.collapsible:hover{border-color:var(--crema-medio)}
.collapsible-trigger{
  width:100%;
  background:none;border:none;color:var(--crema);
  font-family:var(--serif);
  font-size:1.4rem;font-weight:500;
  text-align:left;
  padding:24px 28px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transition:background 0.3s;
}
.collapsible-trigger:hover{background:rgba(255,255,191,0.04)}
.collapsible-trigger .acc-kicker{
  font-family:var(--serif);
  font-style:italic;
  color:var(--crema-medio);
  font-size:0.92rem;
  margin-bottom:4px;
  display:block;
  font-weight:400;
}
.collapsible-trigger .acc-label-wrap{flex:1;min-width:0}
.collapsible-trigger .acc-icon{
  flex-shrink:0;
  width:32px;height:32px;
  border:1px solid var(--crema-borde);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:border-color 0.3s,background 0.3s;
}
.collapsible-trigger .acc-icon::before,
.collapsible-trigger .acc-icon::after{
  content:'';position:absolute;
  background:var(--crema);
  transition:transform 0.35s ease, background 0.3s;
}
.collapsible-trigger .acc-icon::before{width:11px;height:1px;}
.collapsible-trigger .acc-icon::after{width:1px;height:11px;}
.collapsible.open .collapsible-trigger .acc-icon{background:var(--crema);border-color:var(--crema);}
.collapsible.open .collapsible-trigger .acc-icon::before,
.collapsible.open .collapsible-trigger .acc-icon::after{background:var(--azul);}
.collapsible.open .collapsible-trigger .acc-icon::after{transform:scaleY(0);}
.collapsible-body{
  max-height:0;overflow:hidden;
  transition:max-height 0.5s ease;
}
.collapsible.open .collapsible-body{max-height:4000px;}
.collapsible-body-inner{padding:0 28px 28px;}
.collapsible-body-inner p{
  color:rgba(255,255,191,0.78);
  line-height:1.75;
  margin-bottom:14px;
}
.collapsible-body-inner p:last-child{margin-bottom:0}
.collapsible-body-inner .servicios-grid{margin-top:0}

/* Modificador para el grupo de servicios del index */
.collapsible-services .collapsible-body-inner{padding:6px 0 0;}

/* En desktop, los acordeones marcados [data-desktop-open] se muestran
   siempre abiertos sin botón de trigger ni borde de tarjeta */
@media (min-width:981px){
  .collapsible[data-desktop-open]{
    border:none;background:transparent;margin-bottom:0;overflow:visible;
  }
  .collapsible[data-desktop-open] .collapsible-trigger{display:none}
  .collapsible[data-desktop-open] .collapsible-body{
    max-height:none !important;overflow:visible;
  }
  .collapsible[data-desktop-open] .collapsible-body-inner{padding:0}
}
.equipo-info .role{
  font-family:var(--serif);font-style:italic;
  color:var(--crema-medio);font-size:1rem;
  margin-bottom:10px;
}
.equipo-info h3{
  font-family:var(--serif);
  font-size:2.4rem;font-weight:500;
  margin-bottom:24px;line-height:1.1;
}
.equipo-info p{
  color:rgba(255,255,191,0.78);
  margin-bottom:18px;line-height:1.75;
}
.equipo-creds{
  margin-top:24px;padding-top:24px;
  border-top:1px solid var(--crema-borde);
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.equipo-creds .cred{font-size:0.85rem;color:rgba(255,255,191,0.7)}
.equipo-creds .cred strong{
  display:block;color:var(--crema);font-weight:500;
  font-family:var(--serif);font-size:1rem;margin-bottom:3px;
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
}
.contacto-info h3{
  font-family:var(--serif);font-size:2.2rem;font-weight:500;
  margin-bottom:24px;line-height:1.1;
}
.contacto-info p{color:rgba(255,255,191,0.78);margin-bottom:36px;line-height:1.75}
.contact-item{
  padding:22px 0;
  border-bottom:1px solid var(--crema-borde);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.contact-item .label{
  font-family:var(--serif);font-style:italic;
  color:var(--crema-medio);font-size:0.95rem;
}
.contact-item .value{
  color:var(--crema);font-size:1rem;text-decoration:none;text-align:right;
}
.contact-item a.value:hover{text-decoration:underline}

.socials{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.social-btn{
  width:46px;height:46px;
  border:1px solid var(--crema-borde);
  display:flex;align-items:center;justify-content:center;
  color:var(--crema);text-decoration:none;
  transition:all 0.3s;border-radius:2px;
  font-size:0.85rem;font-weight:500;letter-spacing:0.05em;
}
.social-btn:hover{background:var(--crema);color:var(--azul);border-color:var(--crema)}

.contacto-cta{
  background:rgba(255,255,191,0.04);
  border:1px solid var(--crema-borde);
  padding:50px;
}
.contacto-cta h4{
  font-family:var(--serif);font-size:1.7rem;font-weight:500;margin-bottom:18px;line-height:1.2;
}
.contacto-cta p{color:rgba(255,255,191,0.78);margin-bottom:30px;line-height:1.7}
.contacto-cta .quote{
  font-family:var(--serif);font-style:italic;
  font-size:1.15rem;padding:24px;
  border-left:2px solid var(--crema);
  background:rgba(255,255,191,0.03);
  margin-bottom:30px;
  color:rgba(255,255,191,0.9);
}

/* =========================================================
   FORMULARIO
   ========================================================= */
.form-grid{display:grid;gap:18px}
.form-grid .row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid label{
  display:block;
  font-family:var(--serif);font-style:italic;
  color:var(--crema-medio);font-size:0.95rem;
  margin-bottom:8px;
}
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  background:rgba(255,255,191,0.04);
  border:1px solid var(--crema-borde);
  color:var(--crema);
  padding:14px 16px;
  font-family:var(--sans);
  font-size:0.95rem;
  border-radius:2px;
  transition:border-color 0.3s,background 0.3s;
}
/* Estilizar el select: sacar la apariencia nativa, agregar flecha custom,
   y forzar contraste en las opciones para que no aparezcan blanco-sobre-crema */
.form-grid select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1L7 7L13 1' stroke='%23FFFFBF' stroke-opacity='0.6' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
  cursor:pointer;
}
.form-grid select option,
.form-grid select optgroup{
  background-color:#0c1a47;
  color:#FFFFBF;
  font-family:var(--sans);
  padding:8px 12px;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  outline:none;border-color:var(--crema);
  background:rgba(255,255,191,0.07);
}
.form-grid select:focus{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1L7 7L13 1' stroke='%23FFFFBF' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
}
.form-grid textarea{resize:vertical;min-height:130px}
/* Placeholders */
.form-grid input::placeholder,
.form-grid textarea::placeholder{color:rgba(255,255,191,0.4)}

/* Mensaje de estado del formulario (éxito / error) */
.form-status{
  min-height:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  line-height:1.5;
  text-align:center;
  padding:0;
  overflow:hidden;
  transition:padding 0.3s ease, max-height 0.3s ease;
  max-height:0;
}
.form-status.is-success,
.form-status.is-error{
  padding:18px 22px;
  max-height:200px;
}
.form-status.is-success{
  background:rgba(255,255,191,0.08);
  border:1px solid var(--crema);
  color:var(--crema);
}
.form-status.is-error{
  background:rgba(255,170,170,0.08);
  border:1px solid rgba(255,170,170,0.55);
  color:#ffd6d6;
}
button:disabled{opacity:0.6;cursor:wait}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{
  background:var(--azul-hondo);
  border-top:1px solid var(--crema-borde);
  padding:60px 40px 30px;
}
footer.site-footer .foot-grid{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;
  margin-bottom:50px;
}
footer.site-footer .foot-brand img{
  width:54px;height:54px;border-radius:4px;margin-bottom:16px;
}
footer.site-footer .foot-brand .name{
  font-family:var(--serif);
  font-size:1.5rem;font-weight:500;
  letter-spacing:0.04em;margin-bottom:10px;
}
footer.site-footer .foot-brand p{
  font-family:var(--serif);font-style:italic;
  color:var(--crema-medio);font-size:0.95rem;
  line-height:1.6;max-width:280px;
}
footer.site-footer .foot-col h5{
  font-family:var(--serif);font-style:italic;
  color:var(--crema-medio);
  font-size:0.95rem;font-weight:500;
  margin-bottom:16px;
}
footer.site-footer .foot-col ul{list-style:none}
footer.site-footer .foot-col li{margin-bottom:10px}
footer.site-footer .foot-col a{
  color:rgba(255,255,191,0.72);text-decoration:none;
  font-size:0.88rem;letter-spacing:0.02em;
  transition:color 0.3s;
}
footer.site-footer .foot-col a:hover{color:var(--crema)}
footer.site-footer .foot-meta{
  max-width:1280px;margin:0 auto;
  padding-top:24px;
  border-top:1px solid rgba(255,255,191,0.1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-size:0.78rem;color:rgba(255,255,191,0.5);
  letter-spacing:0.05em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablets y móvil grande: hasta 980px */
@media (max-width:980px){
  .firma-grid,.servicios-grid,.retainer-grid,.contacto-grid,.split,.pilares,.proceso,.kpi-bar{
    grid-template-columns:1fr !important;
  }
  .split{gap:50px}
  .split.reverse > div:first-child{order:0}
  .kpi{border-right:none;border-bottom:1px solid var(--crema-borde);padding:36px 24px}
  .kpi:last-child{border-bottom:none}
  .proceso .paso{border-right:none;border-bottom:1px solid var(--crema-borde)}
  .proceso .paso:last-child{border-bottom:none}
  .equipo-card{grid-template-columns:1fr;padding:40px}
  .equipo-foto{max-width:300px;margin:0 auto}

  /* NAV móvil */
  nav.site-nav .nav-inner{padding:14px 20px}
  nav.site-nav .logo-mini img{width:38px;height:38px}
  nav.site-nav .logo-mini .name{font-size:1.18rem}
  nav.site-nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--azul-hondo);flex-direction:column;padding:20px;
    border-bottom:1px solid var(--crema-borde);gap:6px;
    align-items:stretch;
    max-height:calc(100vh - 70px);
    overflow-y:auto;
  }
  nav.site-nav ul.open{display:flex}
  nav.site-nav ul a{
    display:block;padding:14px 16px;
    border-bottom:1px solid rgba(255,255,191,0.08);
    text-align:left;font-size:0.85rem;
  }
  nav.site-nav ul a::after{display:none}
  nav.site-nav ul li:last-child a{border-bottom:none}
  nav.site-nav .has-drop::after{display:none}
  .nav-cta{
    margin-top:10px;text-align:center !important;
    padding:14px 22px !important;
  }
  nav.site-nav .has-drop > a::before{display:none}
  nav.site-nav .drop{
    position:static;transform:none;opacity:1;pointer-events:auto;
    background:transparent;border:none;padding:0 0 8px 18px;
    min-width:0;display:none;
  }
  nav.site-nav .has-drop.open .drop{display:block;transform:none}
  nav.site-nav .drop a{
    padding:10px 14px;font-size:0.78rem;
    border-bottom:1px solid rgba(255,255,191,0.06) !important;
  }
  .menu-toggle{display:block}

  /* Espaciado general */
  section{padding:64px 22px}
  .page-hero{padding:120px 22px 50px}
  .section-head{margin-bottom:50px}
  .pull-quote{padding:28px;font-size:1.25rem}
  .easter-bg{opacity:0.4}
  .w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12,.w13{font-size:3.6rem !important}
  footer.site-footer{padding:50px 22px 24px}
  footer.site-footer .foot-grid{grid-template-columns:1fr 1fr;gap:30px;margin-bottom:36px}

  /* Plan featured no sobresale en móvil */
  .plan.featured{transform:none}
  .plan.featured:hover{transform:translateY(-6px)}

  /* Cards y pilares más compactos */
  .card{padding:36px 28px}
  .pilar{padding:36px 28px}
}

/* Móvil pequeño: hasta 720px */
@media (max-width:720px){
  /* Tablas en scroll horizontal cuando sea necesario */
  .tarifas-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .tarifas-table tbody,
  .tarifas-table tr,
  .tarifas-table th,
  .tarifas-table td{white-space:normal}
  .tarifas-table th,
  .tarifas-table td{padding:14px 16px;font-size:0.88rem}

  /* Easter egg más sutil */
  .easter-bg{opacity:0.35}
  .w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12,.w13{font-size:3rem !important}

  /* Tipografías un poco más controladas */
  .kpi .value{font-size:2rem;line-height:1.1}
  .kpi .label{font-size:0.7rem}
  .servicio{padding:36px 28px}
  .servicio h4{font-size:1.25rem}
  .contacto-cta{padding:36px 28px}
  .contacto-cta h4{font-size:1.45rem}
  .equipo-card{padding:32px 24px;gap:40px}
  .equipo-info h3{font-size:2rem}
  .equipo-creds{grid-template-columns:1fr;gap:14px}

  /* Hero del homepage en móvil */
  .hero-grid{grid-template-columns:1fr !important;gap:40px !important}
  .hero-logo{order:-1}
  .hero-logo .frame{max-width:240px}
}

/* Móvil ajustado: hasta 480px */
@media (max-width:480px){
  section{padding:54px 18px}
  .page-hero{padding:110px 18px 44px}
  .section-head{margin-bottom:40px}
  .section-head h2{font-size:1.85rem}
  .page-hero h1{font-size:2.1rem;line-height:1.08}
  .page-hero .lead{font-size:1rem}
  .equipo-card,.contacto-cta{padding:28px 22px}
  .pull-quote{padding:22px 24px;font-size:1.1rem;border-left-width:2px}
  .form-grid .row-2{grid-template-columns:1fr}
  footer.site-footer{padding:40px 20px 22px}
  footer.site-footer .foot-grid{grid-template-columns:1fr;gap:28px}
  footer.site-footer .foot-meta{font-size:0.72rem;flex-direction:column;align-items:flex-start}

  /* Plan rotulado más compacto */
  .plan{padding:36px 26px}
  .plan .plan-tier{font-size:1.9rem}
  .plan .price{font-size:2.2rem}

  /* Card simple */
  .card{padding:30px 22px}
  .card h3{font-size:1.6rem}

  /* Nav */
  nav.site-nav .logo-mini .name{font-size:1.05rem}
  nav.site-nav .nav-inner{padding:12px 18px}

  /* Hero más compacto */
  .hero-text h1{font-size:2.4rem !important}
  .hero-text .lead{font-size:0.98rem !important}

  /* Botones a ancho completo en móvil */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center}

  /* Contact items en columna */
  .contact-item{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 0}
  .contact-item .value{text-align:left}
}