/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ================================
PALETA BLANCO + GRIS + ROJO
================================ */
:root{
    --rojo:#35a4e5;
    --rojo-hover:#52e5ff;
    --rojo-suave:#ffe5e4;

    --blanco:#ffffff;
    --gris-claro:#f5f6f8;
    --gris-medio:#e0e3e7;
    --gris-oscuro:#6b7280;

    --texto:#1f2937;
}

/* BODY LIMPIO */
body{
    font-family: 'SF Pro Display', Arial, sans-serif;
    color: var(--texto);
    background: var(--gris-claro);
}

/* CAPA 1: IMAGEN (opcional, más suave) */
body::before{
    content:"";
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background: url('../img/bg1.jpg') center/cover no-repeat;
    opacity: 0.08;

    z-index:-2;
}

/* CAPA 2: OVERLAY CLARO */
body::after{
    content:"";
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.9),
        rgba(245,246,248,0.95)
    );

    backdrop-filter: blur(2px);

    z-index:-1;
}
/* ================================
HERO COMPLETO
================================ */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ================================
SLIDER
================================ */
.slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* ================================
OVERLAY AZUL (ENCIMA DEL SLIDER)
================================ */
.overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0, 51, 102, 0.37),
    rgba(0, 102, 204, 0.315),
    rgba(0, 153, 255, 0.267)
  );

  z-index: 1;
}

/* ================================
CONTENIDO
================================ */
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 600px;
  margin-left: 80px;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 30px;
}

/* ================================
BOTÓN AZUL PRO
================================ */
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 28px;
  background: #25D366;
  color: #fff;

  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;

  transition: all 0.3s ease;
}

.hero-btn:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}
/* ================================
PRODUCTOS
================================ */
/* ================================
PRODUCTOS
================================ */
.productos{
    padding: 60px 40px;
    text-align: center;
    background: var(--blanco);
}

/* TITULO */
.productos h2{
    font-size: 36px;
    margin-bottom: 10px;

    background: linear-gradient(
        90deg,
        #111,
        #666,
        var(--rojo)
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* GRID */
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 30px;
}

/* ================================
CARD
================================ */
.card{
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;

    background: var(--blanco);
    color: var(--texto);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.06),
        0 2px 6px rgba(0,0,0,0.04);

    border: 1px solid var(--gris-medio);

    transition: 0.35s ease;

    transform: translateY(20px);
    opacity: 0;
    animation: fadeUp 0.8s forwards;
}

/* HOVER */
.card:hover{
    transform: translateY(-6px) scale(1.01);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        0 4px 10px rgba(0,0,0,0.06);

    border: 1px solid rgba(229,57,53,0.2);
}

/* EFECTO BRILLO */
.card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(229,57,53,0.08),
        transparent
    );

    opacity:0;
    transition:0.4s;
}

.card:hover::after{
    opacity:1;
}

/* ANIMACION */
.card:nth-child(1){ animation-delay:0.1s; }
.card:nth-child(2){ animation-delay:0.3s; }
.card:nth-child(3){ animation-delay:0.5s; }

@keyframes fadeUp{
    to{
        transform: translateY(0);
        opacity:1;
    }
}

/* ================================
IMAGEN
================================ */
.card-img{
    position: relative;
    overflow: hidden;
    height: 200px;
}

.card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
}

/* OVERLAY ROJO SUAVE */
.card-img .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        rgba(255,255,255,0),
        rgba(229,57,53,0.25)
    );

    opacity: 0;
    transition: 0.4s;
}

/* HOVER IMG */
.card:hover .card-img img{
    transform: scale(1.05);
}

.card:hover .card-img .overlay{
    opacity: 1;
}

/* ================================
CONTENIDO
================================ */
/* ================================
CONTENIDO CARD
================================ */
.card-content{
    padding: 20px;
}

/* TITULO */
.card h3{
    margin-bottom: 8px;
    color: var(--texto);
    font-weight: 600;
    transition: 0.3s;
}

/* HOVER TITULO */
.card:hover h3{
    color: var(--rojo);
}

/* TEXTO */
.card p{
    font-size: 14px;
    color: var(--gris-oscuro);
    line-height: 1.6;
}

/* ================================
BOTÓN "VER MÁS"
================================ */
.ver-mas{
    display:inline-block;
    margin-top:10px;
    font-size:13px;

    color: var(--rojo);

    opacity:0;
    transform:translateY(10px);
    transition:0.3s ease;
}

/* ================================
HOVER CARD
================================ */
.card:hover{
    transform:translateY(-8px) scale(1.02);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        0 4px 12px rgba(0,0,0,0.06),
        0 0 0 1px rgba(229,57,53,0.15);
}

/* ZOOM IMG */
.card:hover img{
    transform:scale(1.05);
}

/* OVERLAY ACTIVO */
.card:hover .overlay{
    opacity:1;
}

/* TEXTO ANIMADO */
.card:hover .ver-mas{
    opacity:1;
    transform:translateY(0);
}

/* ================================
BRILLO ELEGANTE (NO METÁLICO)
================================ */
.card::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );

    transition:0.6s;
}

.card:hover::before{
    left:100%;
}
/* ================================
ABOUT
================================ */

/* ================================
ABOUT MODERNO
================================ */
/* ================================
CONTACT
================================ */
/* ================================
CONTACT
================================ */
.contact{
    padding:80px 40px;
    text-align:center;
    background: var(--blanco);
}

/* TITULO */
.contact h2{
    font-size:36px;
    margin-bottom:10px;

    background: linear-gradient(
        90deg,
        #111,
        #666,
        var(--rojo)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SUBTITLE */
.contact .subtitle{
    margin-bottom:30px;
    color: var(--gris-oscuro);
}

/* INFO */
.contact-info{
    margin-bottom:30px;
    line-height:1.8;
    font-size:15px;
    color: var(--texto);
}

/* ================================
BOTÓN ROJO PREMIUM
================================ */
.btn{
    display:inline-block;
    padding:14px 28px;

    background: linear-gradient(
        135deg,
        var(--rojo),
        var(--rojo-hover)
    );

    color:#fff;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;

    transition:0.3s ease;

    box-shadow:
        0 6px 18px rgba(229,57,53,0.25);
}

/* HOVER */
.btn:hover{
    transform: translateY(-2px) scale(1.03);

    box-shadow:
        0 12px 28px rgba(229,57,53,0.35);
}

/* CLICK EFECTO */
.btn:active{
    transform: scale(0.98);
}
/* ================================
SLIDER
================================ */
.slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* SLIDES */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    opacity: 0;
    transform: scale(1.1);

    transition: opacity 1.2s ease, transform 6s ease;
}

/* ACTIVO */
.slide.active {
    opacity: 1;
    transform: scale(1);
}

/* OPCIONAL: CAPA SUAVE PARA CLARIDAD */
.slide::after{
    content:"";
    position:absolute;
    inset:0;

}

/* ================================
LOGO
================================ */
.logo img {
    height: 90px;
    object-fit: contain;

    transition: 0.3s ease;
}

/* HOVER LOGO */
.logo img:hover{
    transform: scale(1.05);
}
/* ================================
WHATSAPP FLOAT
================================ */
.whatsapp-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;

    width: 60px;
    height: 60px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.12),
        0 2px 6px rgba(0,0,0,0.08);

    border: 1px solid var(--gris-medio);

    z-index: 100;
    transition: all 0.3s ease;
}

/* ICONO */
.whatsapp-btn img {
    width: 32px;
    height: 32px;
}

/* HOVER */
.whatsapp-btn:hover {
    transform: scale(1.08);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.18),
        0 4px 10px rgba(0,0,0,0.1);

    border: 1px solid rgba(229,57,53,0.25);
}


/* ================================
MENU
================================ */
/* ===== MENU PRINCIPAL ===== */
.menu {
    display: flex;
    align-items: center;
    list-style: none;

    gap: 10px; /* más control que margin suelto */
    margin: 0;
    padding: 0;
}

/* LINKS */
.menu a {
    display: flex;
    align-items: center;

    color: var(--gris-oscuro);
    text-decoration: none;

    padding: 8px 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;

    position: relative;

    transition: all 0.2s ease;
}

/* ESPACIADO ENTRE ITEMS */
.menu li:not(:first-child) a {
    margin-left: 30px;
}

/* HOVER */
.menu a:hover {
    color: var(--rojo);
    transform: translateY(-1px);
}

/* LÍNEA MÁS FINA Y CENTRADA */
.menu a::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: -6px;

    width: 0%;
    height: 2px;

    background: var(--rojo);
    border-radius: 2px;

    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.menu a:hover::after {
    width: 100%;
}

/* LINK ACTIVO */
.menu a.active {
    color: var(--rojo);
}

.menu a.active::after {
    width: 100%;
}

/* ===== ICONOS MENU ===== */
.menu img {
    height: 36px;
    object-fit: contain;

    transition: transform 0.25s ease, filter 0.25s ease;
}

/* HOVER ICONOS MÁS FINO */
.menu a:hover img {
    transform: scale(1.08);
    filter: brightness(1.05);
}
@media (max-width: 768px) {
  .menu {
    display: none;
  }
}
/* ================================
PROCESOS
================================ */

/* ================================
PROCESOS MODERNO
================================ */
/* ================================
PROCESOS
================================ */
.procesos{
    text-align:center;
}

/* TITULO */
.procesos h2 {
    font-size:36px;
    margin-bottom:10px;

    background: linear-gradient(
        90deg,
        #111,
        #666,
        var(--rojo)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.procesos .sub{
    color: var(--gris-oscuro);
    margin-bottom:60px;
}

/* GRID */
.proceso-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:30px;
    max-width:1100px;
    margin:auto;
}

/* CARD */
.proceso-card{
    position:relative;
    background: linear-gradient(
        145deg,
        #ffffff,
        #f5f6f8,
        #e9ecef
    );
    padding:30px;
    border-radius:20px;
    text-align:left;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.7);

    border:1px solid var(--gris-medio);

    transition:0.4s;
}

/* NUMERO GRANDE */
.proceso-card .numero{
    position:absolute;
    top:20px;
    margin-left: 150px !important;

    font-size:40px;
    font-weight:700;

    color: rgba(255, 255, 255, 0.58);
}

/* TITULO */
.proceso-card h3{
    margin-bottom:10px;
    color: var(--texto);
    transition:0.3s;
}

/* TEXTO */
.proceso-card p{
    font-size:14px;
    color: var(--gris-oscuro);
    line-height:1.6;
}

/* HOVER */
.proceso-card:hover{
    transform:translateY(-10px) scale(1.03);

    box-shadow:
        0 25px 50px rgba(0,0,0,0.12),
        0 0 20px rgba(229,57,53,0.15);
}

/* TITULO HOVER */
.proceso-card:hover h3{
    color: var(--rojo);
}


.proceso-card:hover::before{
    left:100%;
}

/* NÚMERO (COBRE PRO) */


/* ================================
MATERIALES
================================ */
/* ================================
MATERIALES - LAYOUT EDITORIAL
================================ */

/* TITULO */
.materiales h2{
    font-size:36px;
    margin-bottom:10px;
text-align: center;
    background: linear-gradient(
        90deg,
        #222,
        #777,
        var(--rojo)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.materiales .sub{
    text-align:center;
    color:#777;
    margin-bottom:60px;
}

/* LAYOUT */
.materiales-layout{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:40px;
    max-width:1100px;
    margin:auto;
}

/* ================================
FEATURE GRANDE
================================ */
.material-feature{
    position:relative;
    border-radius:25px;
    overflow:hidden;
    height:400px;
}

/* IMAGEN (más clara) */
.material-feature img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter: brightness(1.1) contrast(1.05);
}

/* OVERLAY CLARO */
.material-feature .info{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:30px;
background: linear-gradient(
    rgba(255,255,255,0),
    rgba(0,0,0,0.55)
);

    color:#ffffff;
}

.material-feature h3{
    font-size:24px;
    margin:10px 0;
    color:#ffffff;
}

.material-feature p{
    color:#ecd4d4;
}

/* TAG */
.tag{
    background:var(--rojo);
    color:#fff;

    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

/* ================================
LISTA LATERAL
================================ */
.material-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ROW */
.material-row{
    display:flex;
    gap:15px;
    align-items:center;

    background:#ffffff;
    padding:15px;
    border-radius:15px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 6px 15px rgba(0,0,0,0.05);

    transition:0.3s;
}

/* IMAGEN */
.material-row img{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:10px;
}

/* TEXTO */
.material-row h3{
    color:#222;
    margin-bottom:5px;
    transition:0.3s;
}

.material-row p{
    font-size:13px;
    color:#666;
}

/* HOVER */
.material-row:hover{
    transform:translateX(5px);

    box-shadow:
        0 10px 20px rgba(0,0,0,0.08);

    border:1px solid rgba(229,57,53,0.25);
}

/* HOVER TITULO */
.material-row:hover h3{
    color:var(--rojo);
}

/* RESPONSIVE */
@media(max-width:768px){
    .materiales-layout{
        grid-template-columns:1fr;
    }

    .material-feature{
        height:300px;
    }
}
/* ================================
DROPDOWN CLARO METÁLICO
================================ */
/* CONTENEDOR PADRE */

/* ================================
PROCESOS
================================ */
.procesos{
    padding:80px 40px;
    text-align:center;
}


.procesos .sub{
    opacity:0.6;
    margin-bottom:50px;
    color:#555;
}

/* TIMELINE */
.proceso-timeline{
    position:relative;
    max-width:900px;
    margin:auto;
}

/* línea vertical */
.proceso-timeline::before{
    content:"";
    position:absolute;
    left:20px;
    top:0;
    width:3px;
    height:100%;

    background: linear-gradient(
        to bottom,
        #dfe6ee,
        #bfc9d4
    );
}

/* ITEM */
.proceso-item{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:40px;
    text-align:left;
}

/* NÚMERO (COBRE PRO) */
.numero{
    min-width:40px;
    height:40px;

    background: linear-gradient(135deg, var(--cobre), var(--cobre-suave));
    color:#fff;

    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;

    box-shadow:0 5px 15px rgba(255,106,0,0.3);

    z-index:2;
    transition:0.3s;
}

/* CONTENIDO */
.contenido h3{
    margin-bottom:5px;
    font-size:18px;
    color:#111;
}

.contenido p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* HOVER */
.proceso-item:hover .numero{
    transform:scale(1.15);
    box-shadow:0 10px 25px rgba(255,106,0,0.5);
}

/* RESPONSIVE */
@media(max-width:768px){
    .proceso-timeline::before{
        left:10px;
    }
}

/* ================================
TESTIMONIOS (CLARO)
================================ */

/* ================================
TESTIMONIOS PREMIUM
================================ */
.testimonios{
    padding:30px 40px;
    text-align:center;
    background: var(--blanco);
}

/* TITULO */
.testimonios h2{
    font-size:36px;
    margin-bottom:10px;

    background: linear-gradient(
        90deg,
        #222,
        #777,
        var(--rojo)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.testimonios .sub{
    color:#777;
    margin-bottom:60px;
}

/* LAYOUT */
.testimonios-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    max-width:1100px;
    margin:auto;
}

/* ================================
MAIN TESTIMONIO (GRANDE)
================================ */
.testimonio-main{
    background: linear-gradient(
        145deg,
        #ffffff,
        #f5f6f8,
        #e9ecef
    );

    padding:40px;
    border-radius:25px;
    text-align:left;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.7);

    position:relative;

    border:1px solid var(--gris-medio);
}

/* COMILLAS GRANDES */
.testimonio-main::before{
    content:"“";
    position:absolute;
    top:10px;
    left:20px;
    font-size:80px;
    color:rgba(0,0,0,0.05);
}

/* TEXTO */
.quote{
    font-size:18px;
    line-height:1.6;
    color:#333;
    margin-bottom:30px;
}

/* CLIENTE */
.cliente{
    display:flex;
    align-items:center;
    gap:15px;
}

.cliente img{
    width:55px;
    height:55px;
    border-radius:50%;
}

.cliente h3{
    color: var(--texto);
    transition:0.3s;
}

.cliente span{
    font-size:13px;
    color:#777;
}

/* ================================
LADO DERECHO
================================ */
.testimonios-side{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* MINI */
.testimonio-mini{
    background:#ffffff;
    padding:20px;
    border-radius:15px;
    text-align:left;

    border:1px solid var(--gris-medio);

    box-shadow:
        0 6px 15px rgba(0,0,0,0.05);

    transition:0.3s;
}

.testimonio-mini p{
    font-size:14px;
    color:#555;
    margin-bottom:10px;
}

.testimonio-mini span{
    font-size:12px;
    color:var(--rojo);
}

/* HOVER */
.testimonio-mini:hover{
    transform:translateY(-5px);

    box-shadow:
        0 12px 25px rgba(0,0,0,0.08);

    border:1px solid rgba(229,57,53,0.25);
}

/* HOVER NOMBRE CLIENTE */
.testimonio-main:hover .cliente h3{
    color: var(--rojo);
}

/* RESPONSIVE */
@media(max-width:768px){
    .testimonios-layout{
        grid-template-columns:1fr;
    }
}
/* ================================
SECTORES
================================ */

/* ================================
SECTORES MOSAICO PRO
================================ */
.sectores{
    text-align:center;
}

/* TITULO */
.sectores h2{
    font-size:36px;
    margin-bottom:10px;

    background: linear-gradient(
        90deg,
        #222,
        #777,
        var(--rojo)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sectores .sub{
    color:#777;
    margin-bottom:60px;
}

/* GRID MASONRY */
.sectores-masonry{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:200px;
    gap:20px;
    max-width:1200px;
    margin:auto;
}

/* ITEMS */
.sector{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
}

/* TAMAÑOS */
.sector.big{
    grid-row:span 2;
}

.sector.wide{
    grid-column:span 2;
}

/* IMG */
.sector img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.6s ease;

    /* 🔥 ligera mejora visual */
    filter: brightness(1.05) contrast(1.05);
}

/* OVERLAY (CLAVE: oscuro suave para contraste) */
.sector .info{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:20px;

    background: linear-gradient(
        rgba(255,255,255,0),
        rgba(0,0,0,0.6)
    );

    color:#fff;
}

/* TITULO */
.sector h3{
    font-size:16px;
    color:#fff;
}

/* TEXTO */
.sector p{
    font-size:13px;
    color:rgba(255,255,255,0.85);
}

/* HOVER IMG */
.sector:hover img{
    transform:scale(1.1);
}

/* HOVER CARD */
.sector:hover{
    transform:scale(1.02);
}

/* RESPONSIVE */
@media(max-width:768px){
    .sectores-masonry{
        grid-template-columns:repeat(2, 1fr);
        grid-auto-rows:150px;
    }
}
/* ================================
DIFERENCIALES
================================ */

/* ================================
CARD
================================ */
.dif-card{
    position:relative;
    display:flex;
    gap:20px;
    padding:25px 25px 25px 60px;

    border-radius:15px;

    background:#ffffff;
    backdrop-filter: blur(6px);

    border:1px solid var(--gris-medio);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.05);

    transition:0.3s;
}

/* LINEA IZQUIERDA */
.dif-card::before{
    content:"";
    position:absolute;
    left:20px;
    top:20px;
    bottom:20px;
    width:3px;

    background: linear-gradient(
        var(--rojo),
        var(--rojo-hover)
    );

    border-radius:5px;
}

/* NUMERO */
.numero{
    position:absolute;
    left:10px;
    top:15px;

    font-size:12px;
    font-weight:600;
    color:#fff;

    background: var(--rojo);
    padding:4px 8px;
    border-radius:10px;
}

/* CONTENIDO */
.dif-content h3{
    color: var(--texto);
    transition:0.3s;
}

.dif-content p{
    color:#666;
}

/* HOVER */
.dif-card:hover{
    transform:translateX(6px);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.08);

    border:1px solid rgba(229,57,53,0.25);
}

/* BORDE IZQUIERDO DINÁMICO */
.dif-card:hover::before{
    background: linear-gradient(
        var(--rojo),
        var(--rojo-hover)
    );
}

/* TITULO EN HOVER */
.dif-card:hover .dif-content h3{
    color: var(--rojo);
}

/* RESPONSIVE */
@media(max-width:768px){
    .diferenciales-grid{
        grid-template-columns:1fr;
    }
}


/* ================================
CATALOGO (CLARO METAL)
================================ */
/* ================================
CATALOGO PRO
================================ */
.catalogo{
    padding:100px 40px;
}

/* CONTENEDOR */
.catalogo-box{
    position:relative;
    max-width:1100px;
    margin:auto;
    border-radius:25px;
    overflow:hidden;
}

/* IMAGEN */
.catalogo-img{
    height:400px;
}

.catalogo-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* OVERLAY (ajustado para claro + contraste correcto) */
.catalogo-box::before{
    content:"";
    position:absolute;
    inset:0;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.729),
        rgba(255, 255, 255, 0.168),
        transparent
    );
}

/* CONTENIDO */
.catalogo-info{
    position:absolute;
    top:50%;
    left:60px;
    transform:translateY(-50%);
    max-width:450px;

    color:#111;
}

/* TAG */
.tag{
    display:inline-block;
    margin-bottom:10px;
    background:var(--rojo);
    color:#ff0000 !important;

    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
}

/* TITULO */
.catalogo-info h2{
    font-size:32px;
    margin-bottom:10px;
    color:#111;
}

/* TEXTO */
.catalogo-info p{
    color:#000000;
    margin-bottom:20px;
}

/* BADGES */
.badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.badges span{
    background:#f1f3f5;
    color:#444;

    padding:6px 12px;
    border-radius:20px;
    font-size:12px;

    border:1px solid #e5e7eb;
}

/* BOTON */
.catalogo-info .btn{
    background: linear-gradient(
        135deg,
        var(--rojo),
        var(--rojo-hover)
    );
    color:#fff;
}

/* RESPONSIVE */
@media(max-width:768px){
    .catalogo-info{
        left:20px;
        right:20px;
        max-width:100%;
    }

    .catalogo-img{
        height:300px;
    }
}

/* BENEFICIOS */
.beneficios{
    margin-bottom:25px;
}

.beneficios li{
    margin-bottom:8px;
    font-size:14px;
    color:#444;
}

/* IMAGEN */
.catalogo-img{
    flex:1;
}

.catalogo-img img{
    width:100%;
    border-radius:20px;

    box-shadow:
        10px 10px 25px rgba(0,0,0,0.1),
        -5px -5px 15px rgba(255,255,255,0.9);
}

/* BOTÓN */
.btn{
    display:inline-block;
    padding:14px 28px;

    background: linear-gradient(
        135deg,
        var(--rojo),
        var(--rojo-hover)
    );
    color:#fff;

    border-radius:30px;
    text-decoration:none;
    font-weight:600;

    transition:0.3s;
    box-shadow:0 5px 15px rgba(229,57,53,0.25);
}

.btn:hover{
    transform:scale(1.05);
    box-shadow:0 10px 25px rgba(229,57,53,0.35);
}

/* RESPONSIVE */
@media(max-width:768px){
    .catalogo-content{
        flex-direction:column;
        text-align:center;
    }
}
/* ================================
CTA (CLARO PREMIUM + ROJO)
================================ */

/* ================================
BLOG
================================ */


/* ================================
CONTACTO + MAPA
================================ */
/* ================================
CONTACTO PRO
================================ */


/* ================================
FOOTER PRO
================================ */
.footer{
    background: linear-gradient(
        145deg,
        #ffffff,
        #f5f6f8,
        #eef1f5
    );

    padding:60px 40px 20px;
    color:#666;

    border-top:1px solid var(--gris-medio);
}

/* CONTENEDOR */
.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:40px;
    max-width:1100px;
    margin:auto;
}

/* COLUMNAS */
.footer-col h3,
.footer-col h4{
    color:#222;
    margin-bottom:15px;
}

/* LOGO */
.footer .logo{
    letter-spacing:2px;
    background: linear-gradient(
        90deg,
        #222,
        #777,
        var(--rojo)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TEXTOS */
.footer-col p{
    font-size:14px;
    line-height:1.6;
    margin-bottom:10px;
    color:#666;
}

/* LINKS */
.footer-col a{
    display:block;
    margin-bottom:10px;
    text-decoration:none;
    color:#666;
    transition:0.3s;
}

/* HOVER */
.footer-col a:hover{
    color: var(--rojo);
    transform:translateX(5px);
}

/* LINEA */
.footer-bottom{
    text-align:center;
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid var(--gris-medio);
}

.footer-bottom p{
    font-size:13px;
    color:#777;
}

.footer-bottom a{
    color: var(--rojo);
    text-decoration: none;
}

.footer-bottom a:hover{
    text-decoration: underline;
}


.footer-col a{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:10px;
    text-decoration:none;
    color:#666;

    transition:0.3s;
}

.footer-col a i{
    font-size:16px;
    color: var(--rojo);
}

.footer-col a:hover{
    color: var(--rojo);
    transform: translateX(5px);
}