/*
Theme Name: INSELI
Theme URI: https://www.inseli.cl
Author: Altavoz Media
Author URI: https://altavozmedia.cl
Description: Tema a medida para INSELI — ingeniería, consultoría y capacitación eléctrica. Autoadministrable: servicios, cursos de Academy y todos los textos se editan desde el panel.
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: inseli
*/

:root{
  --marino:#04224F;
  --marino-2:#163B6E;
  --azul:#023E94;
  --azul-osc:#04224F;
  --celeste:#3BB0E6;
  --celeste-c:#6CC6EE;
  --tinta:#0F1B26;
  --tinta-2:#45566A;
  --gris:#6B7C8C;
  --gris-c:#B8C4CF;
  --borde:#DCE3EA;
  --suave:#F5F7F9;
  --suave-2:#E8EEF4;
  --crema:#FBF6EE;
  --crema-tinta:#2A1D12;
  --crema-borde:#E6DAC6;
  --radio:14px;
  --radio-c:10px;
  --ancho:1240px;
  --lado:clamp(20px,4vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--suave);color:var(--tinta);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-osc);text-decoration:underline}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;margin:0;letter-spacing:-.015em;line-height:1.1}
input,select,textarea,button{font-family:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}

.container{max-width:var(--ancho);margin:0 auto;padding-left:var(--lado);padding-right:var(--lado)}
.seccion{padding:clamp(64px,8vw,112px) 0}
.seccion-suave{background:var(--suave-2)}
.seccion-marino{background:var(--marino);color:#fff}
.seccion-crema{background:var(--crema);color:var(--crema-tinta)}

.rotulo{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin:0 0 14px;
}
.rotulo.claro{color:var(--celeste-c)}
.rotulo.crema{color:#9A6B3A}
.titulo{font-size:clamp(28px,3.6vw,42px);margin:0 0 16px;text-wrap:balance}
.bajada{font-size:clamp(16px,1.3vw,18px);color:var(--tinta-2);max-width:680px;margin:0;text-wrap:pretty}
.seccion-marino .bajada,.seccion-marino .titulo{color:#E3EAF1}
.seccion-marino .titulo{color:#fff}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border:1px solid transparent;border-radius:4px;
  font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;
  transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{text-decoration:none}
.btn-celeste{background:var(--celeste);color:#04224F}
.btn-celeste:hover{background:var(--celeste-c);color:#04224F}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-osc);color:#fff}
.btn-linea{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-linea:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-linea-azul{background:transparent;color:var(--azul);border-color:var(--borde)}
.btn-linea-azul:hover{background:#fff;color:var(--azul-osc)}
.btn-verde{background:#25D366;color:#073D23}
.btn-verde:hover{background:#1FBA58;color:#073D23}

/* ---------- Encabezado ---------- */
.cab{position:sticky;top:0;z-index:40;background:var(--marino);border-bottom:1px solid var(--marino-2)}
/* Solo arriba y abajo: .cab-fila comparte elemento con .container y un padding
   de atajo (14px 0) le borraba el margen lateral, dejando el logo y el menú
   pegados al borde bajo los 1300 px. */
.cab-fila{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;
  padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.cab-logo{display:flex;align-items:center;gap:10px}
.cab-logo img{height:34px;width:auto;display:block}
.cab-boton{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;
  width:46px;height:42px;padding:0 10px;background:transparent;border:1px solid rgba(255,255,255,.3);
  border-radius:6px;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.cab-boton span{display:block;flex:0 0 auto;width:100%;height:2px;background:#fff;border-radius:2px}
.cab-nav{display:none;width:100%;padding:6px 0 10px}
.cab-nav.abierto{display:block}
.cab-nav .menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cab-nav .menu a{
  display:block;padding:11px 4px;font-size:15px;font-weight:500;color:#B8C4CF;
  border-bottom:2px solid transparent;
}
.cab-nav .menu a:hover{color:#fff;text-decoration:none}
.cab-nav .menu .current-menu-item>a,.cab-nav .menu .current_page_item>a,
.cab-nav .menu .actual>a{color:#fff;border-bottom-color:var(--celeste)}

/* ---------- Portada: banner ---------- */
.hero{position:relative;width:100%;aspect-ratio:3/2;max-height:calc(100vh - 64px);min-height:460px;overflow:hidden;background:var(--marino)}
.hero-pista{position:absolute;inset:0;display:flex;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.hero-pista img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block}
.hero-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,34,79,.9) 0%,rgba(4,34,79,.62) 42%,rgba(4,34,79,0) 78%)}
.hero-cont{position:relative;height:100%;display:flex;align-items:center}
.hero-caja{max-width:680px;display:flex;flex-direction:column;gap:24px}
.hero h1{font-size:clamp(32px,5vw,62px);color:#fff;line-height:1.05;text-wrap:balance;font-weight:700}
.hero p{margin:0;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:#E3EAF1;max-width:560px}
.hero-botones{display:flex;gap:12px;flex-wrap:wrap}
.hero-puntos{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:10px;z-index:2}
.hero-punto{width:14px;height:6px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.5);transition:width .3s,background .3s}
.hero-punto.activo{width:36px;background:#fff}

/* ---------- Tarjetas ---------- */
.rejilla{display:grid;gap:22px}
.rej-3{grid-template-columns:1fr}
.rej-2{grid-template-columns:1fr}
.rej-4{grid-template-columns:1fr 1fr}

.tarjeta{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio-c);
  padding:28px;display:flex;flex-direction:column;gap:12px;
}
/* Tarjeta con foto arriba.
   La imagen va a sangre y el texto en su propio contenedor con padding. Antes
   el padding se repartía con márgenes sobre los hijos sueltos, y cualquier
   estilo en línea del PHP lo anulaba: el número quedaba pegado al borde. */
.tarjeta-foto{padding:0;overflow:hidden}
/* Caja de alto fijo con la foto completa adentro (object-fit:contain).
   Así la imagen nunca se recorta y las tres tarjetas quedan parejas, aunque las
   fotos vengan con proporciones distintas. El fondo suave rellena lo que sobra. */
.tarjeta-img{width:100%;height:200px;object-fit:contain;display:block;
  background:var(--suave-2);padding:10px}
/* En la tarjeta oscura el relleno de la foto tiene que ser oscuro también: con
   el gris claro se veía una franja pegada arriba que no era parte de la foto. */
.tarjeta.destaca .tarjeta-img{background:#071A3A}
.tarjeta-cuerpo{display:flex;flex-direction:column;gap:10px;padding:24px 28px 26px;flex:1}
.tarjeta-cuerpo .num{margin:0}
.tarjeta-cuerpo h3{margin:0}
.tarjeta-cuerpo .txt{margin:0}
.tarjeta .num{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;color:var(--celeste)}
.tarjeta h3{font-size:20px}
.tarjeta p{margin:0;color:var(--tinta-2);font-size:15px}
.tarjeta .mas{margin-top:auto;padding-top:10px;font-weight:600;font-size:14px;color:var(--azul)}
.tarjeta.destaca{background:var(--marino);border-color:var(--marino-2);color:#fff}
.tarjeta.destaca h3{color:#fff}
.tarjeta.destaca p{color:#C7D3DF}
.tarjeta.destaca .mas{color:var(--celeste-c)}

.pilar{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-top:2px solid var(--celeste)}
.pilar h3{font-size:18px}
.pilar p{margin:0;color:var(--tinta-2);font-size:15px}
.seccion-marino .pilar p{color:#C7D3DF}
.seccion-marino .pilar h3{color:#fff}

/* ---------- Servicios ---------- */
.serv-indice{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.serv-indice a{
  padding:9px 16px;border:1px solid var(--borde);border-radius:999px;background:#fff;
  font-size:14px;font-weight:500;color:var(--tinta-2);
}
.serv-indice a:hover{border-color:var(--azul);color:var(--azul);text-decoration:none}

.serv{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:clamp(24px,4vw,44px);margin-bottom:28px;scroll-margin-top:90px}
/* El cuerpo del servicio va en dos columnas: el detalle a la izquierda y la
   foto a la derecha. En celular la foto pasa arriba del detalle, porque ahí
   una columna angosta con la foto al final no la ve nadie. */
.serv-dos{display:grid;gap:26px;grid-template-columns:1fr}
.serv-texto{min-width:0}
.serv-media{margin:0}
.serv-media img{display:block;width:100%;height:auto;border-radius:var(--radio-c);background:var(--suave-2)}
@media (min-width:900px){
  .serv-dos{grid-template-columns:1fr 340px;gap:34px;align-items:start}
  .serv-media{position:sticky;top:96px}
}
@media (max-width:899px){
  .serv-media{order:-1}
}
.serv-cab{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px}
.serv-num{
  flex:0 0 auto;width:46px;height:46px;border-radius:8px;background:var(--marino);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;
}
.serv-cab h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px}
.serv-cab p{margin:0;color:var(--tinta-2);max-width:620px}
.serv-sub{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0 0 14px}
.serv-grupos{display:grid;gap:20px;grid-template-columns:1fr;margin-bottom:26px}
.grupo{border-top:1px solid var(--borde);padding-top:16px}
.grupo .letra{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:5px;background:var(--suave-2);color:var(--azul);
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;margin-right:8px;
}
.grupo h4{display:flex;align-items:center;font-size:15px;margin-bottom:10px}
.grupo ul{list-style:none;margin:0;padding:0}
.grupo li{position:relative;padding-left:16px;font-size:14.5px;color:var(--tinta-2);margin-bottom:6px}
.grupo li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--celeste)}
.serv-aplica{background:var(--suave);border-radius:var(--radio-c);padding:20px 24px;margin-bottom:22px}
.serv-aplica ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.serv-aplica li{font-size:14.5px;color:var(--tinta-2);position:relative;padding-left:14px}
.serv-aplica li::before{content:"·";position:absolute;left:3px;color:var(--celeste);font-weight:700}

/* ---------- Academy ---------- */
/* Cabecera de Academy con foto a todo el ancho. El velo va de izquierda a
   derecha y en crema, no en negro: el texto de esta página es oscuro, así que
   lo que hay que levantar es el fondo, no oscurecerlo. */
.aca-cabeza{position:relative;overflow:hidden;background:var(--crema);color:var(--crema-tinta);
  padding:clamp(56px,7vw,104px) 0;min-height:clamp(340px,42vw,520px);display:flex;align-items:center}
.aca-cabeza-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.aca-cabeza-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(251,246,238,.97) 0%,rgba(251,246,238,.88) 40%,rgba(251,246,238,.35) 78%,rgba(251,246,238,.12) 100%)}
.aca-cabeza .container{position:relative;z-index:2;width:100%}
@media (max-width:700px){
  .aca-cabeza-velo{background:linear-gradient(180deg,rgba(251,246,238,.94) 0%,rgba(251,246,238,.9) 55%,rgba(251,246,238,.82) 100%)}
}

.aca-marca{font-family:'Archivo',sans-serif;font-weight:800;line-height:.95}
.aca-marca .a{display:block;font-size:clamp(34px,5vw,56px);color:var(--crema-tinta)}
.aca-marca .b{display:block;font-size:clamp(34px,5vw,56px);color:#B57A35}
.curso{
  background:#fff;border:1px solid var(--crema-borde);border-radius:var(--radio-c);
  padding:22px 24px;display:flex;flex-direction:column;gap:10px;
}
.curso .et{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9A6B3A}
.curso h3{font-size:18px;color:var(--crema-tinta)}
.curso .mas{margin-top:auto;padding-top:8px;font-weight:600;font-size:14px;color:#8A5A22}
.paso{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--crema-borde)}
.paso .n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#B57A35;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;
}
.paso h4{font-size:16px;margin-bottom:4px;color:var(--crema-tinta)}
.paso p{margin:0;font-size:14.5px;color:#5C4A38}

/* ---------- Nosotros ---------- */
.texto-largo p{margin:0 0 16px;color:var(--tinta-2);font-size:16.5px;line-height:1.65}
.valores{display:flex;flex-wrap:wrap;gap:10px}
.valor{padding:10px 20px;border:1px solid var(--borde);border-radius:999px;background:#fff;font-weight:600;font-size:15px}

/* ---------- Contacto ---------- */
.dupla{display:grid;gap:34px;grid-template-columns:1fr}
.dato{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--borde)}
.dato .et{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);min-width:92px}
.dato .v{font-weight:600}
.form{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:clamp(22px,3vw,34px)}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:12px 14px;border:1px solid var(--borde);border-radius:6px;background:var(--suave);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);background:#fff;outline:none}
.campo textarea{min-height:120px;resize:vertical}
.campo.mal input,.campo.mal select,.campo.mal textarea{border-color:#C0392B;background:#FDF3F2}
.form-nota{font-size:13px;color:var(--gris);margin:0 0 16px}

/* ---------- Pie ---------- */
.pie{background:var(--marino);color:#C7D3DF;padding:56px 0 28px}
.pie-fila{display:grid;gap:28px;grid-template-columns:1fr;margin-bottom:30px}
.pie img{height:34px;width:auto;margin-bottom:14px}
.pie p{margin:0 0 10px;font-size:14.5px}
.pie .lema{color:var(--celeste-c);font-style:italic}
.pie a{color:#C7D3DF}
.pie a:hover{color:#fff}
.pie .menu-pie{list-style:none;margin:0;padding:0}
.pie .menu-pie li{margin-bottom:8px;font-size:14.5px}
.pie .et{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7C8EA0;margin-bottom:10px}
.pie-barra{border-top:1px solid var(--marino-2);padding-top:18px;font-size:13px;color:#7C8EA0;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
/* En celular el botón flotante de WhatsApp se monta sobre el final del pie:
   se le deja el alto del botón más aire para que el © quede siempre legible. */
@media (max-width:700px){
  .tarjeta-img{height:170px}
  .pie{padding-bottom:96px}
  .wsp{right:12px;bottom:12px;padding:12px 18px;font-size:14px}
}

/* ---------- WhatsApp flotante ---------- */
.wsp{
  position:fixed;right:18px;bottom:18px;z-index:50;display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:999px;background:#25D366;color:#073D23;font-weight:600;font-size:15px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.wsp:hover{background:#1FBA58;color:#073D23;text-decoration:none}
.wsp svg{flex:0 0 auto}

/* ---------- Migas y páginas simples ---------- */
.cabeza{background:var(--marino);color:#fff;padding:clamp(48px,6vw,84px) 0}
.cabeza .titulo{color:#fff}
.cabeza .bajada{color:#C7D3DF}
.contenido h2{font-size:26px;margin:28px 0 10px}
.contenido h3{font-size:20px;margin:22px 0 8px}
.contenido p{margin:0 0 14px;color:var(--tinta-2)}
.contenido ul,.contenido ol{color:var(--tinta-2);padding-left:20px}

/* ---------- Pantallas medianas y grandes ---------- */
@media (min-width:700px){
  .rej-2{grid-template-columns:1fr 1fr}
  .pie-fila{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:1050px){
  .serv-grupos{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .cab-boton{display:none}
  .cab-nav{display:flex;align-items:center;width:auto;padding:0}
  .cab-nav .menu{flex-direction:row;gap:26px}
  .cab-nav .menu a{padding:8px 0;font-size:15px}
  .rej-3{grid-template-columns:repeat(3,1fr)}
  .rej-4{grid-template-columns:repeat(4,1fr)}
  .dupla{grid-template-columns:1fr 1.15fr;gap:48px}
}