/* ============================================================
   PANORAMIC STUDIO · web-products
   Extiende assets/base.css (el MISMO sistema de ai.panoramicstudio.com.co).
   Aquí solo van los componentes nuevos, usando siempre sus tokens.
   ============================================================ */

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:100; background:var(--primary); color:#04262a; padding:.7rem 1rem; border-radius:8px; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:6px; }

img{ max-width:100%; display:block; }
strong,b{ color:var(--on-surface); font-weight:600; }
em{ font-style:italic; }

/* ---------- HEADER / brand ---------- */
.brand{ display:flex; align-items:center; }
.brand img{ height:34px; width:auto; }
.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:var(--on-surface); margin:5px 0; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobnav{
  display:none; flex-direction:column; gap:.2rem; padding:1rem 24px 1.6rem;
  background:var(--surface-container); border-top:1px solid rgba(255,255,255,.08);
}
.mobnav a{ color:var(--on-surface-variant); text-decoration:none; padding:.85rem .2rem; border-bottom:1px solid rgba(255,255,255,.06); }
.mob-cta{
  margin-top:.9rem; background:var(--primary-container); color:#fff !important; border:0 !important;
  border-radius:9999px; text-align:center; font-family:var(--font-headline); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:12px;
}

/* ---------- HERO ---------- */
.hero-grid{ align-items:stretch; }
.span-7{ grid-column:span 7; }
.span-5{ grid-column:span 5; }
.hero-side{ display:flex; flex-direction:column; gap:var(--bento-gap); }
.hero-stat{ padding:2rem; position:relative; display:flex; flex-direction:column; gap:.5rem; flex:1; justify-content:center; }
.stat-icon{ color:var(--primary); font-size:32px; margin-bottom:.4rem; }
.stat-num{
  font-family:var(--font-headline); font-size:26px; font-weight:700; line-height:1.15;
  background-image:linear-gradient(to right, var(--primary), #86d6df);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-foot{
  display:flex; align-items:center; gap:.6rem; font-size:14px;
  padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.08); margin-top:.25rem;
}
.hero-foot .material-symbols-outlined{ color:var(--primary); font-size:20px; }
.glow-1{ width:420px; height:420px; top:-80px; right:0; }
.glow-2{ width:360px; height:360px; bottom:-120px; left:-80px; z-index:0; }
/* los resplandores no deben crear scroll horizontal */
.hero{ overflow:hidden; }
html,body{ overflow-x:hidden; max-width:100%; }

/* ---------- SECCIONES ---------- */
.section-alt{ background:var(--surface-container-lowest); }
.section-header h2{ margin:0; }

/* Frase definitoria (answer-first): el bloque que la IA puede citar tal cual */
.define-sec{ padding:4rem 0 0; }
.define-lead{
  max-width:900px; margin-inline:auto; text-align:center;
  font-size:19px; line-height:1.65; color:var(--on-surface-variant);
  padding:2rem 2.2rem;
  border-left:2px solid var(--primary);
  background:linear-gradient(90deg, #4bbbc60d, transparent);
  border-radius:0 .75rem .75rem 0;
}
.define-lead strong{ color:var(--on-surface); font-weight:600; }

/* ---------- POR QUÉ (reto) ---------- */
.reto-grid{ gap:var(--bento-gap); }
.reto-card{ padding:2rem; display:flex; flex-direction:column; gap:.9rem; }
.reto-icon{ color:var(--primary); font-size:30px; }
.reto-card h3{ margin:0; }

/* ---------- QUÉ HACEMOS ---------- */
.serv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bento-gap); }
.serv-item{ padding:2rem; display:flex; gap:1.1rem; align-items:flex-start; }
.serv-item > .material-symbols-outlined{
  color:var(--primary); font-size:26px; flex:none;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--surface-container-highest); border:1px solid rgba(255,255,255,.08); border-radius:.5rem;
}
.serv-item h3{ margin:0 0 .45rem; }

/* ---------- PAQUETES ---------- */
.precios{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bento-gap); align-items:stretch; }
.precio{
  font-family:var(--font-headline); font-size:34px; font-weight:700; line-height:1;
  color:var(--on-surface); display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap;
  padding-bottom:1.4rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.precio .moneda{ font-size:20px; color:var(--primary); }
.precio em{
  font-family:var(--font-body); font-style:normal; font-size:13px; font-weight:500;
  color:var(--on-surface-variant); letter-spacing:.02em;
}
.precio-cotiza{ font-size:26px; color:var(--primary); }
/* El sistema base pone `display:flex` en el li, lo que convierte cada <b> del texto
   en un flex item y le abre huecos. Lo devolvemos a texto corrido con el ícono absoluto. */
.service-features li{
  display:block; position:relative; padding-left:1.9rem;
  font-size:15px; line-height:1.55;
}
.service-features li > .material-symbols-outlined{
  position:absolute; left:0; top:1px; font-size:19px; color:var(--primary);
}
.nota-fina{
  font-size:13px; line-height:1.6; color:var(--outline);
  padding:.9rem 1rem; background:#ffffff05; border-left:2px solid var(--outline-variant);
  border-radius:0 .4rem .4rem 0; margin-bottom:1.2rem;
}
.nota-fina b{ color:var(--on-surface-variant); }

/* ---------- CLAUDE / IA (destacado) ---------- */
.ia-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.ia-copy{ display:flex; flex-direction:column; gap:1.4rem; }
.ia-copy h2{ margin:0; }
.ia-features{ display:flex; flex-direction:column; gap:1.4rem; margin-top:.6rem; }
.ia-feat{ display:flex; gap:1rem; align-items:flex-start; }
.ia-feat > .material-symbols-outlined{
  color:var(--primary); font-size:24px; flex:none;
  width:42px; height:42px; display:grid; place-items:center;
  background:#4bbbc61f; border:1px solid #4bbbc633; border-radius:.5rem;
}
.ia-feat h3{ margin:0 0 .3rem; font-size:18px; }
.ia-card{ position:relative; }
.ribbon{
  position:absolute; top:1.25rem; right:1.25rem;
  font-family:var(--font-headline); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--primary-container); color:#fff;
  padding:.35rem .8rem; border-radius:9999px;
}

/* ---------- PROCESO ---------- */
.pasos{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bento-gap); padding:0; margin:0; }
.paso{ padding:2rem; display:flex; flex-direction:column; gap:.7rem; position:relative; overflow:hidden; }
.paso-n{
  font-family:var(--font-headline); font-size:44px; font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px #4bbbc659;
}
.paso h3{ margin:0; }
.paso::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, var(--primary), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s ease;
}
.paso.is-visible::after{ transform:scaleX(1); }

/* ---------- CASOS ---------- */
.casos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bento-gap); }
.caso{
  padding:2rem; display:flex; flex-direction:column; gap:.8rem; text-decoration:none; color:inherit;
}
.caso-tipo{ color:var(--primary); }
.caso h3{ margin:0; }
.caso-link{
  margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.4rem;
  color:var(--on-surface-variant); font-size:14px; font-weight:600; transition:color .3s ease, gap .3s ease;
}
.caso-link .material-symbols-outlined{ font-size:18px; }
.caso:hover .caso-link{ color:var(--primary); gap:.7rem; }

/* ---------- FAQ ---------- */
.faq-list{ display:grid; gap:var(--bento-gap); max-width:820px; margin-inline:auto; }
.faq-list details{ padding:1.4rem 1.6rem; }
.faq-list summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  color:var(--on-surface);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:'+'; font-family:var(--font-body); font-weight:600; color:var(--primary);
  font-size:24px; line-height:1; flex:none; transition:transform .3s ease;
}
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details[open]{ border-color:#4bbbc64d; }
.faq-list p{ margin-top:1rem; }

/* ---------- CONTACTO ---------- */
.contacto-panel{ padding:3.5rem; position:relative; overflow:hidden; }
.contacto-in{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
.contacto-in h2{ margin:.9rem 0 1rem; }
.contacto-cta{ display:flex; flex-direction:column; gap:1rem; }
.contacto-cta .btn{ font-size:13px; padding:1.1rem 1.25rem; text-transform:none; letter-spacing:.02em; word-break:break-word; }
.contacto-cta .material-symbols-outlined{ font-size:20px; }
.contacto-nota{ font-size:14px; text-align:center; }

/* ---------- FOOTER ---------- */
/* .footer-brand es flex-column: sin align-self el logo se estira a lo ancho y se deforma. */
.footer-brand img{ height:32px; width:auto; align-self:flex-start; }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.07); }
.footer-bottom p{ font-size:13px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .serv-grid,
  .precios,
  .casos{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:repeat(2,1fr); }
  .ia-wrap{ grid-template-columns:1fr; gap:2.5rem; }
  .contacto-in{ grid-template-columns:1fr; gap:2rem; }
  .hero-side{ margin-top:var(--bento-gap); }
  .reto-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .reto-grid > div{ grid-column:span 1 !important; }
}
@media (max-width:768px){
  .burger{ display:block; }
  .mobnav.open{ display:flex; }
  .header-inner > .btn-primary{ display:none; }
  .section{ padding:4rem 0; }
  .reto-grid{ grid-template-columns:1fr !important; }
  .pasos{ grid-template-columns:1fr; }
  .contacto-panel{ padding:2rem 1.5rem; }
  .hero-actions .btn{ width:100%; }
  .precio{ font-size:30px; }
}

/* ---------- MOTION REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .animate-on-scroll{ opacity:1 !important; visibility:visible !important; transform:none !important; }
  .paso::after{ transform:scaleX(1); }
}