:root{ --lm-red:#E21B23;
--lm-red-600:#C9151C;
--lm-blue:#0B53B7;
--lm-blue-700:#093C82; --bg:#F7FAFC;
--card:#FFFFFF;
--ink:#0F172A;
--muted:#64748B; --ring:0 0 0 3px rgba(11,83,183,.25);
--radius:20px;
--shadow-lg:0 10px 30px rgba(2,8,23,.08);
--shadow-md:0 8px 20px rgba(2,8,23,.06);
--header-bg:rgba(255,255,255,.9);
--header-border:#eef2f7;
--menu-link:#0b2340;
--menu-link-hover:var(--lm-blue); --visible_carrousel:5;
--fab-clear:112px; --brand-blue:#115da9;
--accent-whatsapp:#25d366;
} *{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background:var(--bg)}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}  .topbar{background:#0a0f1f;color:#fff;font-size:.9rem}
.topbar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:.5rem 0}
.topbar .actions{display:flex;gap:14px;flex-wrap:wrap}
.topbar a{opacity:.9}
.pill-mini{ padding: .25rem .6rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1); font-size: .8rem;
}
.badge{
display:inline-flex; align-items:center; gap:8px;
} header{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--header-border);backdrop-filter:saturate(180%) blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;position:relative}
.brand{display:flex;align-items:center;gap:12px}
header img{height:32px; object-fit:contain }
.brand .title{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{padding:10px 12px;border-radius:10px;position:relative;color:var(--menu-link);background:transparent}
.menu a:hover{color:var(--menu-link-hover)}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;opacity:.25}
.menu a:hover::after{transform:scaleX(1)} .menu a.cta{background:var(--lm-red)!important;color:#fff!important;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-md)}
.menu a.cta::after{content:none!important}
.menu a.cta:hover{background:var(--lm-red-600)!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.18)} .hamb{
display:none;
align-items:center;
gap:8px;
border:1px solid #e6ebf4;
padding:8px 12px;
border-radius:12px;
background:#fff;
cursor:pointer;
font-weight: 600;
}  @media (max-width: 1000px){
.topbar .badge:last-child {
display: none; 
}
} @media (max-width: 768px){
.topbar .wrap {
flex-direction: column;
align-items: center;
gap: 8px;
}
.topbar .actions {
justify-content: center;
gap: 10px;
}
.topbar .badge[aria-label="Envío nacional"] {
display: none; }
} @media (max-width: 840px){
.hamb {
display: flex;
} .menu {
position: absolute;
top: 100%; left: 0;
right: 0;
flex-direction: column;
background: var(--header-bg);
border-top: 1px solid var(--header-border);
padding: 10px 0 20px;
box-shadow: var(--shadow-lg); display: none; 
transform: translateY(-10px);
opacity: 0;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
} .menu.is-open {
display: flex;
transform: translateY(0);
opacity: 1;
} .menu a {
width: 92%;
margin-inline: auto;
text-align: center;
}
.menu a.cta {
margin-top: 10px;
}
.menu a::after {
display: none; }
} .hero-section{
position: relative;
margin: 16px 24px;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(2,8,23,.12); min-height: clamp(480px, 56vh, 640px);
} .hero-section .container{
position: relative;
display: grid;
grid-template-columns: 0.95fr 1.05fr; gap: 80px;
align-items: center;
padding: 28px 0 36px;
} .hero-image{ position: relative; }
.hero-image .main-image{ display: none !important; } .hl-blue{ color:#5aa0ff; }
.br-lg{ display:block; } .hK{color: #ffffff;}
.hero-content .tagline{
display:inline-block; text-transform:uppercase; letter-spacing:.08em;
font-weight:600; font-size:1.50rem;
padding:6px 10px; border-radius:999px;
background:rgba(255,255,255,.14); color:#d9e6ff;
margin-bottom:12px;
position: absolute;
right: -1000px; top: 0; 
text-align: center;
}
.hero-content h1{
margin:0 0 14px;
font-weight:800;
font-family: Inter !important;
line-height:1.05;
color:#fff;
max-width:16ch;
text-wrap:balance;
overflow-wrap:anywhere;
}
.hero-content > p{
color:#e7f0ff;
font-size:clamp(1rem,1.15vw,1.125rem);
line-height:1.6;
max-width:54ch;
margin:0 0 16px;
} .hero-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 10px; }
.hero-buttons .btn{ border:0; border-radius:12px; padding:10px 16px; font-weight:700; } .cotizar-whatsapp{
display:inline-flex; align-items:center; gap:8px;
background:#25D366; color:#fff; padding: 10px 16px; border-radius:12px; font-weight:700;
box-shadow:0 8px 20px rgba(2,8,23,.06);
}
.cotizar-whatsapp:hover{ transform:translateY(-1px); color:#fff !important; } .advantages{ margin: 6px 0 0; padding-left: 0; list-style: none; }  @media (max-width:1000px){ .br-lg{ display:none; } } @media (max-width: 1000px){
.hero-section .container{
grid-template-columns: 1fr; gap: 20px; }
.hero-content h1, .hero-content > p{ max-width: none; } .hero-section{
min-height: clamp(480px, 60vh, 640px); }
} @media (max-width: 640px){
.hero-section{ margin: 10px 16px; } } .hero-buttons{ gap: 10px; margin: 6px 0 12px; }
.hero-buttons .btn{ padding: 10px 16px; border-radius: 10px; }
.hero-cta-main, .hero-cta-secondary{ font-size: 1rem; }
.advantages{ gap: 6px; } .main-image{
height: 420px;                    
border-radius: 16px;
} @media (max-width: 640px){
.hero-section{ padding: 28px 0 34px; }
.hero-content h1{ font-size: clamp(1.7rem, 7vw, 2.4rem); }
.main-image{ height: 300px; }
.hero-buttons .btn{ padding: 9px 14px; }
} .section{padding:48px 0}
.section h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 10px}
.section .sub{color:var(--muted);margin-bottom:22px}
.cats {
display: grid; grid-template-columns: repeat(4, 1fr); 
gap: 16px;
margin-bottom: 22px;
}
.cat {
padding: 24px 16px; 
background: var(--card);
border-radius: 16px;
border: 1px solid #e8eef6;
display: flex;
flex-direction: column;
gap: 12px; box-shadow: var(--shadow-md);
}
.cat img {
height: 200px; 
object-fit: contain;
}
.cat b {
font-size: 1.25rem; }
.cat a{margin-top:auto;color:var(--lm-blue);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2-1{grid-template-columns:1.1fr .9fr}
.pad{padding:18px}
.card{background:var(--card);border:1px solid #e8eef6;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-md)}
.card .img{aspect-ratio:4/3;background:#f5f7fb;display:grid;place-items:center}
.card h3{font-size:1.05rem;margin:14px 14px 6px}
.price{color:#0a7a3f;font-weight:700;margin:0 14px 10px}
.meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;margin:0 14px 14px}
.card .act{margin:0 14px 16px 14px;margin-top:auto;display:flex;gap:8px}
.btn{padding:10px 12px;border-radius:12px;border:1px solid #dfe7f3;background:#fff}
.btn.primary{background:var(--lm-red);border-color:var(--lm-red);color:#fff} .brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;filter:grayscale(100%);opacity:.8} .callout{background:linear-gradient(135deg, rgba(11,83,183,.06), rgba(226,27,35,.06));padding:24px;border-radius:20px;border:1px solid #e1e9f5;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:18px}
.callout h3{margin:.2rem 0} footer{background:#0b1530;color:#c7d2fe;margin-top:36px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:42px 0}
.foot h4{margin:0 0 12px;color:#fff}
.foot a{display:block;color:#c7d2fe;margin:8px 0}
.credits{border-top:1px solid #2a355a;padding:14px 0;color:#94a3b8;font-size:.9rem;display:flex;justify-content:space-between;align-items:center} button,.btn,.cta,.menu a,.pill,.cat,.card,.brand,.kicker,.chip{transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;cursor:pointer}
.btn:hover,.cta:hover,.pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.12)}
.btn:active,.cta:active,.pill:active{transform:none}
.card:hover,.cat:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,8,23,.12)}
.card .img img{transition:transform .25s ease}
.card:hover .img img{transform:scale(1.02)}
.chip:hover{transform:translateY(-2px)}
.srch button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,83,183,.25)}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.show{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} @media (max-width:1100px){
.cats{grid-template-columns:repeat(4,1fr)}
.grid{grid-template-columns:repeat(3,1fr)}
.brands{grid-template-columns:repeat(4,1fr)}
.callout{grid-template-columns:1fr}
}
@media (max-width:800px){
.hero-grid{grid-template-columns:1fr}
.foot{grid-template-columns:1fr 1fr}
.hamb{display:inline-flex}
.menu{position:absolute;left:0;right:0;display:none;background:#fff;border-bottom:1px solid #e6ebf4;box-shadow:0 12px 30px rgba(2,8,23,.10);padding:12px;z-index:999;flex-direction:column;gap:8px}
.menu a{padding:12px;border-radius:12px}
.nav.open #mainMenu{display:grid;animation:drop .18s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media (max-width:700px){
.cats{grid-template-columns:1fr}
.grid{grid-template-columns:1fr}
} .advantages{ margin: 6px 0 0; padding-left: 0; list-style: none; }
.advantages li{ margin: 6px 0; color:#eaf2ff; }  .btn-whatsapp{
display:flex; align-items:center; justify-content:center; gap:10px;
width:100%;
padding:11px 14px;
border-radius:999px;
font-weight:800;
background:#25D366; color:#fff !important;
text-decoration:none;
box-shadow:0 10px 22px rgba(37,211,102,.35);
transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-whatsapp:hover{
filter:brightness(.96);
transform:translateY(-1px);
box-shadow:0 14px 28px rgba(37,211,102,.42);
}
.to-top{
display:none; 
position:fixed; 
right:18px; bottom:18px;
width:54px; height:54px;
z-index: 70;
cursor:pointer;
align-items:center; justify-content:center;
will-change: transform; border-radius:999px;
border:1px solid rgba(255,255,255,.55);
background:rgba(255,255,255,.82);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
color:#0b2340;
box-shadow:
0 10px 26px rgba(2,8,23,.20),
inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
} .to-top.show{ display:flex; } .to-top:hover{
transform: translateY(-4px);
background: rgba(255,255,255,.92);
box-shadow:
0 16px 40px rgba(2,8,23,.26),
0 0 22px rgba(11,83,183,.25), inset 0 0 0 1px rgba(255,255,255,.45);
}  .to-top::before{
content:"";
position:absolute; inset:-3px; border-radius:inherit;
background:
conic-gradient(#0B53B7 calc(var(--p,0)*1%), #E21B23 0 0); 
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
opacity:.95; 
pointer-events:none;
} .to-top::after{
content: attr(data-label);
position:absolute;
bottom: 66px; 
right: 0;
padding: 6px 10px;
border-radius: 10px;
background: rgba(20,28,51,.9);
color:#fff;
font-size: .78rem;
letter-spacing:.2px;
white-space:nowrap;
box-shadow: 0 8px 18px rgba(2,8,23,.25);
opacity:0;
transform: translateY(4px);
pointer-events:none;
transition: opacity .18s ease, transform .18s ease;
}
.to-top:hover::after{ 
opacity:1; 
transform: translateY(0); 
} @media (max-width:420px){
.to-top{ width:50px; height:50px; right:14px; bottom:14px; }
.to-top::after{ right: -8px; } } @media (prefers-reduced-motion: reduce){
.to-top, .to-top:hover{ transition: none; transform:none; }
} .to-top:focus-visible{
outline: 0;
box-shadow:
0 0 0 4px rgba(11,83,183,.35), 
0 16px 40px rgba(2,8,23,.26);
} :root{
--fab-clear: 112px; }
.to-top{
bottom: calc(env(safe-area-inset-bottom, 0px) + 18px + var(--fab-clear));
right: calc(env(safe-area-inset-right, 0px) + 18px);
z-index: 71; 
} @media (max-width: 640px){
:root{ --fab-clear: 136px; } .to-top{ right: calc(env(safe-area-inset-right, 0px) + 14px); }
} body.no-fabs .to-top{
bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
} .modal {
display: none; 
position: fixed; 
z-index: 1000; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgba(0,0,0,0.7); 
backdrop-filter: blur(5px); 
} .modal-content {
background-color: #fefefe;
margin: 5% auto; 
padding: 30px;
border: 1px solid #888;
width: 80%; 
max-width: 900px; 
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
position: relative; 
animation-name: animatetop;
animation-duration: 0.4s;
} .category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 20px;
margin-top: 24px;
} .category-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 16px;
border-radius: 18px;
background: #ffffff; text-decoration: none;
overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
} .category-item::before {
content: "";
position: absolute;
inset: 0;
padding: 2px; border-radius: inherit;
background: linear-gradient(135deg, #0f62fe, #ff4b6a);
-webkit-mask: 
linear-gradient(#fff 0 0) content-box, 
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
} .category-item img,
.category-item h3 {
position: relative;
z-index: 1;
}
.category-item img {
max-width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 12px;
}
.category-item h3 {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0;
} .category-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
} @keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
} .close-button {
color: #aaa;
float: right;
font-size: 38px;
font-weight: bold;
position: absolute; 
top: 10px;
right: 20px;
cursor: pointer;
}
.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
} .category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
gap: 20px; 
margin-top: 30px;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: #333;
padding: 15px;
border: 1px solid #eee;
border-radius: 5px;
transition: all 0.3s ease;
}
.category-item:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
transform: translateY(-5px); 
color: #007bff; 
}
.category-item img {
width: 80px; 
height: 80px;
object-fit: cover;
margin-bottom: 10px;
border-radius: 5px;
}
.category-item h3 {
font-size: 1em;
margin: 0;
line-height: 1.2;
}
.cotizar-whatsapp{
border: 2px solid #25d366 !important;
margin-top: 0px!important;
border-radius: 8px;
padding: 10px 15px;
font-weight: bold;
height: 44px;
}
.cotizar-whatsapp span{
text-align: center;
}
.cotizar-whatsapp:hover{
background: #25d366!important;
border: 2px solid #25d366 !important;
transition: all .4s ease;
} .callout{ grid-template-columns: 1.4fr .6fr; align-items:center; } 
.wrapper_carrousel{
justify-self: end;              
width: 360px;                   
max-width: 100%;
}
.controls_carrousel{
display:flex; align-items:center; justify-content:space-between;
gap:10px; margin-bottom:8px;
}
.controls_carrousel h4{
margin:0; font-size: .95rem; font-weight: 700; color: var(--ink);
}
.btn_carrousel{
border:1px solid #dfe7f3; background:#fff; border-radius:10px;
padding:6px 10px; cursor:pointer;
}
.btn_carrousel:hover{ background:#f6f9ff }
.viewport_carrousel{
overflow:hidden; width:100%;
}
.track_carrousel{
display:flex; transition: transform .3s ease;
}
.callout {
display: flex; 
align-items: flex-start; 
gap: 30px; 
} .callout > div:first-child {
flex: 0 0 35%; 
} .wrapper_carrousel {
flex: 1;
} .controls_carrousel {
display: none;
}
.viewport_carrousel {
width: 100%; 
overflow: hidden; 
white-space: nowrap; 
padding: 10px 0; 
}
.track_carrousel {
display: flex;
width: fit-content; 
animation: scrolling 40s linear infinite; 
will-change: transform; 
}
.item_carrousel {
min-width: 180px; 
height: 100px; 
margin: 0 15px; 
flex-shrink: 0; 
display: inline-flex; 
justify-content: center;
align-items: center;
border: 1px solid #eee; 
} .viewport_carrousel:hover .track_carrousel {
animation-play-state: paused;
}
@media (max-width: 600px) {
.callout {
flex-direction: column; 
gap: 0; 
} .callout > div:first-child {
width: 100%; 
padding-bottom: 20px; 
} .item_carrousel {
min-width: 45vw; 
margin: 0 8px; 
}
.track_carrousel {
animation: scrolling 50s linear infinite; 
}
}
@keyframes scrolling {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); 
}
}
.contact-page-wrapper {
max-width: 1000px;
margin: 30px auto;
display: flex;
gap: 30px;
padding: 30px;
font-family: 'Inter', 'Open Sans', Arial, sans-serif;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
@media (max-width: 768px) {
.formulario-cot {
padding: 0 0 15px 0;
border-right: none;
border-bottom: 1px solid #f8f8f8;
}
} .contact-details-panel {
flex: 1;
padding: 20px 0 20px 30px;
border-right: none;
}
@media (max-width: 768px) {
.contact-details-panel {
padding: 15px 0;
border-left: none;
text-align: center;
align-items: center;
}
} .solic {
font-size: 1.4em;
font-weight: 700;
color: #00a4d8;
text-align: center;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 3px solid #00a4d8;
}
.form-consulta input[type="text"],
.form-consulta input[type="email"],
.form-consulta select,
.form-consulta textarea {
width: 100%;
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 5px;
background-color: #fcfcfc;
box-sizing: border-box;
font-size: 1em;
color: #333333;
transition: all 0.3s ease;
}
.form-consulta input:focus,
.form-consulta select:focus,
.form-consulta textarea:focus {
border-color: #00a4d8;
box-shadow: 0 0 0 0.2rem rgba(0, 164, 216, 0.2);
outline: none;
}
.form-consulta label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333333;
font-size: 0.9em;
}
.form-consulta textarea {
min-height: 100px;
resize: vertical;
}
.center-content {
text-align: center;
margin-top: 25px;
}
.formulario-cot .form-consulta{
flex: 1 1 520px; min-width: 520px; }
.formulario-cot .card.pad{
flex: 0 0 360px; min-width: 360px;
}
.formulario-cot .yt{
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
}
@media (max-width: 1100px){
.formulario-cot{
flex-wrap: nowrap;
overflow-x: auto;
}
.formulario-cot .form-consulta,
.formulario-cot .center-content,
.formulario-cot .card.pad{
min-width: 100%;
flex: 1 1 100%;
}
}    .btn-whatsapp, .btn-llamada, .btn-forms {
display: block;
width: 100%;
padding: 12px 15px;
margin-bottom: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
font-weight: 600;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-whatsapp {
background-color: #25d366;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}
.btn-whatsapp:hover {
background-color: #128c7e;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
transform: translateY(-2px);
}
.btn-llamada {
background-color: #00a4d8; color: white;
box-shadow: 0 4px 15px #07b9ff66;
display: block;
}
.btn-llamada:hover {
background-color: #00a4d8;
box-shadow: 0 6px 20px #07b9ff66;
transform: translateY(-2px);
} .contact-title {
color: #00a4d8;
font-size: 30px;
margin-bottom: 20px;
font-weight: 800;
}
.contact-details-list {
list-style: none;
padding: 0;
margin-top: 20px;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #333333;
font-size: 16px;
transition: transform 0.3s ease, color 0.3s ease;
}
.contact-item:hover {
color: #004d99;
}
.contact-item:hover .contact-icon {
color: #00a4d8;
transform: scale(1.1);
}
@media (max-width: 768px) {
.contact-item {
justify-content: center;
}
}
.contact-icon {
font-size: 24px;
color: #004d99;
margin-right: 15px;
width: 30px;
text-align: center;
transition: transform 0.3s ease, color 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
} .formulario-cot {
background: #ffffff;
border-radius: 15px !important;
border: 1px solid #e5e5e5 !important;
padding: 12px 15px !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s ease, transform 0.15s ease;
display: flex;
flex-wrap: nowrap;
gap: 24px;
align-items: flex-start;
}
.formulario-cot:hover {
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
transform: translateY(-2px);
} label.contact {
width: 100%;
font-size: 15px;
font-weight: 700;
color: #333;
margin-bottom: 3px;
} #cotizacion-modal .modal-form input,
#cotizacion-modal .modal-form select,
#cotizacion-modal .modal-form textarea {
background: #f8f9fc;
border-radius: 15px;
border: 1px solid #115da9;
font-size: 15px;
color: #333;
padding: 8px 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
#cotizacion-modal .modal-form input::placeholder,
#cotizacion-modal .modal-form textarea::placeholder {
color: #a2aab7;
}
#cotizacion-modal .modal-form input:hover,
#cotizacion-modal .modal-form select:hover,
#cotizacion-modal .modal-form textarea:hover {
background: #ffffff;
border-color: #0b71d0;
box-shadow: 0 4px 10px rgba(17, 93, 169, 0.18);
transform: translateY(-1px);
}
#cotizacion-modal .modal-form input:focus,
#cotizacion-modal .modal-form select:focus,
#cotizacion-modal .modal-form textarea:focus {
outline: none;
border-color: #0b71d0;
box-shadow: 0 0 0 2px rgba(11, 113, 208, 0.25);
background: #ffffff;
} #cotizacion-modal .form-group{
margin-bottom: 8px; } #cotizacion-modal .modal-form h4{
margin-bottom: 10px;
} #cotizacion-modal .modal-form input,
#cotizacion-modal .modal-form select {
height: 44px; padding: 8px 12px; line-height: 1.2; box-sizing: border-box;
} #cotizacion-modal .modal-form textarea {
padding: 10px 12px;
line-height: 1.4;
box-sizing: border-box;
resize: vertical; } .btn-forms {
background-color: var(--brand-blue);
color: white;
}
.btn-forms:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(17, 93, 169, 0.3);
background-color: #0d4a8d;
} .btn-mov {
margin-bottom: 15px;
}
.btn-mov a {
color: #fff;
text-decoration: none;
width: 100%;
}
.btn-mov:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
background-color: #1ea751;
} @media screen and (max-width: 480px) {
.formulario-cot {
border-radius: 12px !important;
padding: 10px 10px !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
} :root {
--brand-blue: #115da9;
--accent-whatsapp: #25d366;
} .form-compact-wrapper {
max-width: 450px;
margin: 0 auto;
padding: 15px;
}
.cta-stack{
display: flex;
flex-direction: column;
gap: 1px; align-items: center; margin-top: 12px;
} .cta-stack button{
width: 100%;
max-width: 420px;
}
.cta-stack .btn-llamada{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.datos_extra ul{
list-style: none;
}
.btn-llamada,
.btn-llamada:focus,
.btn-llamada:active {
background: #0ea5e9 !important; 
}
.datos_extra ul li{
margin-bottom: 7px;
} .formulario-cot .card.pad{
flex: 0 0 760px; min-width: 460px;
padding: 24px; } .formulario-cot .card.pad{
min-height: 520px;
} .formulario-cot .card.pad .yt{
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
} @media (max-width: 768px){
.formulario-cot{
display: flex;
flex-direction: column; gap: 16px;
} .formulario-cot .form-left,
.formulario-cot .form-consulta,
.formulario-cot .center-content,
.formulario-cot .card.pad{
width: 100%;
min-width: 0 !important; flex: 1 1 auto !important;
} .formulario-cot .center-content{
margin-top: 14px;
}
}
.whats-fijo{
padding: 10px;
position: fixed;
background: #25d366;
z-index: 888;
bottom: 50px;
right: 20px;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
.whats-fijo i{
color: white!important;
z-index: 999;
font-size: 30px;
}
footer{
background: #f7fafc;
border-top: 2px solid #007bff;
}
footer h4{
color: #e21b23!important;
padding-bottom: 8px;
border-bottom: 2px solid #e21b23;
}
footer p, footer a{
color: gray!important;
}
footer img{
width: 70%;
margin-top: 20px;
} .slider-container {
position: relative;
width: 100%;
height: 700px; 
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000; 
background-size: contain; 
background-position: center; 
background-repeat: no-repeat; 
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}
.slide.active {
opacity: 1;
z-index: 2;
} .slide .container {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start; padding-left: 40px; padding-right: 0;
margin-left: 0 !important;
}
.hero-content {
max-width: 600px; 
color: #fff; 
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
position: relative; 
z-index: 3; 
}
.hero-content h1, .hero-content .tagline {
color: #ffffff; 
}
.hero-content p {
color: #ffffff;
}
.slider-container {
position: relative; 
width: 100%;
height: 600px; 
overflow: hidden; 
} .slider-container {
position: relative;
width: 100%;
height: 600px; overflow: hidden;
} .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1; } .slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 31, 59, 0.65); } .slide.active {
opacity: 1;
z-index: 2; } .slide .container {
height: 100%;
display: flex;
align-items: center;
} .slide-1 {
background-image: url(//lifemedic.com.mx/wp-content/themes/davici/landing/ruta/a/tu/imagen-1.jpg);
background-position: 50% 30%; }
.slide-2 {
background-image: url(//lifemedic.com.mx/wp-content/themes/davici/landing/ruta/a/tu/imagen-2.jpg);
background-position: 50% 25%; }
.slide-3 {
background-image: url(//lifemedic.com.mx/wp-content/themes/davici/landing/ruta/a/tu/imagen-3.jpg);
background-position: 50% 30%; } .personal-attention-card{
position: absolute;
right: clamp(36px, 4vw, 56px);
bottom: clamp(28px, 4vh, 56px);
z-index: 10;
width: min(380px, 88vw);
max-width: 380px;
padding: 18px 18px 22px;
border-radius: 22px;
border: none;
color: #0f172a;
text-align: left;
background: rgba(255, 255, 255, 0.50);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
box-shadow: var(--shadow-lg);
} .personal-attention-card h3{
margin: 0 0 8px;
font-size: 1.06rem;
font-weight: 800;
color: #0a2a4d;
}
.personal-attention-card p{
margin: 6px 0 10px;
font-size: .94rem;
line-height: 1.46;
color: #475569;
}
.personal-attention-card .response-time{
margin: 8px 0 0;
font-size: .9rem;
color: #64748b;
} @media (max-width:1100px){
.personal-attention-card{
position: static;
width: 100%;
max-width: 100%;
margin: 18px 16px 0;
border-radius: 12px;
background: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: 0 10px 30px rgba(2,8,23,.1);
}
}
@media (max-width:640px){
.personal-attention-card{
display: none;
padding: 16px;
margin: 10px 16px 0;
}
.personal-attention-card h3{ font-size: 1rem; }
} @media (max-width: 768px) { .slider-container {
height: 80vh; } .hero-content {
text-align: center;
padding: 0 20px;
}
.hero-content h1 {
font-size: 2.2rem;
}  .slide-1, .slide-2, .slide-3 {
background-position: center center; }
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none; 
justify-content: center;
align-items: center;
z-index: 1000;
padding: 1rem;
} .modal-overlay.active {
display: flex;
} .modal-content {
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
position: relative;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto; } .close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 2rem;
color: #888;
cursor: pointer;
line-height: 1;
}
.close-button:hover {
color: #333;
} .modal-product-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 1.5rem;
}
#modal-product-image {
width: 200px; 
height: 200px;
object-fit: cover;
border-radius: 6px; 
border: none;       
}
#modal-product-title {
margin: 0;
font-size: 1.5rem;
color: #1a3a6e;
} .modal-form h4 {
font-size: 1.5rem;
text-align: center;
color: #2980b9;
margin-top: 0;
margin-bottom: 1rem;
}
.modal-form .form-group {
margin-bottom: 1rem;
}
.modal-form input,
.modal-form select,
.modal-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; 
font-size: 1rem;
}
.modal-form textarea {
resize: vertical;
min-height: 100px;
}
.modal-form .form-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.modal-form button {
padding: 12px;
border: none;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: opacity 0.2s;
}
.modal-form button:hover {
opacity: 0.9;
}
.modal-form .btn-submit {
background-color: #0056b3;
color: white;
}
.modal-form .btn-whatsapp {
background-color: #25D366;
color: white;
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1.5rem;
padding-top: 1rem;
} .category-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: #333;
}
.category-item img {
width: 60px;
height: 60px;
margin-bottom: 0.5rem;
background-color: #f0f0f0;
border-radius: 8px;
}
.category-item h3 {
font-size: 0.9rem;
margin: 0;
font-weight: 500;
}  @media (max-width: 768px) {
.category-grid { max-height: 400px; overflow-y: auto; padding-right: 10px;
}
}
@media (min-width: 769px) { #categoriesModal .modal-content {
max-width: 800px; }
}  @media (max-width: 768px) { .modal-product-header {
flex-direction: column; } #modal-product-title {
text-align: center; font-size: 1.2rem; margin-top: 1rem; } .modal-form h4 {
font-size: 1.4rem;
}
}
.features-section .card {
position: relative;
border: 3px solid transparent;
border-radius: 16px;
padding: 25px;
background:
linear-gradient(white, white) padding-box,
linear-gradient(135deg, #105EA9, #E21B23) border-box;
overflow: hidden; } .features-section .card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16,94,169,0.25), transparent 70%),
radial-gradient(circle at 80% 80%, rgba(226,27,35,0.25), transparent 70%);
filter: blur(45px); z-index: 0;
} .features-section .card * {
position: relative;
z-index: 1;
} .datos_extra{ padding: 18px 18px 14px; border-radius: 16px; border: 1px solid rgba(17, 93, 169, 0.12); background: linear-gradient(
180deg,
rgba(17, 93, 169, 0.06),
rgba(255,255,255,0)
);
} .datos_extra h3{
margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; color: #0b2b4a; letter-spacing: 0.2px; } .datos_list{
list-style: none; padding: 0; margin: 0;  display: grid;
gap: 10px; } .dato_item{ display: flex;
gap: 12px;
align-items: center; padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(0,0,0,0.06);
background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,0.04); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
} .dato_item:hover{
transform: translateY(-1px);
border-color: rgba(17, 93, 169, 0.20);
box-shadow: 0 10px 20px rgba(0,0,0,0.06);
} .dato_icon{ width: 42px;
height: 42px; display: inline-flex;
align-items: center;
justify-content: center; border-radius: 12px; background: rgba(17, 93, 169, 0.10);
color: #115da9; flex: 0 0 42px;
} .dato_text{ display: grid;
gap: 2px;
} .dato_label{
font-size: 0.78rem;
color: rgba(17, 20, 30, 0.62);
font-weight: 700;
letter-spacing: 0.2px;
} .dato_value{
font-size: 0.98rem;
color: #0b2b4a;
font-weight: 700;
text-decoration: none; } a.dato_value:hover{
text-decoration: underline;
text-underline-offset: 3px;
} .datos_actions{ display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; margin-top: 14px;
} .datos_btn{ display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; padding: 11px 12px;
border-radius: 12px; border: 1px solid rgba(17, 93, 169, 0.18);
background: #fff; color: #115da9;
font-weight: 800;
text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
} .datos_btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0,0,0,0.06);
} .datos_btn--primary{
background: #115da9;
color: #fff;
border-color: transparent;
} .datos_btn--primary:hover{
background: #0d4a8d;
} @media (max-width: 480px){ .datos_actions{
grid-template-columns: 1fr;
}
}
.center-content { display: flex !important; }
.btn-movil { display: inline-flex !important; } .btn-prim {
background-color: #105EA9;
color: #fff !important;
padding: 10px 20px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
box-shadow: 0 8px 20px rgba(2,8,23,.06);
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-prim:hover {
transform: translateY(-1px);
background-color: #E21B23;
box-shadow: 0 10px 24px rgba(2,8,23,.12);
} .btn-catal{
margin-top: 0;
margin-bottom: 10px;
background: transparent !important;
border: 2px solid #5aa0ff !important;
}
.btn-catal:hover{
background: #5aa0ff !important;
border: 2px solid #5aa0ff !important;
}
#openCategoriesMod {
padding: 14px 34px;
display: inline-block;
border-radius: 50px;
background: linear-gradient(90deg, #399af5, #fd6464);
background-size: 200% auto;
color: #fff;
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: 0.4s ease;
}
#openCategoriesMod:hover {
background-position: right center;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18);
}
#openCategoriesMod:active {
transform: scale(0.96);
}:root{ --lm-red:#E21B23;
--lm-red-600:#C9151C;
--lm-blue:#0B53B7;
--lm-blue-700:#093C82; --bg:#F7FAFC;
--card:#FFFFFF;
--ink:#0F172A;
--muted:#64748B; --ring:0 0 0 3px rgba(11,83,183,.25);
--radius:20px;
--shadow-lg:0 10px 30px rgba(2,8,23,.08);
--shadow-md:0 8px 20px rgba(2,8,23,.06);
--header-bg:rgba(255,255,255,.9);
--header-border:#eef2f7;
--menu-link:#0b2340;
--menu-link-hover:var(--lm-blue); --visible_carrousel:5;
--fab-clear:112px; --brand-blue:#115da9;
--accent-whatsapp:#25d366;
} *{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background:var(--bg)}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}  .topbar{background:#0a0f1f;color:#fff;font-size:.9rem}
.topbar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:.5rem 0}
.topbar .actions{display:flex;gap:14px;flex-wrap:wrap}
.topbar a{opacity:.9}
.pill-mini{ padding: .25rem .6rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1); font-size: .8rem;
}
.badge{
display:inline-flex; align-items:center; gap:8px;
} header{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--header-border);backdrop-filter:saturate(180%) blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;position:relative}
.brand{display:flex;align-items:center;gap:12px}
header img{height:32px; object-fit:contain }
.brand .title{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{padding:10px 12px;border-radius:10px;position:relative;color:var(--menu-link);background:transparent}
.menu a:hover{color:var(--menu-link-hover)}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;opacity:.25}
.menu a:hover::after{transform:scaleX(1)} .menu a.cta{background:var(--lm-red)!important;color:#fff!important;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-md)}
.menu a.cta::after{content:none!important}
.menu a.cta:hover{background:var(--lm-red-600)!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.18)} .hamb{
display:none;
align-items:center;
gap:8px;
border:1px solid #e6ebf4;
padding:8px 12px;
border-radius:12px;
background:#fff;
cursor:pointer;
font-weight: 600;
}  @media (max-width: 1000px){
.topbar .badge:last-child {
display: none; 
}
} @media (max-width: 768px){
.topbar .wrap {
flex-direction: column;
align-items: center;
gap: 8px;
}
.topbar .actions {
justify-content: center;
gap: 10px;
}
.topbar .badge[aria-label="Envío nacional"] {
display: none; }
} @media (max-width: 840px){
.hamb {
display: flex;
} .menu {
position: absolute;
top: 100%; left: 0;
right: 0;
flex-direction: column;
background: var(--header-bg);
border-top: 1px solid var(--header-border);
padding: 10px 0 20px;
box-shadow: var(--shadow-lg); display: none; 
transform: translateY(-10px);
opacity: 0;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
} .menu.is-open {
display: flex;
transform: translateY(0);
opacity: 1;
} .menu a {
width: 92%;
margin-inline: auto;
text-align: center;
}
.menu a.cta {
margin-top: 10px;
}
.menu a::after {
display: none; }
} .hero-section{
position: relative;
margin: 16px 24px;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(2,8,23,.12); min-height: clamp(480px, 56vh, 640px);
} .hero-section .container{
position: relative;
display: grid;
grid-template-columns: 0.95fr 1.05fr; gap: 80px;
align-items: center;
padding: 28px 0 36px;
} .hero-image{ position: relative; }
.hero-image .main-image{ display: none !important; } .hl-blue{ color:#5aa0ff; }
.br-lg{ display:block; } .hK{color: #ffffff;}
.hero-content .tagline{
display:inline-block; text-transform:uppercase; letter-spacing:.08em;
font-weight:600; font-size:1.50rem;
padding:6px 10px; border-radius:999px;
background:rgba(255,255,255,.14); color:#d9e6ff;
margin-bottom:12px;
position: absolute;
right: -1000px; top: 0; 
text-align: center;
}
.hero-content h1{
margin:0 0 14px;
font-weight:800;
font-family: Inter !important;
line-height:1.05;
color:#fff;
max-width:16ch;
text-wrap:balance;
overflow-wrap:anywhere;
}
.hero-content > p{
color:#e7f0ff;
font-size:clamp(1rem,1.15vw,1.125rem);
line-height:1.6;
max-width:54ch;
margin:0 0 16px;
} .hero-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 10px; }
.hero-buttons .btn{ border:0; border-radius:12px; padding:10px 16px; font-weight:700; } .cotizar-whatsapp{
display:inline-flex; align-items:center; gap:8px;
background:#25D366; color:#fff; padding: 10px 16px; border-radius:12px; font-weight:700;
box-shadow:0 8px 20px rgba(2,8,23,.06);
}
.cotizar-whatsapp:hover{ transform:translateY(-1px); color:#fff !important; } .advantages{ margin: 6px 0 0; padding-left: 0; list-style: none; }  @media (max-width:1000px){ .br-lg{ display:none; } } @media (max-width: 1000px){
.hero-section .container{
grid-template-columns: 1fr; gap: 20px; }
.hero-content h1, .hero-content > p{ max-width: none; } .hero-section{
min-height: clamp(480px, 60vh, 640px); }
} @media (max-width: 640px){
.hero-section{ margin: 10px 16px; } } .hero-buttons{ gap: 10px; margin: 6px 0 12px; }
.hero-buttons .btn{ padding: 10px 16px; border-radius: 10px; }
.hero-cta-main, .hero-cta-secondary{ font-size: 1rem; }
.advantages{ gap: 6px; } .main-image{
height: 420px;                    
border-radius: 16px;
} @media (max-width: 640px){
.hero-section{ padding: 28px 0 34px; }
.hero-content h1{ font-size: clamp(1.7rem, 7vw, 2.4rem); }
.main-image{ height: 300px; }
.hero-buttons .btn{ padding: 9px 14px; }
} .section{padding:48px 0}
.section h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 10px}
.section .sub{color:var(--muted);margin-bottom:22px}
.cats {
display: grid; grid-template-columns: repeat(4, 1fr); 
gap: 16px;
margin-bottom: 22px;
}
.cat {
padding: 24px 16px; 
background: var(--card);
border-radius: 16px;
border: 1px solid #e8eef6;
display: flex;
flex-direction: column;
gap: 12px; box-shadow: var(--shadow-md);
}
.cat img {
height: 200px; 
object-fit: contain;
}
.cat b {
font-size: 1.25rem; }
.cat a{margin-top:auto;color:var(--lm-blue);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2-1{grid-template-columns:1.1fr .9fr}
.pad{padding:18px}
.card{background:var(--card);border:1px solid #e8eef6;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-md)}
.card .img{aspect-ratio:4/3;background:#f5f7fb;display:grid;place-items:center}
.card h3{font-size:1.05rem;margin:14px 14px 6px}
.price{color:#0a7a3f;font-weight:700;margin:0 14px 10px}
.meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;margin:0 14px 14px}
.card .act{margin:0 14px 16px 14px;margin-top:auto;display:flex;gap:8px}
.btn{padding:10px 12px;border-radius:12px;border:1px solid #dfe7f3;background:#fff}
.btn.primary{background:var(--lm-red);border-color:var(--lm-red);color:#fff} .brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;filter:grayscale(100%);opacity:.8} .callout{background:linear-gradient(135deg, rgba(11,83,183,.06), rgba(226,27,35,.06));padding:24px;border-radius:20px;border:1px solid #e1e9f5;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:18px}
.callout h3{margin:.2rem 0} footer{background:#0b1530;color:#c7d2fe;margin-top:36px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:42px 0}
.foot h4{margin:0 0 12px;color:#fff}
.foot a{display:block;color:#c7d2fe;margin:8px 0}
.credits{border-top:1px solid #2a355a;padding:14px 0;color:#94a3b8;font-size:.9rem;display:flex;justify-content:space-between;align-items:center} button,.btn,.cta,.menu a,.pill,.cat,.card,.brand,.kicker,.chip{transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;cursor:pointer}
.btn:hover,.cta:hover,.pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.12)}
.btn:active,.cta:active,.pill:active{transform:none}
.card:hover,.cat:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,8,23,.12)}
.card .img img{transition:transform .25s ease}
.card:hover .img img{transform:scale(1.02)}
.chip:hover{transform:translateY(-2px)}
.srch button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,83,183,.25)}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.show{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} @media (max-width:1100px){
.cats{grid-template-columns:repeat(4,1fr)}
.grid{grid-template-columns:repeat(3,1fr)}
.brands{grid-template-columns:repeat(4,1fr)}
.callout{grid-template-columns:1fr}
}
@media (max-width:800px){
.hero-grid{grid-template-columns:1fr}
.foot{grid-template-columns:1fr 1fr}
.hamb{display:inline-flex}
.menu{position:absolute;left:0;right:0;display:none;background:#fff;border-bottom:1px solid #e6ebf4;box-shadow:0 12px 30px rgba(2,8,23,.10);padding:12px;z-index:999;flex-direction:column;gap:8px}
.menu a{padding:12px;border-radius:12px}
.nav.open #mainMenu{display:grid;animation:drop .18s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media (max-width:700px){
.cats{grid-template-columns:1fr}
.grid{grid-template-columns:1fr}
} .advantages{ margin: 6px 0 0; padding-left: 0; list-style: none; }
.advantages li{ margin: 6px 0; color:#eaf2ff; }  .btn-whatsapp{
display:flex; align-items:center; justify-content:center; gap:10px;
width:100%;
padding:11px 14px;
border-radius:999px;
font-weight:800;
background:#25D366; color:#fff !important;
text-decoration:none;
box-shadow:0 10px 22px rgba(37,211,102,.35);
transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-whatsapp:hover{
filter:brightness(.96);
transform:translateY(-1px);
box-shadow:0 14px 28px rgba(37,211,102,.42);
}
.to-top{
display:none; 
position:fixed; 
right:18px; bottom:18px;
width:54px; height:54px;
z-index: 70;
cursor:pointer;
align-items:center; justify-content:center;
will-change: transform; border-radius:999px;
border:1px solid rgba(255,255,255,.55);
background:rgba(255,255,255,.82);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
color:#0b2340;
box-shadow:
0 10px 26px rgba(2,8,23,.20),
inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
} .to-top.show{ display:flex; } .to-top:hover{
transform: translateY(-4px);
background: rgba(255,255,255,.92);
box-shadow:
0 16px 40px rgba(2,8,23,.26),
0 0 22px rgba(11,83,183,.25), inset 0 0 0 1px rgba(255,255,255,.45);
}  .to-top::before{
content:"";
position:absolute; inset:-3px; border-radius:inherit;
background:
conic-gradient(#0B53B7 calc(var(--p,0)*1%), #E21B23 0 0); 
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
opacity:.95; 
pointer-events:none;
} .to-top::after{
content: attr(data-label);
position:absolute;
bottom: 66px; 
right: 0;
padding: 6px 10px;
border-radius: 10px;
background: rgba(20,28,51,.9);
color:#fff;
font-size: .78rem;
letter-spacing:.2px;
white-space:nowrap;
box-shadow: 0 8px 18px rgba(2,8,23,.25);
opacity:0;
transform: translateY(4px);
pointer-events:none;
transition: opacity .18s ease, transform .18s ease;
}
.to-top:hover::after{ 
opacity:1; 
transform: translateY(0); 
} @media (max-width:420px){
.to-top{ width:50px; height:50px; right:14px; bottom:14px; }
.to-top::after{ right: -8px; } } @media (prefers-reduced-motion: reduce){
.to-top, .to-top:hover{ transition: none; transform:none; }
} .to-top:focus-visible{
outline: 0;
box-shadow:
0 0 0 4px rgba(11,83,183,.35), 
0 16px 40px rgba(2,8,23,.26);
} :root{
--fab-clear: 112px; }
.to-top{
bottom: calc(env(safe-area-inset-bottom, 0px) + 18px + var(--fab-clear));
right: calc(env(safe-area-inset-right, 0px) + 18px);
z-index: 71; 
} @media (max-width: 640px){
:root{ --fab-clear: 136px; } .to-top{ right: calc(env(safe-area-inset-right, 0px) + 14px); }
} body.no-fabs .to-top{
bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
} .modal {
display: none; 
position: fixed; 
z-index: 1000; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgba(0,0,0,0.7); 
backdrop-filter: blur(5px); 
} .modal-content {
background-color: #fefefe;
margin: 5% auto; 
padding: 30px;
border: 1px solid #888;
width: 80%; 
max-width: 900px; 
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
position: relative; 
animation-name: animatetop;
animation-duration: 0.4s;
} .category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 20px;
margin-top: 24px;
} .category-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 16px;
border-radius: 18px;
background: #ffffff; text-decoration: none;
overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
} .category-item::before {
content: "";
position: absolute;
inset: 0;
padding: 2px; border-radius: inherit;
background: linear-gradient(135deg, #0f62fe, #ff4b6a);
-webkit-mask: 
linear-gradient(#fff 0 0) content-box, 
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
} .category-item img,
.category-item h3 {
position: relative;
z-index: 1;
}
.category-item img {
max-width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 12px;
}
.category-item h3 {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0;
} .category-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
} @keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
} .close-button {
color: #aaa;
float: right;
font-size: 38px;
font-weight: bold;
position: absolute; 
top: 10px;
right: 20px;
cursor: pointer;
}
.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
} .category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
gap: 20px; 
margin-top: 30px;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: #333;
padding: 15px;
border: 1px solid #eee;
border-radius: 5px;
transition: all 0.3s ease;
}
.category-item:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
transform: translateY(-5px); 
color: #007bff; 
}
.category-item img {
width: 80px; 
height: 80px;
object-fit: cover;
margin-bottom: 10px;
border-radius: 5px;
}
.category-item h3 {
font-size: 1em;
margin: 0;
line-height: 1.2;
}
.cotizar-whatsapp{
border: 2px solid #25d366 !important;
margin-top: 0px!important;
border-radius: 8px;
padding: 10px 15px;
font-weight: bold;
height: 44px;
}
.cotizar-whatsapp span{
text-align: center;
}
.cotizar-whatsapp:hover{
background: #25d366!important;
border: 2px solid #25d366 !important;
transition: all .4s ease;
} .callout{ grid-template-columns: 1.4fr .6fr; align-items:center; } 
.wrapper_carrousel{
justify-self: end;              
width: 360px;                   
max-width: 100%;
}
.controls_carrousel{
display:flex; align-items:center; justify-content:space-between;
gap:10px; margin-bottom:8px;
}
.controls_carrousel h4{
margin:0; font-size: .95rem; font-weight: 700; color: var(--ink);
}
.btn_carrousel{
border:1px solid #dfe7f3; background:#fff; border-radius:10px;
padding:6px 10px; cursor:pointer;
}
.btn_carrousel:hover{ background:#f6f9ff }
.viewport_carrousel{
overflow:hidden; width:100%;
}
.track_carrousel{
display:flex; transition: transform .3s ease;
}
.callout {
display: flex; 
align-items: flex-start; 
gap: 30px; 
} .callout > div:first-child {
flex: 0 0 35%; 
} .wrapper_carrousel {
flex: 1;
} .controls_carrousel {
display: none;
}
.viewport_carrousel {
width: 100%; 
overflow: hidden; 
white-space: nowrap; 
padding: 10px 0; 
}
.track_carrousel {
display: flex;
width: fit-content; 
animation: scrolling 40s linear infinite; 
will-change: transform; 
}
.item_carrousel {
min-width: 180px; 
height: 100px; 
margin: 0 15px; 
flex-shrink: 0; 
display: inline-flex; 
justify-content: center;
align-items: center;
border: 1px solid #eee; 
} .viewport_carrousel:hover .track_carrousel {
animation-play-state: paused;
}
@media (max-width: 600px) {
.callout {
flex-direction: column; 
gap: 0; 
} .callout > div:first-child {
width: 100%; 
padding-bottom: 20px; 
} .item_carrousel {
min-width: 45vw; 
margin: 0 8px; 
}
.track_carrousel {
animation: scrolling 50s linear infinite; 
}
}
@keyframes scrolling {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); 
}
}
.contact-page-wrapper {
max-width: 1000px;
margin: 30px auto;
display: flex;
gap: 30px;
padding: 30px;
font-family: 'Inter', 'Open Sans', Arial, sans-serif;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
@media (max-width: 768px) {
.formulario-cot {
padding: 0 0 15px 0;
border-right: none;
border-bottom: 1px solid #f8f8f8;
}
} .contact-details-panel {
flex: 1;
padding: 20px 0 20px 30px;
border-right: none;
}
@media (max-width: 768px) {
.contact-details-panel {
padding: 15px 0;
border-left: none;
text-align: center;
align-items: center;
}
} .solic {
font-size: 1.4em;
font-weight: 700;
color: #00a4d8;
text-align: center;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 3px solid #00a4d8;
}
.form-consulta input[type="text"],
.form-consulta input[type="email"],
.form-consulta select,
.form-consulta textarea {
width: 100%;
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 5px;
background-color: #fcfcfc;
box-sizing: border-box;
font-size: 1em;
color: #333333;
transition: all 0.3s ease;
}
.form-consulta input:focus,
.form-consulta select:focus,
.form-consulta textarea:focus {
border-color: #00a4d8;
box-shadow: 0 0 0 0.2rem rgba(0, 164, 216, 0.2);
outline: none;
}
.form-consulta label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333333;
font-size: 0.9em;
}
.form-consulta textarea {
min-height: 100px;
resize: vertical;
}
.center-content {
text-align: center;
margin-top: 25px;
}
.formulario-cot .form-consulta{
flex: 1 1 520px; min-width: 520px; }
.formulario-cot .card.pad{
flex: 0 0 360px; min-width: 360px;
}
.formulario-cot .yt{
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
}
@media (max-width: 1100px){
.formulario-cot{
flex-wrap: nowrap;
overflow-x: auto;
}
.formulario-cot .form-consulta,
.formulario-cot .center-content,
.formulario-cot .card.pad{
min-width: 100%;
flex: 1 1 100%;
}
}    .btn-whatsapp, .btn-llamada, .btn-forms {
display: block;
width: 100%;
padding: 12px 15px;
margin-bottom: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
font-weight: 600;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-whatsapp {
background-color: #25d366;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}
.btn-whatsapp:hover {
background-color: #128c7e;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
transform: translateY(-2px);
}
.btn-llamada {
background-color: #00a4d8; color: white;
box-shadow: 0 4px 15px #07b9ff66;
display: block;
}
.btn-llamada:hover {
background-color: #00a4d8;
box-shadow: 0 6px 20px #07b9ff66;
transform: translateY(-2px);
} .contact-title {
color: #00a4d8;
font-size: 30px;
margin-bottom: 20px;
font-weight: 800;
}
.contact-details-list {
list-style: none;
padding: 0;
margin-top: 20px;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #333333;
font-size: 16px;
transition: transform 0.3s ease, color 0.3s ease;
}
.contact-item:hover {
color: #004d99;
}
.contact-item:hover .contact-icon {
color: #00a4d8;
transform: scale(1.1);
}
@media (max-width: 768px) {
.contact-item {
justify-content: center;
}
}
.contact-icon {
font-size: 24px;
color: #004d99;
margin-right: 15px;
width: 30px;
text-align: center;
transition: transform 0.3s ease, color 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
} .formulario-cot {
background: #ffffff;
border-radius: 15px !important;
border: 1px solid #e5e5e5 !important;
padding: 12px 15px !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s ease, transform 0.15s ease;
display: flex;
flex-wrap: nowrap;
gap: 24px;
align-items: flex-start;
}
.formulario-cot:hover {
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
transform: translateY(-2px);
} label.contact {
width: 100%;
font-size: 15px;
font-weight: 700;
color: #333;
margin-bottom: 3px;
} #cotizacion-modal .modal-form input,
#cotizacion-modal .modal-form select,
#cotizacion-modal .modal-form textarea {
background: #f8f9fc;
border-radius: 15px;
border: 1px solid #115da9;
font-size: 15px;
color: #333;
padding: 8px 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
#cotizacion-modal .modal-form input::placeholder,
#cotizacion-modal .modal-form textarea::placeholder {
color: #a2aab7;
}
#cotizacion-modal .modal-form input:hover,
#cotizacion-modal .modal-form select:hover,
#cotizacion-modal .modal-form textarea:hover {
background: #ffffff;
border-color: #0b71d0;
box-shadow: 0 4px 10px rgba(17, 93, 169, 0.18);
transform: translateY(-1px);
}
#cotizacion-modal .modal-form input:focus,
#cotizacion-modal .modal-form select:focus,
#cotizacion-modal .modal-form textarea:focus {
outline: none;
border-color: #0b71d0;
box-shadow: 0 0 0 2px rgba(11, 113, 208, 0.25);
background: #ffffff;
} #cotizacion-modal .form-group{
margin-bottom: 8px; } #cotizacion-modal .modal-form h4{
margin-bottom: 10px;
} #cotizacion-modal .modal-form input,
#cotizacion-modal .modal-form select {
height: 44px; padding: 8px 12px; line-height: 1.2; box-sizing: border-box;
} #cotizacion-modal .modal-form textarea {
padding: 10px 12px;
line-height: 1.4;
box-sizing: border-box;
resize: vertical; } .btn-forms {
background-color: var(--brand-blue);
color: white;
}
.btn-forms:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(17, 93, 169, 0.3);
background-color: #0d4a8d;
} .btn-mov {
margin-bottom: 15px;
}
.btn-mov a {
color: #fff;
text-decoration: none;
width: 100%;
}
.btn-mov:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
background-color: #1ea751;
} @media screen and (max-width: 480px) {
.formulario-cot {
border-radius: 12px !important;
padding: 10px 10px !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
} :root {
--brand-blue: #115da9;
--accent-whatsapp: #25d366;
} .form-compact-wrapper {
max-width: 450px;
margin: 0 auto;
padding: 15px;
}
.cta-stack{
display: flex;
flex-direction: column;
gap: 1px; align-items: center; margin-top: 12px;
} .cta-stack button{
width: 100%;
max-width: 420px;
}
.cta-stack .btn-llamada{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.datos_extra ul{
list-style: none;
}
.btn-llamada,
.btn-llamada:focus,
.btn-llamada:active {
background: #0ea5e9 !important; 
}
.datos_extra ul li{
margin-bottom: 7px;
} .formulario-cot .card.pad{
flex: 0 0 760px; min-width: 460px;
padding: 24px; } .formulario-cot .card.pad{
min-height: 520px;
} .formulario-cot .card.pad .yt{
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
} @media (max-width: 768px){
.formulario-cot{
display: flex;
flex-direction: column; gap: 16px;
} .formulario-cot .form-left,
.formulario-cot .form-consulta,
.formulario-cot .center-content,
.formulario-cot .card.pad{
width: 100%;
min-width: 0 !important; flex: 1 1 auto !important;
} .formulario-cot .center-content{
margin-top: 14px;
}
}
.whats-fijo{
padding: 10px;
position: fixed;
background: #25d366;
z-index: 888;
bottom: 50px;
right: 20px;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
.whats-fijo i{
color: white!important;
z-index: 999;
font-size: 30px;
}
footer{
background: #f7fafc;
border-top: 2px solid #007bff;
}
footer h4{
color: #e21b23!important;
padding-bottom: 8px;
border-bottom: 2px solid #e21b23;
}
footer p, footer a{
color: gray!important;
}
footer img{
width: 70%;
margin-top: 20px;
} .slider-container {
position: relative;
width: 100%;
height: 700px; 
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000; 
background-size: contain; 
background-position: center; 
background-repeat: no-repeat; 
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}
.slide.active {
opacity: 1;
z-index: 2;
} .slide .container {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start; padding-left: 40px; padding-right: 0;
margin-left: 0 !important;
}
.hero-content {
max-width: 600px; 
color: #fff; 
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
position: relative; 
z-index: 3; 
}
.hero-content h1, .hero-content .tagline {
color: #ffffff; 
}
.hero-content p {
color: #ffffff;
}
.slider-container {
position: relative; 
width: 100%;
height: 600px; 
overflow: hidden; 
} .slider-container {
position: relative;
width: 100%;
height: 600px; overflow: hidden;
} .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1; } .slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 31, 59, 0.65); } .slide.active {
opacity: 1;
z-index: 2; } .slide .container {
height: 100%;
display: flex;
align-items: center;
} .slide-1 {
background-image: url(//lifemedic.com.mx/wp-content/themes/davici/landing/ruta/a/tu/imagen-1.jpg);
background-position: 50% 30%; }
.slide-2 {
background-image: url(//lifemedic.com.mx/wp-content/themes/davici/landing/ruta/a/tu/imagen-2.jpg);
background-position: 50% 25%; }
.slide-3 {
background-image: url(//lifemedic.com.mx/wp-content/themes/davici/landing/ruta/a/tu/imagen-3.jpg);
background-position: 50% 30%; } .personal-attention-card{
position: absolute;
right: clamp(36px, 4vw, 56px);
bottom: clamp(28px, 4vh, 56px);
z-index: 10;
width: min(380px, 88vw);
max-width: 380px;
padding: 18px 18px 22px;
border-radius: 22px;
border: none;
color: #0f172a;
text-align: left;
background: rgba(255, 255, 255, 0.50);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
box-shadow: var(--shadow-lg);
} .personal-attention-card h3{
margin: 0 0 8px;
font-size: 1.06rem;
font-weight: 800;
color: #0a2a4d;
}
.personal-attention-card p{
margin: 6px 0 10px;
font-size: .94rem;
line-height: 1.46;
color: #475569;
}
.personal-attention-card .response-time{
margin: 8px 0 0;
font-size: .9rem;
color: #64748b;
} @media (max-width:1100px){
.personal-attention-card{
position: static;
width: 100%;
max-width: 100%;
margin: 18px 16px 0;
border-radius: 12px;
background: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: 0 10px 30px rgba(2,8,23,.1);
}
}
@media (max-width:640px){
.personal-attention-card{
display: none;
padding: 16px;
margin: 10px 16px 0;
}
.personal-attention-card h3{ font-size: 1rem; }
} @media (max-width: 768px) { .slider-container {
height: 80vh; } .hero-content {
text-align: center;
padding: 0 20px;
}
.hero-content h1 {
font-size: 2.2rem;
}  .slide-1, .slide-2, .slide-3 {
background-position: center center; }
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none; 
justify-content: center;
align-items: center;
z-index: 1000;
padding: 1rem;
} .modal-overlay.active {
display: flex;
} .modal-content {
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
position: relative;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto; } .close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 2rem;
color: #888;
cursor: pointer;
line-height: 1;
}
.close-button:hover {
color: #333;
} .modal-product-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 1.5rem;
}
#modal-product-image {
width: 200px; 
height: 200px;
object-fit: cover;
border-radius: 6px; 
border: none;       
}
#modal-product-title {
margin: 0;
font-size: 1.5rem;
color: #1a3a6e;
} .modal-form h4 {
font-size: 1.5rem;
text-align: center;
color: #2980b9;
margin-top: 0;
margin-bottom: 1rem;
}
.modal-form .form-group {
margin-bottom: 1rem;
}
.modal-form input,
.modal-form select,
.modal-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; 
font-size: 1rem;
}
.modal-form textarea {
resize: vertical;
min-height: 100px;
}
.modal-form .form-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.modal-form button {
padding: 12px;
border: none;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: opacity 0.2s;
}
.modal-form button:hover {
opacity: 0.9;
}
.modal-form .btn-submit {
background-color: #0056b3;
color: white;
}
.modal-form .btn-whatsapp {
background-color: #25D366;
color: white;
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1.5rem;
padding-top: 1rem;
} .category-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: #333;
}
.category-item img {
width: 60px;
height: 60px;
margin-bottom: 0.5rem;
background-color: #f0f0f0;
border-radius: 8px;
}
.category-item h3 {
font-size: 0.9rem;
margin: 0;
font-weight: 500;
}  @media (max-width: 768px) {
.category-grid { max-height: 400px; overflow-y: auto; padding-right: 10px;
}
}
@media (min-width: 769px) { #categoriesModal .modal-content {
max-width: 800px; }
}  @media (max-width: 768px) { .modal-product-header {
flex-direction: column; } #modal-product-title {
text-align: center; font-size: 1.2rem; margin-top: 1rem; } .modal-form h4 {
font-size: 1.4rem;
}
}
.features-section .card {
position: relative;
border: 3px solid transparent;
border-radius: 16px;
padding: 25px;
background:
linear-gradient(white, white) padding-box,
linear-gradient(135deg, #105EA9, #E21B23) border-box;
overflow: hidden; } .features-section .card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16,94,169,0.25), transparent 70%),
radial-gradient(circle at 80% 80%, rgba(226,27,35,0.25), transparent 70%);
filter: blur(45px); z-index: 0;
} .features-section .card * {
position: relative;
z-index: 1;
} .datos_extra{ padding: 18px 18px 14px; border-radius: 16px; border: 1px solid rgba(17, 93, 169, 0.12); background: linear-gradient(
180deg,
rgba(17, 93, 169, 0.06),
rgba(255,255,255,0)
);
} .datos_extra h3{
margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; color: #0b2b4a; letter-spacing: 0.2px; } .datos_list{
list-style: none; padding: 0; margin: 0;  display: grid;
gap: 10px; } .dato_item{ display: flex;
gap: 12px;
align-items: center; padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(0,0,0,0.06);
background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,0.04); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
} .dato_item:hover{
transform: translateY(-1px);
border-color: rgba(17, 93, 169, 0.20);
box-shadow: 0 10px 20px rgba(0,0,0,0.06);
} .dato_icon{ width: 42px;
height: 42px; display: inline-flex;
align-items: center;
justify-content: center; border-radius: 12px; background: rgba(17, 93, 169, 0.10);
color: #115da9; flex: 0 0 42px;
} .dato_text{ display: grid;
gap: 2px;
} .dato_label{
font-size: 0.78rem;
color: rgba(17, 20, 30, 0.62);
font-weight: 700;
letter-spacing: 0.2px;
} .dato_value{
font-size: 0.98rem;
color: #0b2b4a;
font-weight: 700;
text-decoration: none; } a.dato_value:hover{
text-decoration: underline;
text-underline-offset: 3px;
} .datos_actions{ display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; margin-top: 14px;
} .datos_btn{ display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; padding: 11px 12px;
border-radius: 12px; border: 1px solid rgba(17, 93, 169, 0.18);
background: #fff; color: #115da9;
font-weight: 800;
text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
} .datos_btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0,0,0,0.06);
} .datos_btn--primary{
background: #115da9;
color: #fff;
border-color: transparent;
} .datos_btn--primary:hover{
background: #0d4a8d;
} @media (max-width: 480px){ .datos_actions{
grid-template-columns: 1fr;
}
}
.center-content { display: flex !important; }
.btn-movil { display: inline-flex !important; } .btn-prim {
background-color: #105EA9;
color: #fff !important;
padding: 10px 20px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
box-shadow: 0 8px 20px rgba(2,8,23,.06);
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-prim:hover {
transform: translateY(-1px);
background-color: #E21B23;
box-shadow: 0 10px 24px rgba(2,8,23,.12);
} .btn-catal{
margin-top: 0;
margin-bottom: 10px;
background: transparent !important;
border: 2px solid #5aa0ff !important;
}
.btn-catal:hover{
background: #5aa0ff !important;
border: 2px solid #5aa0ff !important;
}
#openCategoriesMod {
padding: 14px 34px;
display: inline-block;
border-radius: 50px;
background: linear-gradient(90deg, #399af5, #fd6464);
background-size: 200% auto;
color: #fff;
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: 0.4s ease;
}
#openCategoriesMod:hover {
background-position: right center;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18);
}
#openCategoriesMod:active {
transform: scale(0.96);
}