/* PCpráctico — hoja de estilo común */
:root{
  --pizarra:#262B40;      /* azul pizarra de marca: cabecera, pie, titulares */
  --pizarra-2:#323852;
  --cian:#08B4DA;         /* cian de marca: botones y detalles */
  --cian-texto:#06779A;   /* cian oscurecido para enlaces sobre blanco (contraste AA) */
  --texto:#2B3040;
  --suave:#5D6478;
  --linea:#DCE0E8;
  --gris:#F1F3F7;
  --verde:#2E9A5A; --ambar:#D99A00; --rojo:#CF4136;
  --ancho:1120px;
  --r:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--texto);background:#fff}
img{max-width:100%;height:auto}
a{color:var(--cian-texto)}
a:hover{color:var(--pizarra)}
:focus-visible{outline:3px solid var(--cian);outline-offset:2px}
h1,h2,h3{color:var(--pizarra);line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,2.6vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.medida{max-width:66ch}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:10}

/* Cabecera */
.cabecera{background:var(--pizarra);color:#fff;position:sticky;top:0;z-index:30;border-bottom:1px solid #343A52}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.cabecera .logo img{display:block;width:220px;height:auto}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu a{white-space:nowrap;color:#E6E9F2;text-decoration:none;padding:8px 12px;border-radius:var(--r);font-size:.97rem}
.menu a:hover,.menu a[aria-current=page]{color:#fff;background:var(--pizarra-2)}
.menu .boton{margin-left:8px;color:var(--pizarra)}
.menu .boton:hover{background:#fff;color:var(--pizarra)}
.menu-boton{display:none;background:none;border:1px solid #5A6080;color:#fff;border-radius:var(--r);padding:8px 12px;font:inherit;cursor:pointer}

/* Botones */
.boton{display:inline-block;background:var(--cian);color:var(--pizarra);font-weight:700;text-decoration:none;border:0;border-radius:var(--r);padding:13px 22px;font-size:1rem;cursor:pointer;font-family:inherit}
.boton:hover{background:#fff;color:var(--pizarra);box-shadow:inset 0 0 0 2px var(--cian)}
.boton-linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.boton-linea:hover{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px var(--cian)}

/* Portada */
.portada{background:var(--pizarra);color:#E6E9F2;padding:56px 0 72px}
.portada .contenedor{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.portada h1{color:#fff}
.portada .entradilla{font-size:1.2rem;max-width:34ch;color:#E6E9F2}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.portada .nota{margin-top:18px;font-size:.92rem;color:#AEB4C8}

/* Informe de muestra (elemento distintivo) */
.informe{background:#fff;color:var(--texto);border-radius:4px;padding:28px 28px 22px;box-shadow:0 30px 60px -20px rgba(5,8,20,.55);transform:rotate(1.2deg);max-width:470px;justify-self:end;font-size:.95rem}
.informe-cab{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--pizarra);padding-bottom:12px;margin-bottom:6px}
.informe-cab strong{display:block;font-size:1.05rem;color:var(--pizarra)}
.informe-cab span{color:var(--suave);font-size:.85rem}
.informe-cab img{width:110px}
.informe ul{list-style:none;margin:0;padding:0}
.informe li{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea)}
.informe li:last-child{border-bottom:0}
.informe li b{display:block;color:var(--pizarra);font-weight:600}
.informe li small{color:var(--suave);font-size:.86rem;line-height:1.45}
.luz{width:14px;height:14px;border-radius:50%;margin-top:5px}
.luz.rojo{background:var(--rojo)}.luz.ambar{background:var(--ambar)}.luz.verde{background:var(--verde)}
.informe-pie{margin-top:10px;font-size:.82rem;color:var(--suave)}

/* Secciones */
.seccion{padding:80px 0}
.seccion.gris{background:var(--gris)}
.cabeza{margin-bottom:40px}
.cabeza p{color:var(--suave);font-size:1.1rem}

/* Lista de servicios en filas */
.filas{border-top:1px solid var(--linea)}
.fila{display:grid;grid-template-columns:240px minmax(0,1fr) 190px;gap:32px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--linea)}
.fila h3{margin:0}
.fila p{margin:0;color:var(--suave)}
.fila a.ir{font-weight:600;justify-self:end;text-align:right}

/* Proceso (secuencia real) */
.pasos{counter-reset:paso;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pasos li{counter-increment:paso;border-top:3px solid var(--pizarra);padding-top:18px}
.pasos li::before{content:counter(paso);display:block;font-size:2.4rem;font-weight:800;color:var(--cian);line-height:1;margin-bottom:12px}
.pasos p{color:var(--suave);margin:0}

/* Dos columnas */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.lista{padding-left:1.1em;margin:0 0 1em}
.lista li{margin-bottom:.55em}
.lista li::marker{color:var(--cian-texto)}

/* Bloque destacado */
.aviso{border-left:4px solid var(--ambar);background:#FFF8E6;padding:20px 24px;border-radius:0 var(--r) var(--r) 0;margin:24px 0}
.aviso p:last-child{margin:0}

/* Planes de mantenimiento */
.planes{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linea);border-radius:var(--r)}
.plan{padding:28px;border-right:1px solid var(--linea)}
.plan:last-child{border-right:0}
.plan.recomendado{background:var(--pizarra);color:#E6E9F2;border-radius:0 var(--r) var(--r) 0}
.plan.recomendado h3{color:#fff}
.plan .para{color:var(--suave);margin-bottom:16px}
.plan.recomendado .para{color:#AEB4C8}
.plan ul{padding-left:1.1em;margin:0}
.plan li{margin-bottom:.5em}

/* Llamada final */
.llamada{background:var(--pizarra);color:#E6E9F2;padding:64px 0}
.llamada .contenedor{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.llamada h2{color:#fff;margin:0 0 .3em}
.llamada p{margin:0;max-width:52ch}

/* Formulario */
.formulario{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:32px}
.campo{margin-bottom:18px}
.campo label{display:block;font-weight:600;color:var(--pizarra);margin-bottom:6px}
.campo .ayuda{font-weight:400;color:var(--suave);font-size:.9rem}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid #B9BFCC;border-radius:var(--r);background:#fff;color:var(--texto)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--cian-texto);outline:2px solid var(--cian);outline-offset:0}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.legal{font-size:.88rem;color:var(--suave)}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin:8px 0 20px}
.casilla input{margin-top:4px}

/* Pie */
.pie{background:#1D2133;color:#AEB4C8;padding:56px 0 28px;font-size:.95rem}
.pie .rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pie h2{font-size:1rem;color:#fff;margin-bottom:12px}
.pie a{color:#E6E9F2}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:6px}
.pie .inferior{border-top:1px solid #343A52;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem}
.pie .zonas{margin-top:14px;font-size:.88rem}

/* Aviso de cookies */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px;box-shadow:0 10px 30px rgba(20,25,45,.18);font-size:.92rem;z-index:20}
.cookies p{margin:0 0 12px}
.cookies .acciones{display:flex;gap:10px;flex-wrap:wrap}
.cookies .boton{padding:9px 16px;font-size:.92rem}

/* Cabecera de página interior */
.titulo-pagina{background:var(--pizarra);color:#E6E9F2;padding:56px 0 60px}
.titulo-pagina h1{color:#fff;max-width:22ch}
.titulo-pagina p{font-size:1.15rem;max-width:58ch;margin:0}

@media (max-width:900px){
  .portada .contenedor,.dos{grid-template-columns:1fr;gap:40px}
  .informe{justify-self:start;transform:none}
  .fila{grid-template-columns:1fr;gap:8px}
  .fila a.ir{justify-self:start;text-align:left}
  .pasos,.planes{grid-template-columns:1fr}
  .plan{border-right:0;border-bottom:1px solid var(--linea)}
  .plan.recomendado{border-radius:0}
  .pie .rejilla{grid-template-columns:1fr}
}
@media (max-width:560px){
  .campo-doble{grid-template-columns:1fr}
  .seccion{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.enlaces-pie{display:flex;gap:20px;flex-wrap:wrap}
.menu .boton,.menu .boton[aria-current=page]{background:var(--cian);color:var(--pizarra)}
.menu .boton:hover{background:#fff}
.planes.dos-planes{grid-template-columns:1fr 1fr}
.planes.dos-planes .plan.recomendado{border-radius:var(--r) 0 0 var(--r)}
@media (max-width:900px){.planes.dos-planes{grid-template-columns:1fr}.planes.dos-planes .plan.recomendado{border-radius:var(--r) var(--r) 0 0}}
.apps{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin:0;border-top:1px solid var(--linea)}
.apps>div{padding:22px 0;border-bottom:1px solid var(--linea)}
.apps dt{font-weight:700;color:var(--pizarra);font-size:1.1rem;margin-bottom:4px}
.apps dd{margin:0;color:var(--suave)}
@media (max-width:900px){.apps{grid-template-columns:1fr}}
@media (max-width:1100px){
  .cabecera .contenedor{justify-content:flex-start}
  .menu-boton{display:block;margin-left:auto}
  .menu{display:none;position:absolute;left:0;right:0;top:76px;background:var(--pizarra);flex-direction:column;align-items:stretch;padding:8px 16px 16px;z-index:15;box-shadow:0 12px 24px rgba(10,14,30,.35)}
  .menu.abierto{display:flex}
  .menu a{padding:12px}
  .menu .boton{display:block;margin:8px 0 0;text-align:center}
}
@media (max-width:560px){.cabecera .logo img{width:180px}}
html{scroll-padding-top:90px}
/* Cierre de contacto */
.contacto{background:var(--pizarra);color:#E6E9F2;padding:80px 0}
.contacto h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem)}
.contacto-intro{font-size:1.12rem;max-width:44ch;color:#C9CEDC}
.vias{margin:32px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;border-top:1px solid #3B4260}
.vias>div{padding:18px 0;border-bottom:1px solid #3B4260}
.vias dt{font-size:.9rem;color:#AEB4C8;margin-bottom:2px}
.vias dd{margin:0;font-size:1.25rem;font-weight:700}
.vias a{color:#fff;text-decoration:none}
.vias a:hover{color:var(--cian);text-decoration:underline}
.contacto .formulario{color:var(--texto);border:0;box-shadow:0 24px 48px -20px rgba(5,8,20,.6)}
.contacto .formulario h3{font-size:1.35rem;margin-bottom:18px}
@media (max-width:560px){.vias{grid-template-columns:1fr}}
/* Comparativa de planes */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabla-planes{overflow-x:auto;background:#fff;border:1px solid var(--linea);border-radius:var(--r)}
.tabla-planes table{width:100%;border-collapse:collapse;min-width:680px}
.tabla-planes th,.tabla-planes td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.tabla-planes thead th{font-size:1.05rem;color:var(--pizarra);width:22%;border-bottom:2px solid var(--pizarra)}
.tabla-planes thead th span{display:block;font-weight:400;font-size:.88rem;color:var(--suave);margin-top:4px}
.tabla-planes thead td{border-bottom:2px solid var(--pizarra)}
.tabla-planes tbody th{font-weight:600;color:var(--texto)}
.tabla-planes td.si,.tabla-planes td.no{text-align:center;font-size:1.2rem;font-weight:700}
.tabla-planes thead th:not(:first-child){text-align:center}
.tabla-planes td.si{color:var(--verde)}
.tabla-planes td.no{color:#A3A9B8}
.tabla-planes tfoot th,.tabla-planes tfoot td{border-bottom:0;font-size:.95rem;color:var(--suave)}
.tabla-planes tfoot th{color:var(--pizarra)}
.nota-tabla{margin:16px 0 0;color:var(--suave);font-size:.95rem}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Informe: hoja de papel con el borde inferior rasgado */
.informe{background:transparent;padding:0;box-shadow:none;filter:drop-shadow(0 22px 28px rgba(5,8,20,.45)) drop-shadow(0 2px 3px rgba(5,8,20,.25))}
.informe .papel{background:#fff;padding:28px 28px 46px;clip-path:polygon(0% 0%,100% 0%,100.00% 98.74%,97.06% 99.27%,94.12% 98.17%,91.18% 99.44%,88.24% 98.42%,85.29% 98.80%,82.35% 99.47%,79.41% 98.48%,76.47% 99.52%,73.53% 98.65%,70.59% 99.45%,67.65% 99.40%,64.71% 98.67%,61.76% 97.78%,58.82% 99.33%,55.88% 99.11%,52.94% 98.22%,50.00% 97.52%,47.06% 98.33%,44.12% 98.73%,41.18% 97.45%,38.24% 99.50%,35.29% 97.71%,32.35% 98.96%,29.41% 99.28%,26.47% 99.34%,23.53% 98.92%,20.59% 97.80%,17.65% 99.20%,14.71% 98.32%,11.76% 98.19%,8.82% 98.78%,5.88% 98.39%,2.94% 99.46%,0.00% 98.95%);
  background-image:linear-gradient(180deg,#ffffff 0%,#fbfbf9 100%)}