/* ════════════════════════════════════════════════════════════════
   Marca FacturadorWEB 2026 — sitio público www.facturadorweb.cl
   Misma identidad que el ERP: naranjo del logo, gris azulado oscuro y Poppins.
   Se carga DESPUÉS de estilo2.css / estilo-parallax.css para sobreescribir.
   ════════════════════════════════════════════════════════════════ */
:root{
	--marca:#FE390C;
	--marca-osc:#D93005;
	--marca-suave:#FFEDE6;
	--tinta:#1F2A44;
	--texto:#4B5565;
	--tenue:#8A94A6;
	--linea:#E7E9EE;
	--fucsia:#FE390C;   /* variables antiguas de estilo2.css */
	--oscuro:#1F2A44;
}

/* ── Tipografía ── */
body{font-family:'Poppins',sans-serif;color:var(--texto);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,p,a,input,textarea,select,button,label,li,span,small,td,th{font-family:'Poppins',sans-serif}
h1,h2,h3,h4{color:var(--tinta);font-weight:600;letter-spacing:-.01em}
p{font-weight:300;line-height:1.7}
b,strong,.font-weight-bold{font-weight:600!important}
::selection{background:var(--marca);color:#fff}
a{color:var(--marca)}
a:hover,a:focus{color:var(--marca-osc)}

/* ── Barra superior y menú ── */
.linea-superior{background-color:var(--tinta)!important}
.topbar p,.topbar a{font-weight:400;letter-spacing:.02em}
.topbar .redes a:hover{color:var(--marca)!important}
.contendeor-navegador{background:#fff!important;border:none!important;box-shadow:0 2px 14px rgba(16,24,40,.08)}
.contendeor-navegador .navbar-brand{display:flex;align-items:center;height:auto;padding:14px 5px}
.contendeor-navegador .navbar-brand img,.logo-fw{height:30px!important;width:auto!important;max-width:none}
.contendeor-navegador .links-derecha > li > a{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--texto)!important;transition:color .15s}
.contendeor-navegador .links-derecha > li > a:hover,
.contendeor-navegador .links-derecha > li.active > a{color:var(--marca)!important;background:transparent!important}
.contendeor-navegador .boton-celular .icon-bar{background-color:var(--tinta)!important}

/* ── Botones ── */
.btn-demo,.boton-color,.btn-color,.enviar,input[type=submit].enviar{
	background:var(--marca)!important;border:1px solid var(--marca)!important;color:#fff!important;
	border-radius:12px!important;font-weight:600!important;letter-spacing:.02em;
	box-shadow:0 8px 20px rgba(254,57,12,.25);transition:background .15s,transform .15s,box-shadow .15s}
.btn-demo:hover,.boton-color:hover,.btn-color:hover,.enviar:hover{background:var(--marca-osc)!important;border-color:var(--marca-osc)!important;color:#fff!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(254,57,12,.32)}
.contendeor-navegador .btn-demo{padding:8px 18px 8px 12px!important;margin-top:10px;font-size:13px}

/* ── Formularios ── */
.formulario .input,.formulario .mensaje,.formulario input[type=text],.formulario textarea{border-radius:12px!important;font-family:'Poppins',sans-serif}
.formulario .input:focus,.formulario .mensaje:focus{border-color:var(--marca)!important;box-shadow:0 0 0 3px rgba(254,57,12,.15)!important;outline:none}

/* ── Títulos con la primera letra destacada ("Cotiza tu plan") ── */
h1 span,h2 span,h3 span{color:var(--marca)}

/* ── Pie ── */
.pie{background-color:var(--tinta)!important}
.pie .logotipo-blanco{max-height:38px;width:auto}
.pie .logo-fw{height:28px!important}
.pie .redes .btn{border-radius:12px;transition:background .15s}
.pie .redes .btn:hover{background:var(--marca)!important;color:#fff!important}
.pie .infofooter a:hover,.pie .emagenic a:hover{color:#fff!important}

/* ── Tarjetas y bloques: esquinas suaves como el ERP ── */
.panel,.thumbnail,.card{border-radius:14px}

@media (max-width:767px){
	.contendeor-navegador .navbar-brand img,.logo-fw{height:24px!important}
	.contendeor-navegador .btn-demo{margin:10px 15px}
}

/* ── Planes: el nombre va en blanco sobre el encabezado oscuro / naranjo ── */
.planes .card .titulo h3,.planes .card .titulo h3 span{color:#fff!important}

/* ── Banner inicial: texto descriptivo en negro y sin el borde de color ── */
.texto-slide{color:#111!important;text-shadow:none!important;font-weight:400}

/* ── Al ir a una sección (#planes, /planes) que el menú fijo no la tape ── */
section[id]{scroll-margin-top:110px}

/* ── Banner: fondo claro con montajes del sistema; título oscuro con la palabra destacada en naranjo ── */
.titulo-slide{color:var(--tinta)!important;text-shadow:none!important;font-weight:700;letter-spacing:-.01em}
.titulo-slide span{color:var(--marca)!important}

/* ── Módulos de la portada: separación superior en cada tarjeta ── */
.modulos .modulo-uno{margin-top:30px}
/* la imagen de cada módulo quedaba pegada al borde superior de la tarjeta */
.modulos .modulo-uno .cuadro{padding-top:25px}

/* ── Módulos: efecto al pasar el mouse sobre la tarjeta completa ── */
.modulos .modulo-uno .cuadro{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden}
.modulos .modulo-uno .cuadro img{transition:transform .35s ease}
.modulos .modulo-uno .info p.titulo-modulo{transition:color .2s ease}
.modulos .modulo-uno:hover .cuadro{transform:translateY(-8px);box-shadow:0 18px 40px rgba(31,42,68,.14);border-color:#FFC4B0!important}
.modulos .modulo-uno:hover .cuadro img{transform:scale(1.04)}
.modulos .modulo-uno:hover .info p.titulo-modulo{color:var(--marca)}
@media (hover:none){.modulos .modulo-uno:hover .cuadro{transform:none}}

/* ── Módulos: mismo alto en todas las tarjetas (la descripción reserva 3 líneas) ── */
.modulos .modulo-uno .info p:not(.titulo-modulo){min-height:5.1em;line-height:1.7;margin-bottom:0}
@media (max-width:767px){.modulos .modulo-uno .info p:not(.titulo-modulo){min-height:0}}