/* ==========================================================================
   apsmx.com — hoja única. 26-sep-2026, versión 3.

   Qué cambió: el sitio deja de ser una sucesión de cajas con texto y pasa a
   ser una idea por pantalla, con la foto mandando y mucho aire alrededor.

   Lo que se conservó del sitio original, porque es la marca:
     naranja      #E5692C   (theme-orange.css, 53 apariciones)
     aclarado     #F0864A   (custom.css, para fondos claros dentro del oscuro)
     titulares    Raleway
     cuerpo       Open Sans

   Lo que cambió respecto de la versión anterior:
     · el fondo base es negro y no #1a1a1a, para que la foto respire
     · las esquinas vuelven a ser redondeadas (el tema viejo las usaba rectas)
     · los botones de sección se volvieron ligas de texto con flecha
     · aparecen íconos, que el sitio no tenía
   ========================================================================== */

:root{
  --naranja:#e5692c;
  --naranja-claro:#f0864a;   /* sobre #1c1c1e y más claros */
  --naranja-relleno:#c04f18; /* con blanco da 4.80:1 */
  --naranja-hover:#a8420d;
  --acento:var(--naranja-claro);

  --tinta:#f5f5f7;
  --tinta-2:#b9b9b9;
  --tinta-3:#8e8e93;

  --negro:#000000;
  --fondo-2:#1c1c1e;
  --fondo-3:#101012;
  --linea:rgba(255,255,255,.12);
  --linea-suave:rgba(255,255,255,.07);

  --ancho:1180px;
  --angosto:820px;
  --radio:18px;
  --radio-g:28px;
  --titulos:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;background:var(--negro);color:var(--tinta-2);
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* --------------------------------------------------------- tipografía */
h1,h2,h3,h4{font-family:var(--titulos);color:var(--tinta);margin:0 0 20px;
  letter-spacing:-.02em}
h1{font-size:clamp(38px,7vw,78px);line-height:1.05;font-weight:200}
h2{font-size:clamp(28px,4.4vw,52px);line-height:1.1;font-weight:200}
h3{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
h4{font-size:17px;line-height:1.4;font-weight:600}
p{margin:0 0 18px}
strong,b{color:var(--tinta);font-weight:600}
.entrada{font-size:clamp(18px,2.3vw,24px);line-height:1.5;color:var(--tinta-2);
  font-weight:300;max-width:34ch}
.kicker{display:block;font-family:var(--titulos);font-size:12px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--acento);margin:0 0 18px}

/* ligas de texto con flecha: el llamado a la acción de esta plantilla */
.ligas{display:flex;flex-wrap:wrap;gap:28px;margin:28px 0 0;font-size:18px}
.ligas a{color:var(--acento);font-weight:400}
.ligas a span{display:inline-block;transition:transform .25s ease}
.ligas a:hover{text-decoration:none}
.ligas a:hover span{transform:translateX(4px)}

/* --------------------------------------------------------- íconos */
.ic{width:1em;height:1em;display:block}
/* el tamaño del ícono lo fija el font-size del contenedor, así que el
   selector tiene que ganarle a `.loza p` y a `.bloque p` */
.ic-caja,.loza .ic-caja,.bloque .ic-caja{font-size:30px;color:var(--acento);
  margin:0 0 18px;line-height:1}
.portada .icono-grande,.bloque .icono-grande{font-size:64px}
.icono-grande{font-size:64px;color:var(--acento);margin:0 0 26px;
  display:flex;justify-content:center}

/* --------------------------------------------------------- cabecera */
.cabecera{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.72);
  border-bottom:1px solid var(--linea-suave);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px)}
.barra{display:flex;align-items:center;gap:20px;min-height:58px}
.marca{display:flex;align-items:center;gap:9px;font-family:var(--titulos);
  color:var(--tinta);font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;flex:none}
.marca:hover{color:var(--tinta);text-decoration:none}
.marca b{color:var(--acento);font-weight:700}
.menu{margin-left:auto}
.menu ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.menu a,.abre-sub{display:block;padding:8px 14px;font-family:var(--titulos);
  font-size:12.5px;font-weight:600;letter-spacing:.6px;color:var(--tinta-2);
  background:none;border:0;cursor:pointer}
.menu a:hover,.abre-sub:hover{color:var(--tinta);text-decoration:none}
.menu a.activo,.menu li.activo>.abre-sub{color:var(--tinta)}
.tiene-sub{position:relative}
.flecha{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7}
.menu ul.sub{display:none;position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%);min-width:220px;background:rgba(28,28,30,.96);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--linea);border-radius:var(--radio);padding:8px;
  flex-direction:column;align-items:stretch;gap:0;
  box-shadow:0 20px 44px rgba(0,0,0,.6)}
.menu .tiene-sub.abierto ul.sub{display:flex}
.menu ul.sub li{width:100%}
.menu ul.sub a{padding:9px 14px;border-radius:10px;letter-spacing:0;font-size:14px}
.menu ul.sub a:hover{background:rgba(255,255,255,.08);color:var(--tinta)}
.hamburguesa{display:none;margin-left:auto;background:none;border:0;padding:8px;
  cursor:pointer}
.hamburguesa span{display:block;width:22px;height:1.5px;background:var(--tinta);
  margin:5px 0}

/* --------------------------------------------------------- migas */
.migas{font-size:12.5px;color:var(--tinta-3);background:var(--negro)}
.migas .contenedor{padding-top:16px;padding-bottom:0}
.migas a{color:var(--tinta-3)}
.migas a:hover{color:var(--acento)}
.migas .sep{margin:0 8px;opacity:.5}

/* --------------------------------------------------------- portada */
.portada{padding:88px 0 0;text-align:center;overflow:hidden}
.portada .contenedor{max-width:var(--angosto)}
.portada h1{margin-bottom:22px}
.portada .entrada{margin:0 auto;max-width:36ch}
.portada .ligas{justify-content:center;margin-top:30px}
.portada-img{margin:56px auto 0;max-width:1180px;padding:0 24px}
.portada-img img{width:100%;border-radius:var(--radio-g)}
.portada-img.angosta{max-width:900px}
.portada.con-icono{padding-top:72px}

/* --------------------------------------------------------- escenas */
.escena{padding:110px 0}
.escena.tono{background:var(--fondo-3)}
.escena-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:70px;
  align-items:center}
.escena.izq .escena-img{order:-1}
.escena-img img{width:100%;border-radius:var(--radio-g)}
.escena-texto{min-width:0}
.escena-texto p{max-width:46ch}
/* una tabla dentro de una escena no puede empujar la columna: el item de
   rejilla necesita min-width:0 para que el envoltorio pueda hacer scroll */
.escena-texto .tabla-envoltura{max-width:100%}

.bloque{padding:110px 0}
.bloque.tono{background:var(--fondo-3)}
.bloque.centrado{text-align:center}
.bloque.centrado .contenedor{max-width:var(--angosto)}
.bloque.centrado p{margin-left:auto;margin-right:auto;max-width:56ch}
.bloque.apretado{padding:72px 0}
.bloque p{max-width:64ch}
.bloque.centrado .rejilla,.bloque.centrado .tabla-envoltura,
.bloque.centrado .faq{text-align:left;max-width:none}

/* --------------------------------------------------------- lozas */
.rejilla{display:grid;gap:22px;margin-top:44px}
.rejilla.col2{grid-template-columns:repeat(2,1fr)}
.rejilla.col3{grid-template-columns:repeat(3,1fr)}
.rejilla.col4{grid-template-columns:repeat(4,1fr)}
.loza{background:var(--fondo-2);border-radius:var(--radio-g);padding:34px 32px 30px;
  text-align:left;transition:background .25s ease,transform .25s ease}
.loza:hover{background:#242427;transform:translateY(-2px)}
.tono .loza{background:#19191b}
.loza h3{margin-bottom:10px}
.loza p{font-size:15.5px;line-height:1.6;color:var(--tinta-2);margin:0;max-width:none}
.loza .mas{margin:18px 0 0;font-size:15px}
.loza .mas a span{display:inline-block;transition:transform .25s ease}
.loza:hover .mas a span{transform:translateX(4px)}

/* --------------------------------------------------------- cifras */
.cifras{display:flex;flex-wrap:wrap;gap:56px;justify-content:center;margin:48px 0 0}
.cifra{text-align:center}
.cifra .num{display:block;font-family:var(--titulos);font-size:clamp(40px,6vw,64px);
  font-weight:200;color:var(--tinta);line-height:1;letter-spacing:-.03em}
.cifra .pie{display:block;margin-top:12px;font-size:14px;color:var(--tinta-3);
  max-width:20ch}

/* --------------------------------------------------------- botones */
.botones{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0;justify-content:center}
.boton{display:inline-block;font-family:var(--titulos);font-size:15px;
  font-weight:600;letter-spacing:.3px;padding:14px 30px;border-radius:999px;
  background:var(--naranja-relleno);color:#fff;border:1px solid var(--naranja-relleno);
  transition:background .25s ease,border-color .25s ease}
.boton:hover{background:var(--naranja-hover);border-color:var(--naranja-hover);
  color:#fff;text-decoration:none}
.boton.grande{font-size:17px;padding:16px 38px}
.boton.fantasma{background:none;color:var(--acento);border-color:var(--linea)}
.boton.fantasma:hover{background:rgba(255,255,255,.06);border-color:var(--acento);
  color:var(--acento)}

/* --------------------------------------------------------- tablas */
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--radio);background:var(--fondo-2);margin:44px 0 0}
.tono .tabla-envoltura{background:#19191b}
table{width:100%;min-width:560px;border-collapse:collapse;font-size:15.5px;
  color:var(--tinta-2)}
th{text-align:left;padding:18px 24px;font-family:var(--titulos);font-size:11px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tinta-3);
  border-bottom:1px solid var(--linea)}
td{padding:16px 24px;border-bottom:1px solid var(--linea-suave);vertical-align:top}
tr:last-child td{border-bottom:0}
.comparativa td.antes{color:var(--tinta-3)}
.comparativa td.despues{color:var(--tinta);font-weight:600}
.comparativa td.despues::before{content:"\2192  ";color:var(--acento);font-weight:400}

/* --------------------------------------------------------- faq */
.faq{margin-top:44px;border-top:1px solid var(--linea-suave)}
.faq details{border-bottom:1px solid var(--linea-suave)}
.faq summary{padding:24px 4px;cursor:pointer;font-family:var(--titulos);
  font-size:19px;font-weight:600;color:var(--tinta);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  letter-spacing:-.01em}
.faq summary:hover{color:var(--acento)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acento);font-size:26px;font-weight:200;
  line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .respuesta{padding:0 4px 26px;max-width:66ch}
.faq .respuesta p{margin:0;color:var(--tinta-2);font-size:16px;line-height:1.7}

/* --------------------------------------------------------- cierre */
.cierre{background:var(--fondo-3);padding:120px 0;text-align:center}
.cierre .contenedor{max-width:var(--angosto)}
.cierre p{color:var(--tinta-2);max-width:48ch;margin-left:auto;margin-right:auto}
.cierre-nota{font-size:15px;margin-top:26px;color:var(--tinta-3)}
.cierre-nota a{color:var(--acento);font-weight:600}

/* --------------------------------------------------------- pie */
.pie{background:var(--negro);border-top:1px solid var(--linea-suave);
  padding:64px 0 32px;font-size:14px;line-height:1.7;color:var(--tinta-3)}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.pie-marca{font-family:var(--titulos);font-size:13px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--tinta);margin-bottom:14px}
.pie-titulo{font-family:var(--titulos);font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--tinta-3);margin-bottom:16px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:9px}
.pie a{color:var(--tinta-2)}
.pie a:hover{color:var(--acento)}
.pie-legal{margin:52px 0 0;padding-top:22px;border-top:1px solid var(--linea-suave);
  font-size:12px;color:var(--tinta-3)}

/* --------------------------------------------------------- responsivo */
@media (max-width:1199px){
  .escena{padding:88px 0}
  .bloque{padding:88px 0}
  .escena-rejilla{gap:48px}
  .cierre{padding:96px 0}
}
@media (max-width:991px){
  .hamburguesa{display:block}
  .menu{position:absolute;top:100%;left:0;right:0;background:rgba(18,18,20,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--linea);display:none;padding:10px 20px 20px;
    max-height:78vh;overflow-y:auto}
  .menu.abierto{display:block}
  .menu ul{flex-direction:column;align-items:stretch;gap:0}
  .menu a,.abre-sub{padding:14px 6px;width:100%;text-align:left;font-size:15px;
    letter-spacing:0}
  .menu ul.sub{position:static;transform:none;border:0;box-shadow:none;
    background:none;padding:0 0 10px 18px;-webkit-backdrop-filter:none;
    backdrop-filter:none}
  .menu .tiene-sub.abierto ul.sub{display:flex}
  .escena-rejilla{grid-template-columns:1fr;gap:36px}
  .escena.izq .escena-img{order:0}
  .escena-texto p{max-width:none}
  .rejilla.col4{grid-template-columns:repeat(2,1fr)}
  .pie-rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .portada{padding-top:56px}
  .portada-img{margin-top:40px;padding:0 20px}
  .escena,.bloque{padding:64px 0}
  .cierre{padding:72px 0}
  .rejilla{gap:16px;margin-top:32px}
  .rejilla.col3,.rejilla.col4{grid-template-columns:1fr}
  .loza{padding:28px 24px 24px}
  .cifras{gap:36px;margin-top:36px}
  .faq summary{font-size:17px;padding:20px 2px}
  .icono-grande{font-size:52px}
  .ligas{gap:20px;font-size:17px}
  th,td{padding:14px 18px}
}
@media (max-width:560px){
  .rejilla.col2{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr;gap:32px}
  .botones .boton{width:100%;text-align:center}
  .cifras{flex-direction:column;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}
@media print{
  .cabecera,.migas,.cierre,.pie,.portada-img{display:none}
  body{background:#fff;color:#292929}
}