/* ═══════════════════════════════════════════════
   Cifra Asesorías · hoja de estilos
   Marino + dorado · titulares serif, cuerpo sans
   ═══════════════════════════════════════════════ */

:root{
  --marino:#0F2540;
  --marino-hondo:#0A1A2E;
  --marino-claro:#1B3A5C;
  --oro:#C9A24A;
  --oro-claro:#E0BE6E;
  --gris:#F7F8FA;
  --gris-linea:#E4E8EE;
  --texto:#1B2430;
  --texto-suave:#5A6875;
  --blanco:#FFFFFF;
  --rojo:#C0392B;

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radio:14px;
  --radio-chico:9px;
  --sombra:0 1px 2px rgba(15,37,64,.05), 0 12px 32px rgba(15,37,64,.07);
  --sombra-alta:0 18px 44px rgba(15,37,64,.14);
  --ancho:1160px;
  --transicion:.25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:88px}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem)}
h4{font-size:1.12rem; font-weight:600}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.contenedor{width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto}
.contenedor--angosto{width:min(100% - 2.5rem, 820px)}
.oro{color:var(--oro)}

/* ── íconos ── */
.icono{
  width:26px; height:26px; flex:none;
  fill:none; stroke:var(--marino); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.icono--oro{stroke:var(--oro); width:30px; height:30px}

/* ── botones ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92rem 1.6rem;
  border:1px solid transparent; border-radius:var(--radio-chico);
  font-family:var(--sans); font-size:.97rem; font-weight:600;
  letter-spacing:.01em; cursor:pointer;
  transition:var(--transicion);
}
.btn svg{width:19px; height:19px; fill:currentColor; stroke:none}

.btn--oro{background:var(--oro); color:var(--marino-hondo)}
.btn--oro:hover{background:var(--oro-claro); transform:translateY(-2px); box-shadow:0 10px 24px rgba(201,162,74,.35)}

.btn--linea{border-color:rgba(255,255,255,.35); color:var(--blanco)}
.btn--linea:hover{border-color:var(--blanco); background:rgba(255,255,255,.08)}

.btn--marino{background:var(--marino); color:var(--blanco)}
.btn--marino:hover{background:var(--marino-claro); transform:translateY(-2px)}

.btn--ancho{width:100%}
.btn--compacto{padding:.62rem 1.05rem; font-size:.9rem}

/* ── etiquetas de sección ── */
.etiqueta{
  display:inline-block; margin-bottom:1rem;
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro);
}
.etiqueta::after{
  content:''; display:block; width:34px; height:2px;
  margin-top:.55rem; background:var(--oro);
}
.etiqueta--oscura{color:#96733A}
.etiqueta--oscura::after{background:#96733A}

/* ═══ CABECERA ═══ */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(15,37,64,.97);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--transicion);
}
.cabecera--fija{box-shadow:0 8px 28px rgba(10,26,46,.28)}

.cabecera__fila{
  display:flex; align-items:center; gap:1.5rem;
  min-height:72px;
}

.marca{display:flex; align-items:center; gap:.7rem; margin-right:auto}
.marca__sello{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:9px;
  background:var(--oro); color:var(--marino-hondo);
  font-family:var(--serif); font-size:1.35rem; font-weight:700;
}
.marca__texto{display:flex; flex-direction:column; line-height:1.05; color:var(--blanco)}
.marca__texto strong{font-family:var(--serif); font-size:1.2rem; font-weight:600}
.marca__texto em{
  font-style:normal; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}

.nav{display:flex; gap:1.7rem}
.nav a{
  position:relative; font-size:.93rem; font-weight:500;
  color:rgba(255,255,255,.78); transition:color var(--transicion);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:-5px;
  width:0; height:2px; background:var(--oro);
  transition:width var(--transicion);
}
.nav a:hover{color:var(--blanco)}
.nav a:hover::after,.nav a.activo::after{width:100%}
.nav a.activo{color:var(--blanco)}

.hamburguesa{
  display:none; flex-direction:column; gap:5px;
  padding:.6rem; background:none; border:0; cursor:pointer;
}
.hamburguesa span{
  display:block; width:23px; height:2px; border-radius:2px;
  background:var(--blanco); transition:var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══ HERO ═══ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,8vw,6.5rem);
  background:linear-gradient(160deg,var(--marino) 0%,var(--marino-hondo) 100%);
  color:var(--blanco);
}
.hero__trama{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 65% at 65% 35%, #000 30%, transparent 78%);
}
.hero__grid{
  position:relative;
  display:grid; grid-template-columns:1.35fr .95fr; gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.hero__bajada{
  max-width:56ch; margin-top:1.4rem;
  font-size:1.09rem; color:rgba(255,255,255,.78);
}
.hero__acciones{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem}

.confianza{
  display:flex; flex-wrap:wrap; gap:2.6rem;
  margin-top:2.8rem; padding-top:1.9rem;
  border-top:1px solid rgba(255,255,255,.13);
}
.confianza li{display:flex; flex-direction:column}
.confianza strong{font-family:var(--serif); font-size:2rem; color:var(--oro); line-height:1}
.confianza span{margin-top:.35rem; font-size:.85rem; color:rgba(255,255,255,.62)}

.tarjeta-hero{
  padding:2.1rem 1.9rem;
  background:var(--blanco); color:var(--texto);
  border-radius:var(--radio); box-shadow:var(--sombra-alta);
  border-top:4px solid var(--oro);
}
.tarjeta-hero__titulo{font-family:var(--serif); font-size:1.35rem; font-weight:600}
.tarjeta-hero__texto{margin-top:.7rem; font-size:.96rem; color:var(--texto-suave)}

.lista-check{margin:1.4rem 0 1.7rem; display:grid; gap:.75rem}
.lista-check li{
  position:relative; padding-left:1.9rem;
  font-size:.94rem; color:var(--texto);
}
.lista-check li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:11px; height:6px; border-left:2px solid var(--oro); border-bottom:2px solid var(--oro);
  transform:rotate(-45deg);
}

/* ═══ SECCIONES ═══ */
.seccion{padding:clamp(3.6rem,7vw,6rem) 0}
.seccion--gris{background:var(--gris)}
.seccion--marino{background:var(--marino); color:var(--blanco)}
.seccion--contacto{background:linear-gradient(170deg,var(--marino-hondo),var(--marino)); color:var(--blanco)}

.seccion__intro{max-width:660px; margin-bottom:3rem}
.seccion__bajada{margin-top:1rem; font-size:1.03rem; color:var(--texto-suave)}
.seccion--marino .seccion__bajada,
.seccion--contacto .seccion__bajada{color:rgba(255,255,255,.72)}

/* ── servicios ── */
.bloque-servicio{margin-bottom:3.4rem}
.bloque-servicio:last-child{margin-bottom:0}
.bloque-servicio__cabecera{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1.4rem;
  padding-bottom:1rem; margin-bottom:1.7rem;
  border-bottom:1px solid var(--gris-linea);
}
.bloque-servicio__cabecera h3{position:relative; padding-left:1rem}
.bloque-servicio__cabecera h3::before{
  content:''; position:absolute; left:0; top:.18em; bottom:.18em;
  width:3px; background:var(--oro); border-radius:2px;
}
.bloque-servicio__cabecera p{font-size:.95rem; color:var(--texto-suave); max-width:52ch}

.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.15rem}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem}

.tarjeta{
  padding:1.7rem 1.5rem;
  background:var(--blanco); border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  transition:var(--transicion);
}
.tarjeta:hover{
  transform:translateY(-4px);
  border-color:rgba(201,162,74,.5);
  box-shadow:var(--sombra);
}
.tarjeta h4{margin:1rem 0 .5rem}
.tarjeta p{font-size:.93rem; color:var(--texto-suave)}

/* ── valores ── */
.valor h4{margin:.9rem 0 .5rem}
.valor p{font-size:.93rem; color:rgba(255,255,255,.7)}

/* ── pasos ── */
.pasos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.9rem;
}
.pasos li{
  position:relative; padding-top:1.3rem;
  border-top:2px solid var(--gris-linea);
}
.pasos li::before{
  content:''; position:absolute; top:-2px; left:0; width:38%; height:2px;
  background:var(--oro);
}
.pasos__numero{
  display:block; font-family:var(--serif); font-size:1.05rem;
  font-weight:700; color:var(--oro); letter-spacing:.06em;
}
.pasos h4{margin:.5rem 0 .5rem}
.pasos p{font-size:.93rem; color:var(--texto-suave)}

/* ── faq ── */
.faq{display:grid; gap:.7rem}
.faq details{
  background:var(--blanco); border:1px solid var(--gris-linea);
  border-radius:var(--radio-chico); overflow:hidden;
  transition:var(--transicion);
}
.faq details[open]{border-color:rgba(201,162,74,.55); box-shadow:var(--sombra)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem; cursor:pointer;
  font-weight:600; font-size:1rem; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; flex:none; width:9px; height:9px;
  border-right:2px solid var(--oro); border-bottom:2px solid var(--oro);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--transicion);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{
  padding:0 1.35rem 1.3rem;
  font-size:.95rem; color:var(--texto-suave);
}

/* ═══ CONTACTO ═══ */
.contacto__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
.canales{display:grid; gap:1rem}
.canal{
  display:grid; gap:.15rem;
  padding:1.5rem 1.5rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radio);
  transition:var(--transicion);
}
.canal:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(201,162,74,.6);
  transform:translateY(-3px);
}
.canal .icono{margin-bottom:.6rem}
.canal__etiqueta{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.canal__dato{font-family:var(--serif); font-size:1.2rem; color:var(--blanco)}
.canal__pie{font-size:.85rem; color:rgba(255,255,255,.55)}

.buzon{
  padding:2.1rem 1.9rem;
  background:var(--blanco); color:var(--texto);
  border-radius:var(--radio); box-shadow:var(--sombra-alta);
  border-top:4px solid var(--oro);
}
.buzon h3{font-size:1.45rem}
.buzon__nota{margin-top:.5rem; margin-bottom:1.6rem; font-size:.93rem; color:var(--texto-suave)}
.buzon__legal{margin-top:.9rem; font-size:.8rem; color:var(--texto-suave); text-align:center}

.campo{margin-bottom:1.05rem}
.campo--par{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.campo label{
  display:block; margin-bottom:.4rem;
  font-size:.85rem; font-weight:600; color:var(--marino);
}
.campo label span[aria-hidden]{color:var(--oro)}
.opcional{font-weight:400; color:var(--texto-suave)}

.campo input,.campo select,.campo textarea{
  width:100%; padding:.78rem .9rem;
  font-family:var(--sans); font-size:.95rem; color:var(--texto);
  background:var(--gris);
  border:1px solid var(--gris-linea); border-radius:var(--radio-chico);
  transition:var(--transicion);
}
.campo textarea{resize:vertical; min-height:96px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; background:var(--blanco);
  border-color:var(--oro); box-shadow:0 0 0 3px rgba(201,162,74,.18);
}
.campo select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6875' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:11px;
  padding-right:2.4rem;
}

.campo input.malo,.campo textarea.malo{border-color:var(--rojo); background:#FDF3F2}
.error{display:block; margin-top:.3rem; font-size:.78rem; color:var(--rojo); min-height:1em}

/* ═══ PIE ═══ */
.pie{background:var(--marino-hondo); color:rgba(255,255,255,.7); padding-top:3.4rem}
.pie__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.4rem;
  padding-bottom:2.6rem;
}
.marca--pie{margin-bottom:1rem}
.pie__texto{font-size:.92rem; max-width:42ch}
.pie h5{
  margin:0 0 1rem; font-family:var(--sans);
  font-size:.76rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oro);
}
.pie ul{display:grid; gap:.6rem; font-size:.92rem}
.pie ul a{transition:color var(--transicion)}
.pie ul a:hover{color:var(--oro)}

.pie__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding:1.4rem 0; margin-top:0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.84rem; color:rgba(255,255,255,.45);
}
.pie__base a{color:var(--oro)}

/* ═══ FLOTANTE ═══ */
.flotante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  display:none; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:var(--transicion);
}
.flotante svg{width:30px; height:30px; fill:currentColor}
.flotante:hover{transform:scale(1.07)}

/* ═══ REVEAL ═══ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* ═══ RESPONSIVE ═══ */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr}
  .tarjeta-hero{max-width:520px}
  .contacto__grid{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  body{font-size:16px}
  .cabecera__cta{display:none}
  .hamburguesa{display:flex}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    padding:.5rem 1.25rem 1.25rem;
    background:var(--marino-hondo);
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:var(--transicion);
  }
  .nav.abierto{transform:none; opacity:1; pointer-events:auto}
  .nav a{padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a::after{display:none}

  .flotante{display:grid}
  .confianza{gap:1.6rem}
  .confianza li{min-width:88px}
  .hero__acciones .btn{width:100%}
  .campo--par{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr; gap:2rem}
  .pie__base{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}