/* ===================================================================
   SONRILASER PAMPLONA — PLANTILLA A · "Cálida Editorial"
   Paleta: Naranja de marca + crema/marfil + oro + tinta
   Autor: Guillermo Jaimes Ramírez
   Tipografía: Fraunces (display) + Outfit (texto)
   =================================================================== */

:root{
  --naranja:#ee7c1b;
  --naranja-cta:#f0801c;
  --naranja-osc:#c75e0a;
  --naranja-luz:#fbb766;
  --oro:#bd9a52;
  --oro-luz:#e3c98c;
  --tinta:#241d16;
  --tinta-suave:#5d5346;
  --crema:#fbf4e9;
  --crema-2:#f4e8d6;
  --marfil:#fffdf9;
  --linea:#ebddca;
  --verde-wa:#25d366;

  --sombra:0 14px 40px rgba(80,52,18,.10);
  --sombra-fuerte:0 26px 70px rgba(80,52,18,.20);
  --radio:22px;
  --radio-sm:14px;
  --ancho:1180px;
  --t-display:'Fraunces',Georgia,'Times New Roman',serif;
  --t-texto:'Outfit','Segoe UI',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--t-texto);
  color:var(--tinta);
  background:var(--crema);
  line-height:1.7;font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--naranja-osc);text-decoration:none}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--t-display);color:var(--tinta);line-height:1.1;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:600}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem);margin-bottom:.5em}
h3{font-size:1.32rem;margin-bottom:.4em;font-weight:600}
p{margin-bottom:1.1em}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--t-texto);font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--naranja-osc);
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--naranja);border-radius:2px}

/* ---------- Barra superior ---------- */
.topbar{background:var(--tinta);color:#e9dcc7;font-size:.85rem;padding:9px 0}
.topbar .contenedor{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--naranja-luz);font-weight:600}
.topbar a:hover{color:#fff}
.topbar-loc{opacity:.85}

/* ---------- Cabecera ---------- */
header.sitio{position:sticky;top:0;z-index:60;background:rgba(251,244,233,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 0}
.marca{display:flex;align-items:center;gap:13px;font-family:var(--t-display);font-weight:600;font-size:1.4rem;color:var(--tinta)}
.marca img{height:46px;width:auto;border-radius:10px;background:#fff;padding:4px 7px;box-shadow:0 4px 14px rgba(80,52,18,.12)}
.marca small{display:block;font-family:var(--t-texto);font-size:.66rem;letter-spacing:.22em;color:var(--naranja-osc);font-weight:700;text-transform:uppercase}
.menu{display:flex;gap:4px;align-items:center;list-style:none}
.menu a{padding:9px 15px;border-radius:999px;color:var(--tinta-suave);font-weight:500;font-size:.95rem;transition:.2s}
.menu a:hover{background:var(--crema-2);color:var(--tinta)}
.menu a.activo{background:var(--tinta);color:var(--crema)}
.btn-cita{background:var(--naranja)!important;color:#fff!important;padding:11px 22px!important;border-radius:999px;font-weight:600;box-shadow:0 8px 22px rgba(238,124,27,.38)}
.btn-cita:hover{background:var(--naranja-osc)!important;transform:translateY(-1px)}
.hamb{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.hamb span{width:26px;height:3px;background:var(--tinta);border-radius:3px;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:90px 0 100px;
  background:
    radial-gradient(900px 460px at 88% 8%,rgba(238,124,27,.16),transparent 62%),
    radial-gradient(700px 500px at 6% 96%,rgba(189,154,82,.14),transparent 60%),
    linear-gradient(170deg,var(--marfil),var(--crema));
}
.hero::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(189,154,82,.10) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}
.hero .eyebrow{margin-bottom:20px}
.hero h1{margin-bottom:.45em}
.hero h1 .marca-naranja{color:var(--naranja);font-style:italic}
.hero .lead{font-size:1.18rem;color:var(--tinta-suave);max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-foto{position:relative;border-radius:30px 30px 30px 60px;overflow:hidden;box-shadow:var(--sombra-fuerte);aspect-ratio:4/5}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-foto .cap{position:absolute;left:0;right:0;bottom:0;padding:46px 22px 18px;
  background:linear-gradient(to top,rgba(36,29,22,.86),transparent);z-index:2}
.hero-foto .cap small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja-luz);font-weight:700}
.hero-foto .cap b{display:block;font-family:var(--t-display);font-size:1.12rem;color:#fff;font-weight:600;margin-top:3px}
.hero-foto::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.25);border-radius:inherit;z-index:3;pointer-events:none}
.flotante-badge{position:absolute;top:24px;left:-22px;background:#fff;border-radius:16px;padding:13px 18px;box-shadow:var(--sombra);z-index:4;display:flex;align-items:center;gap:11px}
.flotante-badge .pin{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--naranja),var(--oro));display:grid;place-items:center;font-size:1.3rem}
.flotante-badge b{font-family:var(--t-display);font-size:1.05rem;display:block;line-height:1}
.flotante-badge span{font-size:.74rem;color:var(--tinta-suave)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;font-weight:600;font-size:1rem;transition:transform .18s,box-shadow .18s,background .2s;cursor:pointer;border:0;font-family:var(--t-texto)}
.btn-wa{background:var(--verde-wa);color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.4)}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(37,211,102,.5)}
.btn-naranja{background:var(--naranja);color:#fff;box-shadow:0 10px 26px rgba(238,124,27,.4)}
.btn-naranja:hover{transform:translateY(-3px);background:var(--naranja-osc)}
.btn-linea{background:transparent;color:var(--tinta);border:2px solid var(--tinta)}
.btn-linea:hover{background:var(--tinta);color:var(--crema)}

/* ---------- Franja de estadísticas ---------- */
.tiras{background:var(--tinta);color:#f3e8d6;padding:34px 0;position:relative}
.tiras::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--naranja),var(--oro),var(--naranja))}
.tiras-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.tira b{display:block;font-family:var(--t-display);font-size:2rem;color:var(--naranja-luz);line-height:1}
.tira span{font-size:.88rem;opacity:.8;display:block;margin-top:6px}
.tira+.tira{border-left:1px solid rgba(255,255,255,.12)}

/* ---------- Secciones ---------- */
section.bloque{padding:84px 0}
.bloque.alt{background:var(--crema-2)}
.bloque.marfil{background:var(--marfil)}
.titulo-centro{text-align:center;max-width:740px;margin:0 auto 52px}
.titulo-centro .eyebrow{justify-content:center}
.titulo-centro p{color:var(--tinta-suave);margin-top:.4em}

/* retrato (norma cucutanuestra) */
.retrato{float:right;width:320px;max-width:44%;margin:6px 0 22px 34px;border-radius:24px 24px 24px 48px;overflow:hidden;box-shadow:var(--sombra);aspect-ratio:3/4;object-fit:cover;object-position:center top;border:5px solid #fff}
@media(max-width:680px){.retrato{float:none;width:100%;max-width:100%;margin:0 0 26px}}

/* lista chequeo */
.check{list-style:none;display:grid;gap:15px;margin:22px 0}
.check li{display:flex;gap:13px;align-items:flex-start}
.check li::before{content:"✓";flex:0 0 27px;height:27px;width:27px;border-radius:9px;background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;margin-top:3px;box-shadow:0 5px 14px rgba(238,124,27,.35)}

/* tarjetas de servicio */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.card{position:relative;background:var(--marfil);border:1px solid var(--linea);border-radius:var(--radio);padding:38px 34px;box-shadow:var(--sombra);transition:transform .25s,box-shadow .25s;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--naranja),var(--oro));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.card:hover{transform:translateY(-8px);box-shadow:var(--sombra-fuerte)}
.card:hover::before{transform:scaleX(1)}
.card .ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--crema-2),#fff);border:1px solid var(--linea);font-size:1.7rem;margin-bottom:20px}
.card .mas{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:var(--naranja-osc);font-weight:700;font-size:.95rem}
.card:hover .mas{gap:12px}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:p}
.paso{background:var(--marfil);border-radius:var(--radio);padding:34px 28px 28px;border:1px solid var(--linea);position:relative;box-shadow:var(--sombra)}
.paso::before{counter-increment:p;content:counter(p);position:absolute;top:-20px;left:28px;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));color:#fff;display:grid;place-items:center;font-family:var(--t-display);font-weight:600;font-size:1.3rem;box-shadow:0 8px 20px rgba(238,124,27,.42)}
.paso h3{margin-top:12px}

/* caja destacada (CTA) */
.destacado{position:relative;overflow:hidden;border-radius:30px;padding:60px 44px;text-align:center;color:#fff;
  background:linear-gradient(130deg,var(--naranja-osc),var(--naranja) 55%,#f3a04d);box-shadow:var(--sombra-fuerte)}
.destacado::before{content:"";position:absolute;top:-80px;right:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.14)}
.destacado::after{content:"";position:absolute;bottom:-100px;left:-50px;width:260px;height:260px;border-radius:50%;background:rgba(36,29,22,.12)}
.destacado h2{color:#fff;position:relative}
.destacado p{color:rgba(255,255,255,.92);position:relative;max-width:600px;margin:0 auto 26px}
.destacado .btn-wa{position:relative;background:#fff;color:var(--naranja-osc)}
.destacado .btn-wa:hover{background:var(--tinta);color:#fff}

/* galería simple */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.duo figure{border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);position:relative;aspect-ratio:4/3}
.duo img{width:100%;height:100%;object-fit:cover}
.duo figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;background:linear-gradient(to top,rgba(36,29,22,.8),transparent);color:#fff;font-size:.9rem;font-weight:500}

/* FAQ */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--marfil);border:1px solid var(--linea);border-radius:var(--radio-sm);margin-bottom:14px;overflow:hidden;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--sombra)}
.faq summary{cursor:pointer;padding:21px 24px;font-weight:600;color:var(--tinta);font-family:var(--t-display);font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;color:var(--naranja);transition:.25s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;margin:0;color:var(--tinta-suave)}

/* ---------- Pie ---------- */
footer.sitio{background:var(--tinta);color:#cdbfaa;padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr;gap:42px;margin-bottom:40px}
footer.sitio h4{color:#fff;margin-bottom:15px;font-size:1.1rem}
footer.sitio a{color:#cdbfaa}
footer.sitio a:hover{color:var(--naranja-luz)}
.foot-marca img{height:48px;background:#fff;padding:5px 8px;border-radius:10px;margin-bottom:14px}
.foot-links{list-style:none;display:grid;gap:10px}
.sede{background:rgba(255,255,255,.05);border-radius:var(--radio-sm);padding:20px;border-left:3px solid var(--naranja)}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;text-align:center;font-size:.85rem;opacity:.75}
.foot-base a{color:var(--naranja-luz);font-weight:600}

/* ---------- WhatsApp flotante ---------- */
.wa-flot{position:fixed;right:22px;bottom:22px;z-index:90;width:62px;height:62px;border-radius:50%;background:var(--verde-wa);display:grid;place-items:center;box-shadow:0 12px 32px rgba(37,211,102,.5);animation:pulso 2.6s infinite}
.wa-flot svg{width:32px;height:32px;fill:#fff}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- Animación de entrada ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero{padding:60px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .flotante-badge{left:14px}
  .cards,.pasos,.tiras-grid,.duo{grid-template-columns:1fr}
  .tira+.tira{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .menu{position:absolute;top:100%;left:0;right:0;background:var(--marfil);flex-direction:column;align-items:stretch;padding:14px;gap:4px;border-bottom:1px solid var(--linea);box-shadow:var(--sombra);display:none}
  .menu.activo{display:flex}
  .menu a{padding:13px 16px}
  .hamb{display:flex}
}
@media(max-width:560px){
  body{font-size:16px}
  section.bloque{padding:60px 0}
  .tiras-grid{grid-template-columns:1fr 1fr}
  .tira:nth-child(3){border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
  .topbar{font-size:.76rem}
  .destacado{padding:44px 24px}
}