/* ========================================================================== layout.css Top-bar + Header fijos, auto-hide on scroll, hero, grids Con acordeón “Servicios” móvil, z-index saneados + FIX carrusel (altura fija, sin desborde, flechas centradas) ========================================================================== */ /* ---------- Variables de altura y capas ---------- */ :root{ --topbar-h: 40px; /* se actualiza vía JS */ --header-h: 72px; /* se actualiza vía JS */ /* Capas (mayor = más arriba) */ --z-header: 1500; /* header fijo */ --z-topbar: 1600; /* top-bar sobre header */ --z-portal-panel: 1620; /* panel del acordeón (móvil) sobre topbar/header */ --z-nav-backdrop: 1650; /* backdrop del menú off-canvas */ --z-offcanvas: 1700; /* panel del menú off-canvas */ /* Alto del hero considerando cromos (topbar+header) */ --chrome-h: calc(var(--topbar-h) + var(--header-h)); --hero-h: calc(100vh - var(--chrome-h)); } /* Altos sugeridos por breakpoint para evitar “saltos” en móviles */ @media (max-width: 992px){ :root{ --hero-h: clamp(420px, 58vh, 640px); } } @media (max-width: 576px){ :root{ --hero-h: clamp(300px, 52vh, 520px); } } /* ---------- Scroll suave ---------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } } /* Compensa topbar+header al saltar a anclas */ section[id]{ scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 16px); } /* ========================================================================== */ /* TOP BAR (fijo; animable) */ /* ========================================================================== */ .top-bar{ position: fixed; inset: 0 0 auto 0; background: var(--primary-color); color: #fff; padding: .5rem 0; z-index: var(--z-topbar); will-change: transform; transition: transform .28s ease; } /* Desktop/Tablet: [izq] [portal] [redes]; portal a la derecha */ .top-bar .container{ display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; } .topbar-center{ grid-column: 2; justify-self: end; text-align: right; } .social-media{ grid-column: 3; justify-self: end; display: inline-flex; gap: .75rem; } .social-media a{ color:#fff; font-size:1rem; transition: color .3s ease; } .social-media a:hover{ color: var(--light-color); } /* Enlaces segmentados (desktop/tablet) */ .portal-links{ display:inline-flex; align-items:center; gap:0; line-height:1; } .portal-link{ position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .9rem; color:#fff; text-decoration:none; border:0; border-radius:0; background:transparent; font-size:.9rem; } .portal-link i{ font-size:.95em; } .portal-link + .portal-link{ padding-left:1rem; } .portal-link + .portal-link::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:1.2em; background:rgba(255,255,255,.45); } .portal-link:hover, .portal-link:focus-visible{ text-decoration: underline; outline: none; } /* ========================================================================== */ /* HEADER (fijo bajo topbar; animable) */ /* ========================================================================== */ header{ position: fixed !important; top: var(--topbar-h); left: 0; right: 0; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.1); z-index: var(--z-header); will-change: transform; transition: transform .28s ease; } header .container{ display:flex; justify-content:space-between; align-items:center; padding: 1rem 2rem; } /* Relleno para que el contenido no quede oculto */ body{ padding-top: calc(var(--topbar-h) + var(--header-h)); } /* Auto-ocultar en scroll (clase aplicada en por JS) */ body.chrome-hidden .top-bar{ transform: translateY(-100%); } body.chrome-hidden header{ transform: translateY(calc(-1 * (var(--topbar-h) + var(--header-h)))); } /* ========================================================================== */ /* NAV DESKTOP + OFF-CANVAS (base; el panel se define en responsive.css) */ /* ========================================================================== */ .site-nav{ display:flex; gap:1rem; align-items:center; } .nav-toggle{ display:none; } .nav-toggle{ background:transparent; border:0; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; border-radius:8px; } .nav-toggle:focus-visible{ outline:3px solid var(--primary-color); } .hamburger, .hamburger::before, .hamburger::after{ content:''; display:block; width:22px; height:2px; background:var(--dark-color); transition: transform .2s ease, opacity .2s ease; } .hamburger::before{ transform: translateY(-6px); } .hamburger::after{ transform: translateY( 6px); } .nav-toggle[aria-expanded="true"] .hamburger{ transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .hamburger::before{ opacity: 0; } .nav-toggle[aria-expanded="true"] .hamburger::after{ transform: rotate(-90deg); } .nav-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: var(--z-nav-backdrop); } .nav-backdrop[hidden]{ display:none; } /* ========================================================================== */ /* HERO / CARRUSEL (altura fija + sin desborde + flechas centradas) */ /* ========================================================================== */ #inicio{ position: relative; padding: 0; margin: 0; overflow: hidden; } #inicio .carousel{ position: relative; width: 100%; height: var(--hero-h); /* altura fija por breakpoint */ overflow: hidden; } #inicio .carousel-inner{ display:flex; height:100%; transition: transform .6s ease; will-change:transform; } #inicio .carousel-item{ flex:0 0 100%; height:100%; position:relative; } #inicio .carousel-item img{ width: 100%; height: 100%; object-fit: cover; /* llena el contenedor sin deformar (puede recortar) */ object-position: center; display: block; } /* Caption estable y adaptable */ #inicio .carousel-caption{ position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(12px, 8vh, 64px); color: #fff; text-align: center; background: rgba(0,0,0,.45); padding: clamp(.75rem, 2.2vw, 2rem); border-radius: 10px; max-width: min(92%, 920px); z-index: 25; } #inicio .carousel-caption h2{ margin: 0 0 .4rem; font-size: clamp(1.4rem, 3.4vw, 3rem); } #inicio .carousel-caption p{ margin: 0; font-size: clamp(.95rem, 2.2vw, 1.2rem); } /* Flechas centradas verticalmente y con área “tolerante” */ #inicio .carousel-control{ position: absolute; top: 0; bottom: 0; /* ocupa toda la altura del hero */ display: flex; align-items: center; justify-content: center; width: 48px; background: transparent; border: 0; color: #fff; cursor: pointer; z-index: 30; transition: background .2s ease; } #inicio .carousel-control.prev{ left: 0; } #inicio .carousel-control.next{ right: 0; } @media (hover:hover){ #inicio .carousel-control:hover{ background: linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0)); } #inicio .carousel-control.next:hover{ background: linear-gradient(to left, rgba(0,0,0,.18), rgba(0,0,0,0)); } } @media (max-width: 576px){ #inicio .carousel-control{ width: 40px; } #inicio .carousel-caption{ padding: .75rem 1rem; bottom: clamp(8px, 6vh, 28px); border-radius: 8px; } } /* ========================================================================== */ /* GRIDS REUTILIZABLES */ /* ========================================================================== */ .ciclos-container{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem; } .testimonios-container{ display:grid; grid-template-columns: repeat(2, 1fr); gap:4rem; } /* ========================================================================== */ /* WHATSAPP STICKY */ /* ========================================================================== */ .whatsapp-sticky{ position:fixed; bottom:2rem; right:2rem; background:#25d366; color:#fff; width:60px; height:60px; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:2rem; box-shadow:0 5px 15px rgba(0,0,0,.2); transition: transform .3s ease; z-index: 1100; } .whatsapp-sticky:hover{ transform: scale(1.1); } /* ========================================================================== */ /* PORTAL MÓVIL: Acordeón “Servicios” (botón y panel). Se muestra en media */ /* ========================================================================== */ .portal-acc{ display:none; } /* oculto en desktop/tablet */ /* Botón del acordeón: color del topbar, sin líneas, ancho 100% */ .portal-acc-btn{ width: 100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:#fff; background: var(--primary-color); border: 0; /* <- sin líneas grises */ border-radius: 0; padding: .55rem .75rem; line-height: 1.15; cursor: pointer; } .portal-acc-btn:hover{ background: color-mix(in oklab, var(--primary-color) 92%, white); } .portal-acc-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; } /* caret */ .acc-caret{ width: 12px; height: 12px; flex: 0 0 12px; background-repeat:no-repeat; background-size:12px 12px; transition: transform .2s ease, opacity .2s ease; opacity:.9; background-image: url("data:image/svg+xml;utf8,"); } .portal-acc[data-open="true"] .acc-caret{ transform: rotate(180deg); } /* Panel: fijo bajo topbar, ancho viewport; sobre header */ .portal-acc-panel{ position: fixed; left: 0; right: 0; top: var(--topbar-h); background: var(--primary-color); color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: var(--z-portal-panel); border-top: 1px solid rgba(255,255,255,.15); overflow: hidden; max-height: 0; transition: max-height .25s ease; } .portal-acc[data-open="true"] .portal-acc-panel{ max-height: 50vh; } .portal-acc-link{ display:flex; align-items:center; gap:.6rem; padding: .9rem 1rem; color:#fff; text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.12); } .portal-acc-link:last-child{ border-bottom: 0; } .portal-acc-link i{ width:1.25rem; text-align:center; } /* =========================================================== SOBRE NOSOTROS + POR QUÉ ELEGIRNOS =========================================================== */ .about { padding: 4.5rem 0; background: #fff; } .about-grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; } .about-text h2{ text-align:left; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 .75rem; } .about-text p{ font-size: 1.05rem; color: var(--dark-color); margin: 0 0 1rem; line-height: 1.6; } .about-bullets{ list-style: none; padding: 0; margin: .5rem 0 1.25rem; display: grid; gap: .5rem; } .about-bullets li{ display: flex; align-items: flex-start; gap: .55rem; } .about-bullets i{ color: var(--primary-color); margin-top: .2rem; } .about-cta{ display: inline-block; margin-top: .25rem; text-decoration: none; } .about-media{ position: relative; } .about-video{ position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.06); background: #000; } .about-video iframe, .about-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .about-badge{ position: absolute; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-weight: 600; font-size: .95rem; backdrop-filter: blur(2px); } .about-badge i{ color: #ffd166; } /* ---------- Por qué elegirnos ---------- */ .features{ padding: 4rem 0; background: var(--light-color); } .features h2{ margin-bottom: .35rem; } .features .subtitle{ max-width: 900px; margin-bottom: 2.2rem; } .features-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); } .feature{ background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 1.1rem 1rem; box-shadow: 0 10px 24px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; } .feature:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.09); } .feature-ico{ width: 56px; height: 56px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: color-mix(in oklab, var(--primary-color) 14%, white); color: var(--primary-color); margin-bottom: .65rem; font-size: 1.4rem; } .feature h3{ margin: 0 0 .35rem; font-size: 1.05rem; } .feature p{ margin: 0; color: var(--secondary-color); line-height: 1.5; } /* ---------- Responsive ---------- */ @media (max-width: 992px){ .about-grid{ grid-template-columns: 1fr; } .about-text h2{ text-align: center; } .about-text p{ text-align: center; } .about-bullets{ justify-items: center; } .about-cta{ display: block; width: max-content; margin: .5rem auto 0; } .features-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px){ .features-grid{ grid-template-columns: 1fr; } .feature{ text-align: left; } }