/* ============================================ QUO THEME - CSS principal Los colores/fuentes reales se inyectan como variables CSS desde inc/customizer.php (ver :root en el ). Acá abajo están los valores por defecto de respaldo. ============================================ */ :root{ --quo-primary: #1b3a5c; --quo-secondary: #2e6da4; --quo-bg: #f7f7f7; --quo-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --quo-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --quo-white: #ffffff; --quo-text: #555555; --quo-radius: 6px; } *, *::before, *::after{ box-sizing: border-box; } body{ margin:0; font-family: var(--quo-font-body); color: var(--quo-text); line-height:1.6; } h1,h2,h3,h4{ font-family: var(--quo-font-heading); color: var(--quo-primary); margin:0 0 .5em; } img{ max-width:100%; height:auto; display:block; } a{ color: var(--quo-secondary); } /* ---------- HEADER ---------- */ .site-header{ background: var(--quo-white); box-shadow: 0 1px 4px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 100; } .site-header__inner{ max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .custom-logo{ max-height: 60px; width: auto; } .site-title{ font-weight: 700; font-size: 1.3em; text-decoration: none; color: var(--quo-primary); } .site-nav__list{ list-style:none; display:flex; gap:24px; margin:0; padding:0; } .site-nav__list a{ text-decoration:none; color: var(--quo-primary); font-weight:600; text-transform: uppercase; font-size: .85em; letter-spacing: .03em; transition: color .15s ease; } .site-nav__list a:hover{ color: var(--quo-secondary); } .menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; } .menu-toggle span{ display:block; width:24px; height:2px; background:var(--quo-primary); margin:5px 0; } /* ---------- HERO ---------- */ .hero{ position: relative; overflow: hidden; height: 70vh; /* alto fijo real, no depende del contenido ni de la imagen */ min-height: 420px; max-height: 640px; } .hero__slides{ position: relative; width: 100%; height: 100%; } .hero__slide{ position:absolute; inset:0; /* SIEMPRE absoluto, activa o no -> nunca colapsa */ background: var(--quo-primary) center/cover no-repeat; display:flex; align-items:center; justify-content:center; text-align:center; opacity:0; visibility:hidden; transition: opacity .8s ease; padding: 40px 20px; z-index: 1; } .hero__slide.is-active{ opacity:1; visibility:visible; z-index:2; } .hero__slide::before{ content:''; position:absolute; inset:0; background: rgba(27,58,92,.55); } .hero__content{ position:relative; z-index:1; color: var(--quo-white); max-width:700px; } .hero__content h1{ color: var(--quo-white); font-size: clamp(1.6em, 4vw, 2.4em); } .hero__content h3{ color: var(--quo-white); font-weight: 400; opacity: .9; margin:0; } .hero__dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; } .hero__dot{ width:10px; height:10px; border-radius:50%; border:2px solid var(--quo-white); background:transparent; cursor:pointer; padding:0; } .hero__dot.is-active{ background: var(--quo-white); } /* ---------- ABOUT ---------- */ .about{ max-width: 900px; margin: 70px auto; padding: 0 24px; text-align:center; } .about__image{ margin: 0 auto 24px; } .about__text p{ margin: 0 0 1em; } /* ---------- SERVICIOS ---------- */ .services{ background: var(--quo-bg); padding: 60px 24px; } .services__grid{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } .service-card{ background: var(--quo-white); padding: 26px; border-radius: var(--quo-radius); border-left: 4px solid var(--quo-secondary); box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .15s ease; } .service-card:hover{ transform: translateY(-3px); } .service-card__icon img{ width:48px; height:48px; margin-bottom:12px; } .service-card__text p{ margin:0; font-size:.95em; } /* ---------- FOOTER ---------- */ .site-footer{ background: var(--quo-primary); color: var(--quo-white); padding: 40px 24px 24px; } .site-footer__inner{ max-width: 1100px; margin:0 auto; text-align:center; } .site-footer__social{ display:flex; justify-content:center; gap:20px; margin-bottom:16px; flex-wrap:wrap; } .site-footer__social a{ color: var(--quo-white); text-decoration:none; font-weight:600; font-size:.9em; } .site-footer__social a:hover{ text-decoration:underline; } .site-footer__copy{ font-size:.8em; opacity:.85; margin:0; } /* ---------- CONTACTO ---------- */ .contact{ padding: 60px 24px; } .contact__inner{ max-width: 640px; margin: 0 auto; } .contact__intro{ margin-bottom: 24px; } .contact-form__row{ margin-bottom: 18px; display:flex; flex-direction:column; gap:6px; } .contact-form__row label{ font-weight:600; color: var(--quo-primary); font-size:.9em; } .contact-form__row input, .contact-form__row textarea{ padding: 12px 14px; border: 1px solid #ddd; border-radius: var(--quo-radius); font-family: var(--quo-font-body); font-size: 1em; width: 100%; } .contact-form__row input:focus, .contact-form__row textarea:focus{ outline: 2px solid var(--quo-secondary); border-color: var(--quo-secondary); } .contact-form__hp{ position:absolute; left:-9999px; top:-9999px; } /* honeypot: oculto para humanos, visible para bots */ .contact-form__submit{ background: var(--quo-secondary); color: var(--quo-white); border:none; padding: 14px 28px; border-radius: var(--quo-radius); font-weight:700; font-size:1em; cursor:pointer; transition: background .15s ease; } .contact-form__submit:hover{ background: var(--quo-primary); } .contact-form__submit:disabled{ opacity:.6; cursor:not-allowed; } .contact-form__response{ margin-top: 16px; font-weight:600; } .contact-form__response.is-success{ color: #1a7a3c; } .contact-form__response.is-error{ color: #c0392b; } /* ---------- PÁGINAS INTERNAS ---------- */ .page-content{ max-width: 800px; margin: 60px auto; padding: 0 24px; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 782px){ .site-nav{ position:absolute; top:100%; left:0; right:0; background:var(--quo-white); flex-direction:column; display:none; box-shadow: 0 4px 6px rgba(0,0,0,.08); } .site-nav.is-open{ display:block; } .site-nav__list{ flex-direction:column; padding: 12px 24px; gap: 14px; } .menu-toggle{ display:block; } }