/* =========================================================
   SUMO SISTEMAS — ESTILOS PRINCIPALES
   ---------------------------------------------------------
   1. Variables
   2. Base
   3. Utilidades y botones
   4. Navbar
   5. Hero / cabeceras
   6. Secciones comunes
   7. Inicio
   8. Sobre mí & servicios
   9. Portfolio
   10. Clientes
   11. Contacto
   12. CTA y footer
   13. WhatsApp flotante
   14. Responsive
   ========================================================= */

/* ---------- 1. Variables ---------- */
:root {
    --sumo-red: #C80000;
    --sumo-red-dark: #9a0000;
    --sumo-black: #0b0b0f;
    --sumo-bg: #F5F5F5;
    --sumo-text: #222;
    --sumo-muted: #6c6c75;
    --sumo-radius: 16px;
    --sumo-shadow: 0 10px 30px rgba(0,0,0,.08);
    --sumo-shadow-hover: 0 18px 40px rgba(0,0,0,.16);
    --nav-h: 84px;
    --ease: cubic-bezier(.2,.8,.2,1);
    --font-body: 'Exo 2', sans-serif;
    --font-title: 'Press Start 2P', monospace;   /* tipografía pixel para todos los títulos */
}

/* ---------- 2. Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
    font-family: var(--font-body);
    background: var(--sumo-bg);
    color: var(--sumo-text);
    padding-top: var(--nav-h);
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* Títulos: Press Start 2P. Es una fuente muy ancha, por eso
   los tamaños son menores y el interlineado más amplio. */
h1, h2, h3, h4, h5, h6,
.section-title, .page-hero h1, .kicker {
    font-family: var(--font-title);
    font-weight: 400 !important;
    line-height: 1.6;
    letter-spacing: 1px !important;
}

/* ---------- 3. Utilidades y botones ---------- */
.bg-space {
    color: #EEE;
    background: #000 url(../img/bk.png) center / cover fixed;
}
.bg-light-soft { background: #fff; }
.kicker {
    display: inline-block;
    color: var(--sumo-red);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: .7rem;
    margin-bottom: .8rem;
}
.btn-sumo {
    background: var(--sumo-red);
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    border-radius: 50px;
    padding: .7rem 1.6rem;
    transition: transform .3s var(--ease), background .3s, box-shadow .3s;
}
.btn-sumo:hover, .btn-sumo:focus { background: var(--sumo-red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,0,0,.35); }
.btn-outline-light { border-radius: 50px; padding: .7rem 1.6rem; }
.link-sumo { color: var(--sumo-red); font-weight: 600; letter-spacing: 1px; }
.link-sumo:hover { color: var(--sumo-red-dark); }
.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .9rem; border-radius: 50px;
    background: #fff; box-shadow: var(--sumo-shadow); font-size: .9rem;
}
.chip i { color: var(--sumo-red); }

/* ---------- 4. Navbar ---------- */
.sumo-nav {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    min-height: var(--nav-h);
    transition: min-height .3s, box-shadow .3s;
}
.sumo-nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); min-height: 66px; }
.sumo-logo { height: 54px; width: auto; transition: height .3s; }
.sumo-nav.scrolled .sumo-logo { height: 42px; }
.sumo-nav .nav-link {
    position: relative;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: .85rem;
    color: #333;
    margin: 0 .35rem;
}
.sumo-nav .nav-link::after {
    content: ''; position: absolute; left: .5rem; right: .5rem; bottom: 2px;
    height: 3px; background: var(--sumo-red);
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.sumo-nav .nav-link:hover::after, .sumo-nav .nav-link.active::after { transform: scaleX(1); }
.sumo-nav .nav-link.active, .sumo-nav .nav-link:hover { color: var(--sumo-red); }
.sumo-nav .dropdown-menu { border: none; border-radius: 12px; box-shadow: var(--sumo-shadow-hover); padding: .5rem; }
.sumo-nav .dropdown-item { border-radius: 8px; padding: .55rem 1rem; font-weight: 500; }
.sumo-nav .dropdown-item:hover { background: rgba(200,0,0,.08); color: var(--sumo-red); }
.sumo-nav .dropdown-item i { color: var(--sumo-red); width: 18px; }
.nav-redes { display: flex; gap: .9rem; margin-left: 1rem; }
.nav-redes a { color: #555; font-size: 1.1rem; transition: color .3s, transform .3s; }
.nav-redes a:hover { color: var(--sumo-red); transform: translateY(-2px); }
.navbar-toggler { border: none; font-size: 1.5rem; color: var(--sumo-red); }
.navbar-toggler:focus { box-shadow: none; }

/* ---------- 5. Hero / cabeceras ---------- */
.home-hero .carousel-item img { max-width: 1292px; margin: 0 auto; }
.page-hero { padding: 5rem 0 4rem; position: relative; }
.page-hero h1 { text-transform: uppercase; font-size: clamp(1.3rem, 4vw, 2.3rem); }
.page-hero .lead { opacity: .85; }
.hero-line { display: block; width: 70px; height: 4px; background: var(--sumo-red); margin: 1.2rem auto 0; border-radius: 4px; }

/* Efectos de transición del carrusel (se eligen en config.php → $slidesEfecto).
   Todos parten de .carousel-fade y le suman una transformación. */
.fx-zoom .carousel-item, .fx-blur .carousel-item, .fx-slide-up .carousel-item {
    transition: opacity 1s ease, transform 1s ease, filter 1s ease !important;
}
/* Zoom: la nueva entra achicándose y la saliente se aleja */
.fx-zoom .carousel-item { transform: scale(1.15); }
.fx-zoom .carousel-item.active,
.fx-zoom .carousel-item-next.carousel-item-start,
.fx-zoom .carousel-item-prev.carousel-item-end { transform: scale(1); }
.fx-zoom .active.carousel-item-start,
.fx-zoom .active.carousel-item-end { transform: scale(.9); }
/* Blur: desenfoque cruzado */
.fx-blur .carousel-item { filter: blur(14px); }
.fx-blur .carousel-item.active,
.fx-blur .carousel-item-next.carousel-item-start,
.fx-blur .carousel-item-prev.carousel-item-end { filter: blur(0); }
.fx-blur .active.carousel-item-start,
.fx-blur .active.carousel-item-end { filter: blur(14px); }
/* Slide-up: la nueva sube desde abajo */
.fx-slide-up .carousel-item { transform: translateY(40px); }
.fx-slide-up .carousel-item.active,
.fx-slide-up .carousel-item-next.carousel-item-start,
.fx-slide-up .carousel-item-prev.carousel-item-end { transform: translateY(0); }
.fx-slide-up .active.carousel-item-start,
.fx-slide-up .active.carousel-item-end { transform: translateY(-40px); }
.home-hero .carousel { overflow: hidden; }

/* ---------- 6. Secciones comunes ---------- */
.section { padding: 5rem 0; }
.section-title {
    font-weight: 800; letter-spacing: 4px; text-transform: uppercase;
    font-size: clamp(1rem, 2.4vw, 1.5rem); text-align: center; margin-bottom: 3rem;
}
.section-title.text-start { margin-bottom: 1.2rem; }
.section-title::after {
    content: ''; display: block; width: 50px; height: 4px; background: var(--sumo-red);
    margin: .8rem auto 0; border-radius: 4px;
}
.section-title.text-start::after { margin-left: 0; }

/* Avatar circular */
.avatar { border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: var(--sumo-shadow-hover); }
.avatar-lg { width: 240px; height: 240px; }
.avatar-xl { width: min(360px, 80vw); height: min(360px, 80vw); }

/* ---------- 7. Inicio ---------- */
.service-mini {
    display: block; text-align: center; padding: 2rem 1rem; height: 100%;
    background: var(--sumo-bg); border-radius: var(--sumo-radius);
    transition: transform .4s var(--ease), box-shadow .4s;
}
.service-mini img { height: 110px; margin-bottom: 1rem; transition: transform .6s var(--ease); }
.service-mini h3 { font-size: .75rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.service-mini:hover { transform: translateY(-6px); box-shadow: var(--sumo-shadow-hover); }
.service-mini:hover img { transform: rotate(-8deg) scale(1.08); }

.cat-card {
    position: relative; display: flex; align-items: flex-end; min-height: 320px;
    border-radius: var(--sumo-radius); overflow: hidden;
    background-size: cover; background-position: top center;
    box-shadow: var(--sumo-shadow);
}
.cat-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.85));
    transition: background .4s;
}
.cat-card:hover::before { background: linear-gradient(180deg, rgba(200,0,0,.35), rgba(0,0,0,.9)); }
.cat-card-body { position: relative; color: #fff; padding: 2rem; }
.cat-card-body i { font-size: 1.8rem; color: var(--sumo-red); background: #fff; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1rem; }
.cat-card-body h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cat-card-body p { margin: 0; opacity: .85; }

/* Marquee de clientes */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track img { height: 70px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.marquee-track img:hover { filter: none; opacity: 1; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 8. Sobre mí & servicios ---------- */
.about-photo { position: relative; display: inline-block; }
.about-badge {
    position: absolute; right: 6%; bottom: 6%; width: 90px; height: 90px;
    background: #fff; border-radius: 50%; padding: 0; border: 5px solid #fff;   /* el SVG ya es el círculo rojo */
    box-shadow: var(--sumo-shadow-hover); animation: float 4s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-10px); } }
.service-card {
    display: flex; gap: 1.5rem; align-items: flex-start; height: 100%;
    background: var(--sumo-bg); border-radius: var(--sumo-radius); padding: 2rem;
    border-left: 4px solid transparent;
    transition: border-color .4s, transform .4s var(--ease), box-shadow .4s;
}
.service-card:hover { border-left-color: var(--sumo-red); transform: translateY(-4px); box-shadow: var(--sumo-shadow-hover); }
.service-icon { width: 100px; flex-shrink: 0; }
.service-card h3 { font-size: .85rem; margin-bottom: 1rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.service-card p { margin: 0; color: var(--sumo-muted); }

/* ---------- 9. Portfolio ---------- */
.portfolio-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 1.5rem; }
.portfolio-tabs a {
    padding: .65rem 1.4rem; border-radius: 50px; background: #fff; font-weight: 600;
    letter-spacing: 1px; box-shadow: var(--sumo-shadow); transition: all .3s;
}
.portfolio-tabs a:hover { color: var(--sumo-red); }
.portfolio-tabs a.active { background: var(--sumo-red); color: #fff; }

.work-card { position: relative; display: block; border-radius: var(--sumo-radius); overflow: hidden; box-shadow: var(--sumo-shadow); aspect-ratio: 1 / 1; background: #111; }
.work-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease), opacity .4s; }
.work-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; color: #fff; padding: 1rem;
    background: rgba(200,0,0,.85); opacity: 0; transition: opacity .4s;
}
.work-overlay h3 { font-size: .75rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; transform: translateY(15px); transition: transform .4s var(--ease); }
.work-overlay span { font-size: .85rem; }
.work-card:hover img { transform: scale(1.08); }
.work-card:hover .work-overlay { opacity: 1; }
.work-card:hover .work-overlay h3 { transform: none; }

.gallery-item { position: relative; display: block; border-radius: var(--sumo-radius); overflow: hidden; box-shadow: var(--sumo-shadow); }
.gallery-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-zoom { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: #fff; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .4s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:hover .gallery-zoom { opacity: 1; }

/* ---------- 10. Clientes ---------- */
.client-logo {
    background: #fff; border-radius: var(--sumo-radius); padding: 1rem; aspect-ratio: 1 / 1;
    display: grid; place-items: center; box-shadow: var(--sumo-shadow);
    transition: transform .4s var(--ease), box-shadow .4s;
}
.client-logo img { max-height: 100%; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.client-logo:hover { transform: translateY(-5px); box-shadow: var(--sumo-shadow-hover); }
.client-logo:hover img { filter: none; opacity: 1; }

/* ---------- 11. Contacto ---------- */
.contact-item {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; margin-bottom: .8rem;
    background: #fff; border-radius: var(--sumo-radius); box-shadow: var(--sumo-shadow);
    transition: transform .3s var(--ease);
}
.contact-item:hover { transform: translateX(6px); }
.contact-item i { font-size: 1.4rem; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sumo-red); color: #fff; flex-shrink: 0; }
.contact-item small { display: block; color: var(--sumo-muted); text-transform: uppercase; letter-spacing: 2px; font-size: .7rem; }
.social-big { display: flex; gap: .8rem; }
.social-big a { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--sumo-black); color: #fff; font-size: 1.2rem; transition: background .3s, transform .3s; }
.social-big a:hover { background: var(--sumo-red); transform: translateY(-3px); }
.contact-form { background: #fff; padding: 2rem; border-radius: var(--sumo-radius); box-shadow: var(--sumo-shadow); }
.contact-form .form-control:focus { border-color: var(--sumo-red); box-shadow: 0 0 0 .2rem rgba(200,0,0,.15); }

/* ---------- 12. CTA y footer ---------- */
.sumo-cta { padding: 5rem 0; }
.prefoot { height: 165px; background: url(../img/city.gif) repeat-x center bottom; margin-top: 50px; margin-bottom: -5px; }
.sumo-footer { background: #000; color: #ccc; padding: 2.5rem 0 1.5rem; }
.footer-logo { max-width: 240px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
.footer-links a { letter-spacing: 1.5px; text-transform: uppercase; font-size: .8rem; color: #fff; transition: color .3s; }
.footer-links a:hover { color: var(--sumo-red); }
.footer-redes { display: inline-flex; gap: 1rem; font-size: 1.2rem; }
.footer-redes a:hover { color: var(--sumo-red); }
.sumo-footer hr { border-color: #333; opacity: 1; }

/* ---------- 13. WhatsApp flotante ---------- */
.whats {
    position: fixed; right: 18px; bottom: 18px; z-index: 1050;
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    background: #25D366; color: #fff; font-size: 2rem; box-shadow: 0 8px 20px rgba(0,0,0,.25);
    animation: pulse-wa 2s infinite;
}
.whats:hover { color: #fff; transform: scale(1.08); }
@keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ---------- 14. Responsive ---------- */
@media (max-width: 991.98px) {
    :root { --nav-h: 70px; }
    .sumo-logo { height: 42px; }
    .sumo-nav .navbar-collapse { padding: 1rem 0; }
    .sumo-nav .nav-link::after { display: none; }
    .nav-redes { margin: 1rem 0 0 .5rem; }
}
@media (max-width: 767.98px) {
    .section { padding: 3.5rem 0; }
    .page-hero { padding: 3.5rem 0 3rem; }
    .service-card { flex-direction: column; align-items: center; text-align: center; }
    .section-title.text-start { text-align: center !important; }
    .section-title.text-start::after { margin-left: auto; }
    .kicker { display: block; text-align: center; }
    .bg-space { background-attachment: scroll; }
    .prefoot { height: 110px; background-size: auto 110px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}