/* ============================================================
   SORA — PÁGINAS WEB
   ------------------------------------------------------------
   Hoja específica de paginas-web.html. Los tokens, los botones,
   la navegación y el pie viven en base.css; aquí sólo está lo
   que esta página inventa.

   Acento de la página: amarillo (es la página del precio) con
   cian para el plan destacado. Cada página del sitio tiene su
   color — naranja en restaurantes, cian en monitoreo — para que
   se distingan sin salirse de la paleta del isotipo.
   ============================================================ */

/* ============================================================
   1 · ENCABEZADO
   ============================================================ */
/* El padding inferior es lo que separa la tira de garantías de la
   marquesina que sigue: sin él quedan pegadas, porque .promises sólo
   lleva margen arriba. */
.phead{
  padding:calc(var(--nav-h) + 64px) 0 clamp(46px,6vw,78px);
  position:relative; overflow:hidden;
}
.phead__grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:44px; align-items:end }
/* El titular es una pregunta y su <em> con borde ocupa una línea entera:
   al tamaño por defecto de .display las líneas se pisan y el recuadro
   amarillo tapa la de arriba, además de desbordar la columna. Acá va
   más contenido y con aire entre líneas. */
.phead h1{
  font-size:clamp(1.9rem,5.4vw,5rem); line-height:1.04;
  margin-top:18px; max-width:15ch;
}
.phead h1 em{ display:inline-block }
.phead__lead{ margin-top:24px; font-size:1.06rem; max-width:52ch }
.phead__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px }

/* ---------- Maqueta: una landing que se arma sola ----------
   Mismo papel que el teléfono con el chat en restaurantes: mostrar el
   producto funcionando en vez de describirlo. Los bloques entran uno a
   uno y, cuando la página ya no cabe en el marco, se desplaza hacia
   arriba — de ahí la sensación de que va bajando. El acento (--c) lo
   cambia el JS con cada rubro. */
.lp{
  --c:var(--orange);
  border:var(--bd); box-shadow:var(--sh-lg); background:var(--white);
  width:min(420px,100%); margin-inline:auto; overflow:hidden;
}
.lp__bar{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  background:var(--ink); color:var(--paper); border-bottom:var(--bw) solid var(--ink);
}
.lp__dots{ display:flex; gap:5px; flex-shrink:0 }
.lp__dots i{ width:9px; height:9px; border-radius:50%; background:var(--paper); opacity:.45 }
.lp__url{
  flex:1; background:#2a2a2a; padding:5px 10px; font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.04em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; transition:color .3s;
}
.lp__live{
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.14em;
  color:var(--c); flex-shrink:0; transition:color .3s;
}

.lp__view{
  height:342px; overflow:hidden; position:relative;
  /* Retícula tenue: si el JS no corre, el marco vacío se lee como
     un lienzo y no como algo roto. Igual que el chat de restaurantes. */
  background:
    linear-gradient(rgba(17,17,17,.05) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, rgba(17,17,17,.05) 1px, transparent 1px) 0 0/22px 100%,
    var(--paper);
}
/* El degradado de abajo insinúa que la página sigue más allá del marco */
.lp__view::after{
  content:''; position:absolute; inset:auto 0 0; height:46px; pointer-events:none;
  background:linear-gradient(transparent, var(--paper));
}
.lp__page{
  display:grid; gap:8px; padding:10px; align-content:start;
  transition:transform .85s var(--ease);
}

/* Bloques del wireframe. Entran igual que los globos del chat. */
.lp__b{ animation:lpin .38s var(--ease) both }
@keyframes lpin{ from{ opacity:0; transform:translateY(14px) scale(.97) } }

.lp__nav{ display:flex; align-items:center; gap:7px; border:3px solid var(--ink); background:var(--white); padding:9px 10px }
.lp__nav b{ width:26px; height:14px; background:var(--c); flex-shrink:0 }
.lp__nav i{ height:5px; background:var(--ink); opacity:.28; flex:1; max-width:34px }

.lp__hero{ border:3px solid var(--ink); background:var(--c); padding:16px 14px; display:grid; gap:7px }
.lp__hero i{ height:13px; background:var(--ink) }
.lp__hero i:nth-child(2){ width:62% }
.lp__hero u{ height:19px; width:82px; background:var(--ink); margin-top:5px; display:block }

.lp__text{ display:grid; gap:6px; padding:3px 2px }
.lp__text i{ height:6px; background:var(--ink); opacity:.22 }
.lp__text i:nth-child(2){ width:88% } .lp__text i:nth-child(3){ width:64% }

.lp__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px }
.lp__cards span{ border:3px solid var(--ink); background:var(--white); height:56px; display:grid; align-content:end; gap:4px; padding:6px }
.lp__cards span::before{ content:''; height:16px; background:var(--c); opacity:.55 }
.lp__cards span::after{ content:''; height:5px; background:var(--ink); opacity:.28 }

.lp__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.lp__grid span{ aspect-ratio:1; border:3px solid var(--ink); background:var(--c); opacity:.35 }
.lp__grid span:nth-child(2n){ opacity:.6 }

.lp__cta{ border:3px solid var(--ink); background:var(--ink); padding:14px; display:grid; gap:7px; justify-items:center }
.lp__cta i{ height:9px; width:70%; background:var(--paper); opacity:.5 }
.lp__cta u{ height:18px; width:96px; background:var(--c); display:block }

.lp__foot{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:11px 13px; border-top:var(--bw) solid var(--ink); background:var(--white);
}
.lp__rubro{
  font-family:var(--f-display); text-transform:uppercase; font-size:.84rem;
  line-height:1; border:3px solid var(--ink); background:var(--c);
  padding:5px 9px; white-space:nowrap; flex-shrink:0;
}
.lp__hint{ font-family:var(--f-mono); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; text-align:right; line-height:1.5 }



/* Tira de garantías bajo el héroe */
.promises{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bw);
  border:var(--bd); background:var(--ink); margin-top:52px;
}
.promises div{ background:var(--paper); padding:20px 18px; transition:.2s }
.promises div:hover{ background:var(--c,var(--yellow)) }
.promises b{ display:block; font-family:var(--f-display); text-transform:uppercase; font-size:1.02rem; line-height:1 }
.promises span{ display:block; margin-top:8px; font-size:.82rem; opacity:.78 }
@media (max-width:1000px){ .phead__grid{ grid-template-columns:1fr; gap:36px } }
@media (max-width:820px){ .promises{ grid-template-columns:1fr 1fr } }
@media (max-width:480px){ .promises{ grid-template-columns:1fr } }

/* ============================================================
   2 · LO QUE CUESTA NO TENERLA
   ============================================================ */
.costs{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.cost{
  border:var(--bd); background:var(--white); box-shadow:var(--sh); padding:26px 24px;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), background .26s;
}
.cost:hover{ transform:translate(-5px,-5px); box-shadow:var(--sh-lg); background:var(--c,var(--cyan)) }
.cost__n{ font-family:var(--f-display); font-size:2.5rem; line-height:.85; -webkit-text-stroke:2px var(--ink); color:transparent }
.cost h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.15rem; line-height:1; margin:14px 0 10px }
.cost p{ font-size:.89rem; opacity:.85 }
@media (max-width:1000px){ .costs{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .costs{ grid-template-columns:1fr } }

/* ============================================================
   3 · PLANES CON PRECIO
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start }
.plan{
  border:var(--bd); background:var(--white); box-shadow:var(--sh);
  padding:28px 24px; display:flex; flex-direction:column; position:relative;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg) }
.plan--pop{ background:var(--cyan); transform:translateY(-16px); padding-top:44px }
.plan--pop:hover{ transform:translateY(-22px) }
.plan--pop::before{
  content:'★ MÁS CONTRATADO'; position:absolute; top:-3px; left:-3px; right:-3px;
  background:var(--ink); color:var(--yellow); text-align:center;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; padding:7px 4px;
}
.plan__kick{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6 }
.plan h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.6rem; line-height:.95; margin:8px 0 0 }
.plan__price{
  font-family:var(--f-display); font-size:2.6rem; line-height:.9; letter-spacing:-.03em;
  margin:16px 0 0; display:flex; align-items:flex-start; gap:3px;
}
.plan__price sup{ font-size:.38em; line-height:1; margin-top:.3em }
.plan__price i{
  font-style:normal; font-family:var(--f-mono); font-size:.26em; letter-spacing:.1em;
  align-self:flex-end; opacity:.65; text-transform:uppercase; margin-bottom:.35em;
}
.plan__note{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.11em;
  opacity:.62; margin-top:9px; text-transform:uppercase;
}
.plan__meta{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px }
.plan ul{ list-style:none; margin:20px 0; display:grid; gap:9px }
.plan li{ font-size:.87rem; display:flex; gap:10px; align-items:flex-start }
.plan li::before{ content:'▸'; font-weight:700; color:var(--magenta) }
.plan--pop li::before{ color:var(--ink) }
.plan li.off{ opacity:.35 }
.plan li.off::before{ content:'×'; color:inherit }
.plan__for{ font-size:.82rem; border-top:2px solid var(--ink); padding-top:13px; margin-bottom:18px; opacity:.82 }
.plan .btn{ margin-top:auto; justify-content:center; width:100% }
@media (max-width:1200px){
  .plans{ grid-template-columns:1fr 1fr }
  .plan--pop{ transform:none }
  .plan--pop:hover{ transform:translateY(-6px) }
}
@media (max-width:660px){ .plans{ grid-template-columns:1fr } }

/* Nota de formas de pago, pegada bajo los planes */
.payline{
  border:var(--bd); background:var(--yellow); box-shadow:var(--sh); margin-top:26px;
  padding:20px 24px; display:flex; gap:24px; align-items:center; flex-wrap:wrap;
}
.payline b{ font-family:var(--f-display); text-transform:uppercase; font-size:1.05rem; line-height:1; flex-shrink:0 }
.payline span{ font-size:.88rem; opacity:.85 }

/* ============================================================
   4 · SIEMPRE INCLUIDO
   ============================================================ */
.incl{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--bw); border:var(--bd); background:var(--ink) }
.incl div{ background:var(--paper); padding:22px 20px; transition:.2s }
.incl div:hover{ background:var(--yellow); transform:scale(1.04); z-index:2; position:relative }
.incl b{ display:block; font-weight:700; font-size:.95rem }
.incl span{ display:block; margin-top:6px; font-size:.8rem; opacity:.72 }

/* ============================================================
   5 · TABLAS (extras y comparativa)
   ============================================================ */
.matrix{ overflow-x:auto; border:var(--bd); box-shadow:var(--sh); background:var(--white) }
.matrix table{ border-collapse:collapse; width:100%; min-width:680px }
.matrix th,.matrix td{ border:2px solid var(--ink); padding:13px 15px; text-align:center; font-size:.85rem }
.matrix thead th{
  background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.matrix thead th.us{ background:var(--cyan); color:var(--ink) }
.matrix tbody th{ text-align:left; font-weight:700; background:var(--paper); font-size:.82rem }
.matrix tbody td.price{ font-family:var(--f-display); font-size:1.02rem; letter-spacing:-.01em; background:var(--yellow) }
.matrix tbody td.y{ background:var(--yellow); font-weight:700 }
.matrix tbody td.n{ opacity:.34 }
.matrix tbody td.us{ background:var(--cyan); font-weight:700 }
.matrix tbody tr:hover td{ background:var(--cyan) }
.matrix tbody tr:hover td.n{ background:var(--cyan); opacity:.55 }
.matrix caption{
  caption-side:top; text-align:left; background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:10px 15px;
}

/* ============================================================
   6 · CUIDO MENSUAL
   ============================================================ */
.care{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.care__c{ border:var(--bd); box-shadow:var(--sh); background:var(--white); padding:28px 24px; display:flex; flex-direction:column }
.care__c--mid{ background:var(--magenta); color:var(--white) }
.care__c h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.45rem; line-height:1 }
.care__c .m{ font-family:var(--f-display); font-size:2.2rem; line-height:1; margin:14px 0 0; display:flex; align-items:flex-start; gap:3px }
.care__c .m sup{ font-size:.4em; margin-top:.3em }
.care__c .m i{ font-style:normal; font-family:var(--f-mono); font-size:.3em; align-self:flex-end; opacity:.72; letter-spacing:.08em; margin-bottom:.3em }
.care__c ul{ list-style:none; display:grid; gap:9px; margin:20px 0 22px }
.care__c li{ font-size:.87rem; display:flex; gap:10px } .care__c li::before{ content:'▸'; font-weight:700 }
.care__c .btn{ margin-top:auto; justify-content:center }
@media (max-width:900px){ .care{ grid-template-columns:1fr } }

/* ============================================================
   7 · TIPOS DE PÁGINA WEB
   ============================================================ */
.fil{ display:flex; gap:var(--bw); flex-wrap:wrap; border:var(--bd); background:var(--ink); padding:var(--bw); margin-bottom:26px }
.fil button{
  border:0; background:var(--paper); cursor:pointer; padding:11px 17px; font-weight:700;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; transition:.16s;
}
.fil button:hover{ background:var(--cyan) }
.fil button[aria-pressed="true"]{ background:var(--yellow); box-shadow:inset 0 0 0 3px var(--ink) }

.types{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px }
.type{
  border:var(--bd); background:var(--white); box-shadow:var(--sh-sm); padding:20px 18px;
  position:relative; transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s;
}
.type:hover{ transform:translate(-4px,-4px); box-shadow:var(--sh); background:var(--c,var(--yellow)) }
.type::before{ content:''; position:absolute; inset:0 auto 0 0; width:6px; background:var(--c,var(--yellow)) }
.type b{ display:block; font-family:var(--f-display); text-transform:uppercase; font-size:1.02rem; line-height:1.05; padding-left:12px }
.type span{ display:block; margin-top:8px; font-size:.81rem; opacity:.8; padding-left:12px }
.type em{
  display:inline-block; margin-top:11px; margin-left:12px; font-style:normal;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  border:2px solid var(--ink); padding:3px 7px; background:var(--paper);
}
.type[hidden]{ display:none }
.types__count{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-top:22px }

/* ============================================================
   8 · PROCESO
   ============================================================ */
.psteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bw); border:var(--bd); background:var(--ink) }
.psteps article{ background:var(--paper); padding:28px 24px }
.psteps b{ font-family:var(--f-display); font-size:2.6rem; line-height:.85; display:block; color:var(--c,var(--yellow)); -webkit-text-stroke:2px var(--ink) }
.psteps h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.1rem; line-height:1; margin:14px 0 9px }
.psteps p{ font-size:.86rem; opacity:.82 }
.psteps .when{ display:inline-block; margin-top:13px; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; border:2px solid var(--ink); padding:4px 8px }
@media (max-width:1000px){ .psteps{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .psteps{ grid-template-columns:1fr } }

/* ============================================================
   9 · PREGUNTAS
   ============================================================ */
.faq{ border:var(--bd); background:var(--white); box-shadow:var(--sh) }
.faq details{ border-bottom:3px solid var(--ink) }
.faq details:last-child{ border-bottom:0 }
.faq summary{
  cursor:pointer; padding:20px 22px; font-family:var(--f-display); text-transform:uppercase;
  font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:16px; transition:.2s;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-size:1.4rem; line-height:1 }
.faq details[open] summary{ background:var(--yellow) }
.faq details[open] summary::after{ content:'–' }
.faq summary:hover{ background:var(--cyan) }
.faq details[open] summary:hover{ background:var(--yellow) }
.faq p{ padding:0 22px 22px; font-size:.92rem; opacity:.85; max-width:78ch }

/* ============================================================
   10 · AJUSTES MÓVIL
   ============================================================ */
@media (hover:none){
  .cost:hover,.type:hover{ transform:none; box-shadow:var(--sh) }
  .plan:hover{ transform:none; box-shadow:var(--sh) }
  .plan--pop:hover{ transform:none }
  .incl div:hover{ transform:none }
}

@media (max-width:600px){
  .phead{ padding-top:calc(var(--nav-h) + 34px) }
  .phead__lead{ font-size:.97rem }
  .phead__cta .btn{ width:100%; justify-content:center }
  .lp{ box-shadow:var(--sh) }
  .lp__view{ height:290px }
  .promises{ margin-top:34px }
  .plan{ padding:24px 20px }
  .plan--pop{ padding-top:42px }
  .care__c{ padding:24px 20px }
  .payline{ flex-direction:column; gap:10px; align-items:flex-start }
  .matrix th,.matrix td{ padding:10px 11px; font-size:.78rem }
  /* Los filtros pasan a carrusel horizontal en vez de apilarse en cuatro filas */
  .fil{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none }
  .fil::-webkit-scrollbar{ display:none }
  .fil button{ flex:0 0 auto; padding:10px 14px; font-size:.72rem }
  .types{ grid-template-columns:1fr }
  .faq summary{ padding:16px 17px; font-size:.9rem }
  .faq p{ padding:0 17px 18px; font-size:.88rem }
}