/* ===================================================================== Ambulancias do Nordés S.L. — styles.css Diseño corporativo sanitario · azul #0E5184 + marino #122E5E, amarillo #F5E800 y rojo de urgencia #E30613 (muestreados del logo y de la librea de la flota) ===================================================================== */ /* ---------- Design tokens ---------- */ :root{ /* --- Marca. Muestreada del logo y de la librea real de la flota --- */ --blue-900:#081C33; --blue-800:#122E5E; /* marino de la flota: superficies oscuras */ --blue-700:#0B4270; --blue-600:#0E5184; /* AZUL DE MARCA: texto, enlaces, boton primario */ --blue-500:#1A6DAC; --blue-200:#A9CCE6; --blue-100:#DCEAF6; --blue-50:#F1F7FB; --yellow-600:#C9BE00; /* bordes y hover del amarillo */ --yellow-500:#F5E800; /* AMARILLO DE MARCA: solo como relleno */ --yellow-300:#FBF470; --yellow-100:#FEFBC7; --red-700:#A80410; --red-600:#E30613; /* URGENCIA, y solo urgencia */ --red-100:#FDE7E9; /* --- Neutros: grises frios, ligeramente azulados --- */ --white:#ffffff; --bg:#ffffff; --bg-soft:#F4F7FA; --bg-softer:#E9EEF4; --ink:#111317; --ink-soft:#4B515A; --line:#E3E7EE; /* --- Superficies oscuras: marino, no casi-negro --- */ --dark:#122E5E; --dark-2:#0E2450; --dark-line:#24406F; --dark-text:#C4D4E8; --accent-on-dark:#F5E800; /* sobre marino el acento es amarillo: el azul da 1,6:1 */ --radius:16px; --radius-sm:10px; --radius-lg:26px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(8,28,51,.05),0 2px 6px rgba(8,28,51,.05); --shadow:0 12px 34px -14px rgba(8,28,51,.22); --shadow-lg:0 30px 70px -26px rgba(8,28,51,.32); --shadow-cta:0 10px 24px -12px rgba(227,6,19,.55); --container:1180px; --header-h:76px; --gap:clamp(1.5rem,4vw,3rem); --section-y:clamp(3.5rem,7vw,6.5rem); /* --- Motion: sin rebote, segun el design system --- */ --ease:cubic-bezier(.4,0,.2,1); --dur-micro:120ms; --dur-base:200ms; --dur-slow:320ms; --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-head:'Space Grotesk',var(--font-body); } /* ---------- Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{ margin:0; /* El menú móvil off-canvas (.primary-nav) es position:fixed y se aparca con translateX(100%); al ser fixed escapa del overflow-x:clip de , así que lo recortamos también aquí (en el padre directo) para evitar scroll horizontal. */ overflow-x:clip; font-family:var(--font-body); font-size:1.0625rem; /* 17px */ line-height:1.65; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{display:block;max-width:100%;height:auto} h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.12;font-weight:700;margin:0} h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,3.6rem);letter-spacing:-.03em} h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.7rem);letter-spacing:-.02em} h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.4rem);font-weight:600;letter-spacing:-.015em} p{margin:0 0 1rem;text-wrap:pretty} ul,ol{margin:0;padding:0} li{list-style:none} a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue-600);text-underline-offset:3px;text-decoration-thickness:2px;transition:color .18s var(--ease)} a:hover{color:var(--blue-700)} strong{font-weight:700} /* ---------- Layout helpers ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)} .section{padding-block:var(--section-y)} .section--soft{background:var(--bg-soft)} .section--dark{background:var(--dark);color:var(--dark-text)} .section--tight{padding-block:clamp(2.5rem,5vw,4rem)} .stack>*+*{margin-top:1rem} .center{text-align:center} .mx-auto{margin-inline:auto} .measure{max-width:60ch} .measure-narrow{max-width:46ch} /* eyebrow (etiqueta de sección) */ .eyebrow{ display:inline-flex;align-items:center;gap:.65em; font-family:var(--font-head); text-transform:uppercase;letter-spacing:.16em; font-size:.78rem;font-weight:600;color:var(--ink-soft);margin:0 0 1rem; } .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--blue-600)} .eyebrow--light{color:var(--yellow-500)} .eyebrow--center{justify-content:center} .section-head{max-width:56ch} .section-head--center{margin-inline:auto;text-align:center} .section-head p{color:var(--ink-soft);font-size:1.075rem;margin-top:1rem;margin-bottom:0} .section--dark .section-head p{color:var(--dark-text)} .lead{font-size:1.18rem;color:var(--ink-soft)} /* ---------- Buttons ---------- */ .btn{ --btn-bg:var(--blue-600);--btn-fg:#fff;--btn-bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-head);font-weight:600;font-size:1rem;line-height:1; padding:.95em 1.5em;border-radius:var(--radius-pill); background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bd); text-decoration:none;cursor:pointer;white-space:nowrap; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease); } .btn svg{width:1.15em;height:1.15em;flex:none} .btn:hover{transform:translateY(-2px)} .btn-accent{--btn-bg:var(--blue-600);--btn-fg:var(--ink);box-shadow:0 10px 24px -10px rgba(14,81,132,.45)} .btn-accent:hover{--btn-bg:var(--blue-700);color:var(--ink)} .btn-dark{--btn-bg:var(--ink);--btn-fg:#fff} .btn-dark:hover{--btn-bg:#000;color:#fff} .btn-outline{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)} .btn-outline:hover{--btn-bd:var(--ink);color:var(--ink)} .btn-outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)} .btn-outline-light:hover{--btn-bd:#fff;--btn-bg:rgba(255,255,255,.1);color:#fff} .btn-lg{padding:1.05em 1.9em;font-size:1.075rem} .btn-block{width:100%} .btn-urgente{ background:var(--red-600);color:#fff;border:0; box-shadow:var(--shadow-cta); } .btn-urgente:hover{background:var(--red-700);color:#fff} .btn-urgente svg{width:18px;height:18px} /* text link with arrow (Más información) */ .arrow-link{ display:inline-flex;align-items:center;gap:.5em; font-family:var(--font-head);font-weight:600;text-decoration:none;color:var(--ink); border:0;background:none;cursor:pointer; } .arrow-link svg{width:1.1em;height:1.1em;transition:transform .2s var(--ease)} .arrow-link:hover{color:var(--blue-700)} .arrow-link:hover svg{transform:translateX(4px)} .section--dark .arrow-link{color:#fff} .section--dark .arrow-link:hover{color:var(--yellow-500)} /* ---------- Header / nav ---------- */ .skip-link{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius-sm);text-decoration:none;transition:top .2s var(--ease)} .skip-link:focus{top:1rem;color:#fff} .site-header{ position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent;transition:box-shadow .25s var(--ease),border-color .25s var(--ease); } .site-header.is-stuck{box-shadow:var(--shadow-sm);border-bottom-color:var(--line)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)} .brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)} .brand:hover{color:var(--ink)} .brand-text{display:flex;flex-direction:column;line-height:1.1} .brand-name{font-family:var(--font-head);font-weight:700;font-size:1.06rem;letter-spacing:-.01em} .brand-sub{font-size:.72rem;color:var(--ink-soft);letter-spacing:.02em} .primary-nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)} .nav-list{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.6rem)} .nav-list a{ font-family:var(--font-head);font-weight:500;font-size:1rem;color:var(--ink); text-decoration:none;padding:.5rem .2rem;position:relative; } .nav-list a::after{content:"";position:absolute;left:.2rem;right:.2rem;bottom:.15rem;height:2px;background:var(--blue-600);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)} .nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)} .nav-list a[aria-current="page"]{font-weight:600} .nav-cta{padding:.7em 1.15em;font-size:.95rem} .nav-toggle{ display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px; background:var(--white);cursor:pointer;place-items:center;color:var(--ink); } .nav-toggle svg{width:24px;height:24px} .nav-toggle .icon-close{display:none} body.nav-open .nav-toggle .icon-open{display:none} body.nav-open .nav-toggle .icon-close{display:block} /* ---------- Hero ---------- */ .hero{position:relative;isolation:isolate;min-height:min(88vh,760px);display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--dark)} .hero-media{position:absolute;inset:0;z-index:-2} .hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(15,17,20,.86) 0%,rgba(15,17,20,.66) 42%,rgba(15,17,20,.28) 100%)} .hero-content{padding-block:clamp(3rem,8vw,6rem);max-width:none;margin-inline:0;padding-inline:clamp(1.15rem,4vw,2rem)} .hero-content>*{max-width:46rem} .hero h1{color:#fff;margin-bottom:1.2rem} .hero-lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:rgba(255,255,255,.9);max-width:40ch;margin-bottom:2rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.2rem} .hero-badges{display:flex;flex-wrap:wrap;gap:.7rem} .hero-badges li{ display:inline-flex;align-items:center;gap:.55em; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); padding:.55em 1em;border-radius:var(--radius-pill);font-size:.95rem;font-weight:500; backdrop-filter:blur(4px); } .hero-badges svg{width:1.15em;height:1.15em;color:var(--yellow-500)} /* ---------- Cards ---------- */ .cards{display:grid;gap:clamp(1.1rem,2.5vw,1.8rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .card{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius); padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.9rem;height:100%; box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d6dbe4} .card-icon{width:54px;height:54px;border-radius:14px;background:var(--yellow-500);color:var(--ink);display:grid;place-items:center} .card-icon svg{width:28px;height:28px} .card h3{margin-top:.2rem} .card p{color:var(--ink-soft);margin:0;flex:1} .card .arrow-link{margin-top:.4rem} /* ---------- Zigzag (servicios / flota) ---------- */ .zigzag{display:grid;gap:clamp(2.5rem,6vw,5rem)} .zz{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr 1fr} .zz:nth-child(even) .zz-media{order:2} .zz--text-only{grid-template-columns:1fr} .zz--text-only .zz-body{max-width:44rem} .zz-body{max-width:38rem} .zz-body h2{margin-bottom:1.1rem} .zz-body p{color:var(--ink-soft)} .zz-list{display:grid;gap:.6rem;margin:1.2rem 0 1.6rem} .zz-list li{display:flex;gap:.65em;align-items:flex-start;color:var(--ink)} .zz-list svg{width:1.35em;height:1.35em;color:var(--blue-700);flex:none;margin-top:.15em} .zz-num{font-family:var(--font-head);font-weight:700;color:var(--blue-600);font-size:.95rem;letter-spacing:.05em;margin-bottom:.4rem;display:block} /* ---------- Media placeholder ---------- */ .media{ position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-softer); min-height:260px;box-shadow:var(--shadow);isolation:isolate; } .media::before{ content:"";position:absolute;inset:0; background: linear-gradient(135deg,rgba(0,0,0,.04),transparent 60%), repeating-linear-gradient(45deg,#e6eaf1 0 14px,#e0e5ed 14px 28px); } .media::after{ content:attr(data-label);position:absolute;inset:0;display:grid;place-content:center;text-align:center; padding:1.5rem;font-family:var(--font-head);font-weight:600;font-size:.92rem;letter-spacing:.02em; color:#6b7280;gap:.5rem; } .media[data-label]{display:grid} .media img,img.media{width:100%;height:100%;object-fit:cover;position:relative;z-index:1} .media--tall{min-height:420px} .media--wide{min-height:300px} .media--hero{border-radius:0;box-shadow:none;height:100%;min-height:100%} .media--hero::after{color:rgba(255,255,255,.85)} .media--hero::before{background: linear-gradient(135deg,#23262d,#33373f), repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 16px,transparent 16px 32px)} .media-tag{position:absolute;z-index:2;left:1rem;top:1rem;background:rgba(17,19,23,.72);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.35em .7em;border-radius:var(--radius-pill)} /* ---------- Highlight band ---------- */ .highlight{position:relative;overflow:hidden} .highlight .container{position:relative;z-index:1} .highlight-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center} .stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem} .stat{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--radius);padding:1.6rem} .stat-num{font-family:var(--font-head);font-weight:700;font-size:2.3rem;color:var(--yellow-500);line-height:1} .stat-label{color:var(--dark-text);font-size:.95rem;margin-top:.5rem;display:block} /* ---------- Downloads ---------- */ .downloads{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .download{ display:flex;align-items:center;gap:1rem;background:var(--white);border:1px solid var(--line); border-radius:var(--radius);padding:1.2rem 1.3rem;text-decoration:none;color:var(--ink); box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease) } .download:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d6dbe4;color:var(--ink)} .download-icon{flex:none;width:46px;height:46px;border-radius:11px;background:var(--yellow-500);color:var(--ink);display:grid;place-items:center} .download-icon svg{width:24px;height:24px} .download-txt{display:flex;flex-direction:column;line-height:1.25} .download-txt b{font-family:var(--font-head);font-weight:600} .download-txt span{font-size:.82rem;color:var(--ink-soft)} /* ethics channel callout */ .callout{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem; background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.6rem); } .callout h3{color:#fff} .callout p{color:var(--dark-text);margin:.4rem 0 0;max-width:52ch} .callout-body{max-width:60ch} /* ---------- Gallery (multimedia) ---------- */ .gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-rows:220px} .gallery .media{min-height:0;height:100%} .g-span-2{grid-column:span 2} .g-row-2{grid-row:span 2} .video-cards{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .video-card .media{min-height:210px} .video-card .media::before{background:linear-gradient(135deg,#23262d,#33373f)} .video-card .media::after{color:rgba(255,255,255,.85)} /* ---------- CTA block ---------- */ .cta-cards{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr)} .cta-card{ position:relative;border-radius:var(--radius-lg);padding:2.2rem;overflow:hidden; background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;gap:.8rem; box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease) } .cta-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .cta-card--accent{background:var(--blue-600);border-color:var(--blue-600)} .cta-card h3{font-size:1.5rem} .cta-card p{color:var(--ink-soft);margin:0;flex:1} .cta-card--accent p{color:rgba(22,24,28,.8)} .cta-card .arrow-link{margin-top:.6rem} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start} .info-list{display:grid;gap:1.1rem;margin-top:1.6rem} .info-item{display:flex;gap:1rem;align-items:flex-start} .info-icon{flex:none;width:48px;height:48px;border-radius:12px;background:var(--yellow-500);color:var(--ink);display:grid;place-items:center} .info-icon svg{width:24px;height:24px} .info-item h3{font-size:1.05rem;margin-bottom:.15rem} .info-item a,.info-item p{color:var(--ink-soft);text-decoration:none;margin:0} .info-item a:hover{color:var(--blue-700)} .form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow)} .field{margin-bottom:1.3rem} .field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.95rem;margin-bottom:.5rem} .field .req{color:var(--blue-700)} .field input,.field textarea{ width:100%;font:inherit;color:var(--ink);background:var(--bg-soft); border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.85em 1em; transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease) } .field textarea{min-height:140px;resize:vertical} .field input:hover,.field textarea:hover{border-color:#cdd4de} .field input:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(14,81,132,.28)} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0392b;background:#fff5f4} .field-error{display:none;color:#a5281b;font-size:.85rem;font-weight:500;margin-top:.4rem} .field-error.show{display:block} .field-check{display:flex;gap:.7rem;align-items:flex-start} .field-check input{width:auto;margin-top:.25rem;accent-color:var(--blue-700)} .field-check label{font-weight:400;font-family:var(--font-body);font-size:.92rem;color:var(--ink-soft);margin:0} .form-note{font-size:.85rem;color:var(--ink-soft);margin-top:1rem} .form-status{margin-top:1.1rem;padding:1rem 1.2rem;border-radius:var(--radius-sm);font-weight:500;display:none} .form-status.show{display:block} .form-status.ok{background:#eafaf0;color:#186a3b;border:1px solid #bfe8cd} .form-status.err{background:#fdecea;color:#a5281b;border:1px solid #f3c4bd} .form-status.info{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-200)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .info-basica{margin-top:1.4rem;border:1px solid var(--line);border-radius:var(--radius-sm); padding:.9rem 1.1rem;background:var(--bg-soft);font-size:.94rem} .info-basica summary{cursor:pointer;font-weight:600;font-family:var(--font-head)} .info-basica dl{margin:.9rem 0 0;display:grid;gap:.5rem} .info-basica dt{font-weight:600;color:var(--ink)} .info-basica dd{margin:0 0 .4rem;color:var(--ink-soft)} .map{min-height:360px;border-radius:var(--radius-lg)} /* ---------- Footer ---------- */ .site-footer{background:var(--dark);color:var(--dark-text)} /* Los elementos de rejilla no encogen por debajo de su contenido si min-width es auto: sin esto el bloque de marca desbordaba el pie en movil. */ .footer-grid>*{min-width:0} .footer-grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1.4fr 1fr 1fr 1.2fr;padding-block:clamp(3rem,6vw,4.5rem)} .footer-brand .brand-name{color:#fff} .footer-brand .brand-sub{color:var(--dark-text)} .footer-about{margin:1.2rem 0 1.4rem;color:var(--dark-text);max-width:34ch} .site-footer h4{font-family:var(--font-head);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:#fff;margin:0 0 1.1rem} .footer-links{display:grid;gap:.7rem} .footer-links a{color:var(--dark-text);text-decoration:none;transition:color .18s var(--ease)} .footer-links a:hover{color:var(--yellow-500)} .footer-contact{display:grid;gap:1rem} .footer-contact .info-item a,.footer-contact .info-item p{color:var(--dark-text)} .footer-contact .info-icon{background:rgba(245,232,0,.14);color:var(--yellow-500)} .footer-contact .info-item h4{margin-bottom:.2rem} .footer-contact a:hover{color:var(--yellow-500)} .socials{display:flex;gap:.7rem;margin-top:1.3rem} .social{width:44px;height:44px;border-radius:12px;border:1px solid var(--dark-line);display:grid;place-items:center;color:#fff;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)} .social svg{width:20px;height:20px} .social:hover{background:var(--yellow-600);border-color:var(--yellow-600);color:var(--ink);transform:translateY(-2px)} .footer-bottom{border-top:1px solid var(--dark-line)} .footer-bottom-inner{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between;padding-block:1.4rem;font-size:.86rem;color:var(--dark-text)} .footer-bottom-inner a{color:var(--dark-text);text-decoration:none} .footer-bottom-inner a:hover{color:var(--yellow-500)} .footer-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem} /* ---------- Banner de cookies (CookieConsent, autoalojado) ---------- Repinta las custom properties de css/vendor/cookieconsent.css con la paleta de marca. El banner se abre sobre fondo claro, asi que el amarillo queda fuera: nunca como texto ni trazo fino sobre fondo claro (1,28:1). El boton primario es azul con texto blanco (8,3:1). */ :root{ --cc-bg:var(--white); --cc-primary-color:var(--ink); --cc-secondary-color:var(--ink-soft); --cc-font-family:var(--font-body); --cc-modal-border-radius:var(--radius); --cc-modal-margin:1rem; --cc-btn-border-radius:var(--radius-pill); --cc-link-color:var(--blue-600); --cc-btn-primary-bg:var(--blue-600); --cc-btn-primary-color:#fff; --cc-btn-primary-border-color:var(--blue-600); --cc-btn-primary-hover-bg:var(--blue-700); --cc-btn-primary-hover-color:#fff; --cc-btn-primary-hover-border-color:var(--blue-700); --cc-btn-secondary-bg:transparent; --cc-btn-secondary-color:var(--ink); --cc-btn-secondary-border-color:var(--line); --cc-btn-secondary-hover-bg:var(--bg-soft); --cc-btn-secondary-hover-color:var(--ink); --cc-btn-secondary-hover-border-color:var(--ink); --cc-cookie-category-block-bg:var(--bg-soft); --cc-cookie-category-block-border:var(--line); --cc-cookie-category-block-hover-bg:var(--bg-softer); --cc-cookie-category-block-hover-border:var(--line); --cc-cookie-category-expanded-block-bg:transparent; --cc-cookie-category-expanded-block-hover-bg:var(--bg-soft); --cc-section-category-border:var(--line); --cc-separator-border-color:var(--line); --cc-toggle-on-bg:var(--blue-600); --cc-toggle-on-knob-bg:#fff; --cc-toggle-off-bg:var(--ink-soft); --cc-toggle-off-knob-bg:#fff; --cc-toggle-readonly-bg:var(--blue-200); --cc-toggle-readonly-knob-bg:#fff; --cc-toggle-readonly-knob-icon-color:var(--blue-700); --cc-toggle-enabled-icon-color:#fff; --cc-toggle-disabled-icon-color:#fff; --cc-footer-bg:var(--bg-soft); --cc-footer-border-color:var(--line); --cc-footer-color:var(--ink-soft); --cc-overlay-bg:rgba(17,19,23,.55); --cc-webkit-scrollbar-bg:var(--line); --cc-webkit-scrollbar-hover-bg:var(--blue-700); } /* ---------- Page hero (interior) ---------- */ .page-hero{background:var(--dark);color:var(--dark-text);padding-block:clamp(3rem,7vw,5rem)} .page-hero .eyebrow{color:var(--yellow-500);margin-bottom:1rem} .page-hero .eyebrow::before{background:var(--yellow-500)} .page-hero h1{color:#fff;max-width:20ch} .page-hero p{color:var(--dark-text);font-size:1.12rem;max-width:60ch;margin-top:1.1rem} .crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:1.2rem} .crumbs a{color:rgba(255,255,255,.7);text-decoration:none} .crumbs a:hover{color:var(--yellow-500)} .crumbs span{color:#fff} /* ---------- Anchor offset (sticky header) ---------- */ [id]{scroll-margin-top:calc(var(--header-h) + 24px)} /* ---------- Reveal on scroll ---------- */ .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.is-visible{opacity:1;transform:none} .js .reveal[data-delay="1"]{transition-delay:.08s} .js .reveal[data-delay="2"]{transition-delay:.16s} .js .reveal[data-delay="3"]{transition-delay:.24s} /* ---------- Focus visible ---------- */ :focus-visible{outline:3px solid var(--blue-600);outline-offset:2px;border-radius:4px} .btn:focus-visible{outline-color:var(--ink)} .hero :focus-visible,.callout :focus-visible{outline-color:#fff} .section--dark :focus-visible, .site-footer :focus-visible, .topbar :focus-visible{outline-color:var(--yellow-500)} /* ---------- Responsive ---------- */ @media (max-width:960px){ :root{--header-h:66px} .nav-toggle{display:grid} .primary-nav{ position:fixed;top:var(--header-h);left:0;right:0;height:calc(100dvh - var(--header-h));background:var(--white); flex-direction:column;justify-content:flex-start;align-items:stretch; gap:0;padding:1.5rem clamp(1.15rem,4vw,2rem) 2.5rem; transform:translateX(100%);transition:transform .32s var(--ease); overflow-y:auto;border-top:1px solid var(--line); } body.nav-open .primary-nav{transform:translateX(0)} .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%} .nav-list li{border-bottom:1px solid var(--line)} .nav-list a{display:block;padding:1.05rem .2rem;font-size:1.2rem} .nav-list a::after{display:none} .nav-list a[aria-current="page"]{color:var(--blue-700)} .nav-cta{margin-top:1.5rem;align-self:flex-start} .contact-grid,.highlight-grid{grid-template-columns:1fr} .cta-cards{grid-template-columns:1fr} .g-span-2{grid-column:auto} } @media (max-width:760px){ .zz{grid-template-columns:1fr} .zz:nth-child(even) .zz-media{order:0} .zz-media{order:-1} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1 / -1} .gallery{grid-auto-rows:200px} .g-row-2{grid-row:auto} } @media (max-width:520px){ body{font-size:1rem} .footer-grid{grid-template-columns:1fr} .gallery{grid-template-columns:1fr} .hero-actions .btn,.callout .btn{width:100%} .brand-sub{display:none} } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .js .reveal{opacity:1;transform:none} } /* ===================================================================== UKEMS-style module — topbar, mega-menu, badges, counters, summary cards, why-us ===================================================================== */ /* ---------- Topbar ---------- */ .topbar{background:var(--dark);color:var(--dark-text);font-size:.84rem} .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap} .topbar-msg{display:inline-flex;align-items:center;gap:.5em;margin:0;font-weight:500} .topbar-msg svg{width:1.05em;height:1.05em;color:var(--yellow-500)} .topbar-links{display:flex;align-items:center;gap:.9rem} .topbar-links a{color:var(--dark-text);text-decoration:none;display:inline-flex;align-items:center;gap:.4em;font-weight:500} .topbar-links a:hover{color:var(--yellow-500)} .topbar-sep{width:1px;height:15px;background:var(--dark-line)} .topbar-social{display:inline-flex;gap:.5rem} .topbar-social a{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--dark-line)} .topbar-social a:hover{background:var(--yellow-600);border-color:var(--yellow-600);color:var(--ink)} .topbar-social svg{width:15px;height:15px} /* ---------- Header actions + mega trigger ---------- */ .header-actions{display:flex;align-items:center;gap:.6rem} .header-actions .btn{padding:.62em 1.05em;font-size:.92rem} .nav-trigger{ display:inline-flex;align-items:center;gap:.35em;font-family:var(--font-head);font-weight:500;font-size:1rem; color:var(--ink);background:none;border:0;cursor:pointer;padding:.5rem .2rem;position:relative; } .nav-trigger svg{width:1em;height:1em;transition:transform .22s var(--ease)} .nav-trigger::after{content:"";position:absolute;left:.2rem;right:1.5rem;bottom:.15rem;height:2px;background:var(--blue-600);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)} .has-mega.open .nav-trigger::after,.nav-trigger:hover::after{transform:scaleX(1)} .has-mega.open .nav-trigger svg{transform:rotate(180deg)} /* ---------- Mega-menu (desktop dropdown) ---------- */ .has-mega{position:static} .mega{ position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line); box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:120; } .has-mega.open .mega{opacity:1;visibility:visible;transform:none} .mega-inner{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(1.5rem,4vw,3rem);padding-block:2rem;align-items:stretch} .mega-feature{position:relative;border-radius:var(--radius);overflow:hidden;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:1.4rem;color:#fff;isolation:isolate} .mega-feature .media{position:absolute;inset:0;min-height:0;border-radius:0;box-shadow:none;z-index:-2} .mega-feature-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,17,20,.9),rgba(15,17,20,.25));z-index:-1} .mega-feature h3{color:#fff;font-size:1.2rem} .mega-feature p{color:rgba(255,255,255,.85);font-size:.9rem;margin:0 0 .3rem} .mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:.3rem 1.5rem;align-content:start} .mega-link{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .7rem;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .18s var(--ease)} .mega-link:hover{background:var(--bg-soft);color:var(--ink)} .mega-link svg{width:1.35em;height:1.35em;color:var(--blue-700);flex:none;margin-top:.1em} .mega-link b{display:block;font-family:var(--font-head);font-weight:600;font-size:.98rem} .mega-link span{font-size:.82rem;color:var(--ink-soft);line-height:1.4} /* ---------- Trust badges ---------- */ .trust-badges{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;align-items:center;justify-content:center} .trust-badge{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:1rem} .trust-badge svg{width:1.9em;height:1.9em;color:var(--blue-700);flex:none} .trust-badge small{display:block;font-family:var(--font-body);font-weight:400;font-size:.78rem;color:var(--ink-soft)} /* ---------- Counters ---------- */ .counters-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.8rem,1.6vw,1.8rem)} @media (max-width:1000px){.counters-grid{grid-template-columns:repeat(3,1fr);gap:1.8rem 1rem}} @media (max-width:480px){.counters-grid{grid-template-columns:repeat(2,1fr)}} .counter{text-align:center} .counter-num{font-family:var(--font-head);font-weight:700;font-size:clamp(2.6rem,5vw,3.7rem);letter-spacing:-.04em;color:var(--yellow-500);line-height:1;display:block} .counter-label{color:var(--dark-text);font-size:1rem;margin-top:.55rem;display:block} /* ---------- Summary cards / why-us ---------- */ .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(1.1rem,2.5vw,1.6rem)} .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem 2.6rem} .why-item{display:flex;gap:1rem;align-items:flex-start} .why-item svg{width:1.7em;height:1.7em;color:var(--blue-700);flex:none;margin-top:.05em} .why-item h3{font-size:1.1rem;margin-bottom:.25rem} .why-item p{color:var(--ink-soft);font-size:.96rem;margin:0} /* Unica rejilla de 4 elementos: sin este breakpoint queda 3+1 y una tarjeta huerfana. .cards tiene 3 elementos y .why-grid 6: forzarles 2 columnas seria contraproducente. */ @media (min-width:781px) and (max-width:1080px){ .summary-grid{grid-template-columns:repeat(2,1fr)} } /* ---------- Overlap service cards under hero ---------- */ .cards--overlap{position:relative;z-index:3;margin-top:clamp(-5.5rem,-6vw,-3.5rem)} /* ---------- UKEMS responsive ---------- */ @media (max-width:960px){ .header-actions{display:none} .primary-nav .header-actions{display:flex;flex-direction:column;width:100%;margin-top:1.2rem;gap:.7rem} .primary-nav .header-actions .btn{width:100%} .nav-trigger{width:100%;justify-content:space-between;font-size:1.2rem;padding:1.05rem .2rem;border-bottom:1px solid var(--line)} .nav-trigger::after{display:none} .mega{position:static;box-shadow:none;border-top:0;opacity:1;visibility:visible;transform:none;display:none;background:var(--bg-soft);border-radius:12px;margin:.5rem 0 .2rem} .has-mega.open .mega{display:block} .mega-inner{grid-template-columns:1fr;padding:1rem;gap:1rem} .mega-feature{display:none} .mega-cols{grid-template-columns:1fr;gap:0} .topbar-msg{display:none} .topbar-inner{justify-content:center} } @media (max-width:520px){ .trust-badges{gap:1rem 1.4rem} .trust-badge{font-size:.92rem} } /* ---------- Logo real (imagen) ---------- */ .brand-logo{height:50px;width:auto;display:block;border-radius:6px} /* border-box + 68px de alto equivale visualmente a 52px de contenido mas 8px de relleno arriba y abajo, pero hace que max-width acote el ancho TOTAL. Con content-box el relleno se sumaba por fuera y el bloque desbordaba en movil. */ .brand-logo--footer{height:68px;background:#fff;padding:8px 11px;border-radius:12px;box-sizing:border-box;max-width:100%;object-fit:contain} @media (max-width:520px){.brand-logo{height:42px}} .hero-photo{width:100%;height:100%;object-fit:cover;object-position:center} /* ===================================================================== Correcciones de contraste: acentos legibles sobre fondo oscuro ===================================================================== */ .btn-accent{--btn-fg:#fff} .btn-accent:hover{color:#fff} .cta-card--accent,.cta-card--accent h3,.cta-card--accent .arrow-link,.cta-card--accent .arrow-link:hover{color:#fff} .cta-card--accent p{color:rgba(255,255,255,.9)} /* Acento legible sobre fondos oscuros */ .eyebrow--light{color:var(--accent-on-dark)} .counter-num,.stat-num{color:var(--accent-on-dark)} .hero-badges svg{color:var(--accent-on-dark)} .section--dark .arrow-link:hover{color:var(--accent-on-dark)} .footer-links a:hover,.footer-bottom-inner a:hover,.footer-contact a:hover,.topbar-links a:hover{color:var(--accent-on-dark)} .footer-contact .info-icon{color:var(--accent-on-dark)} .topbar-msg svg{color:var(--accent-on-dark)} /* ---------- Galería collage (moodboard desordenado) ---------- */ .gallery-mosaic{column-width:210px;column-gap:14px} .gallery-mosaic figure{break-inside:avoid;margin:0 0 16px;position:relative;line-height:0;box-shadow:0 10px 24px -10px rgba(16,18,22,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .gallery-mosaic img{display:block;width:100%;height:auto} .gallery-mosaic figure:nth-child(6n+1){transform:rotate(-3deg);width:97%} .gallery-mosaic figure:nth-child(6n+2){transform:rotate(2deg);width:85%;margin-left:13%} .gallery-mosaic figure:nth-child(6n+3){transform:rotate(-1.5deg)} .gallery-mosaic figure:nth-child(6n+4){transform:rotate(3deg);width:90%;margin-right:9%} .gallery-mosaic figure:nth-child(6n+5){transform:rotate(-2.5deg);width:82%;margin-left:15%} .gallery-mosaic figure:nth-child(6n){transform:rotate(1.6deg);width:95%} .gallery-mosaic figure:hover{transform:rotate(0) scale(1.04);z-index:5;box-shadow:0 18px 40px -12px rgba(16,18,22,.55)} @media (max-width:640px){.gallery-mosaic{column-width:150px;column-gap:10px}} /* ---------- Datos de contacto: bloque "Dónde estamos" (sin mapa embebido) ---------- */ .mapa-datos{display:grid;gap:1rem;justify-items:start;padding:clamp(1.4rem,3vw,2rem); background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)} .mapa-direccion{margin:0;line-height:1.6} .mapa-cobertura{margin:0;color:var(--ink-soft);font-size:.95rem} /* ---------- Páginas legales ---------- */ .legal{max-width:72ch} .legal h2{margin:2.4rem 0 .9rem;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)} .legal h3{margin:1.8rem 0 .6rem} .legal p,.legal li{color:var(--ink-soft)} .legal ul{margin:0 0 1rem;padding-left:1.2rem} .legal li{list-style:disc;margin-bottom:.4rem} .legal dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:1rem 0} .legal dt{font-weight:600;color:var(--ink)} .legal dd{margin:0;color:var(--ink-soft)} @media (max-width:640px){.legal dl{grid-template-columns:1fr;gap:.2rem}} /* ===================================================================== Rediseño home (fase 2) — bloques nuevos. Marca real, sin terceros. ===================================================================== */ /* Utilidad accesible: oculto visualmente, visible para lectores */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- Banda 112 (aviso de seguridad, no alarmista) ---------- */ .alert112{background:var(--ink);color:#fff;font-size:.9rem} .alert112-inner{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.55rem 0;text-align:center;flex-wrap:wrap} .alert112 svg{width:1.15em;height:1.15em;color:var(--red-600);flex:none} .alert112 a{color:#fff;font-weight:700;text-decoration-color:var(--red-600);text-underline-offset:3px} .alert112 a:hover{color:#fff} /* ---------- Hero: línea de teléfono ---------- */ .hero-phone{display:flex;align-items:center;gap:.55em;flex-wrap:wrap;margin:1.6rem 0 0;color:rgba(255,255,255,.85);font-size:1.02rem} .hero-phone svg{width:1.2em;height:1.2em;color:var(--yellow-500);flex:none} .hero-phone a{color:#fff;font-weight:600;text-decoration-color:var(--yellow-500)} .hero-phone a:hover{color:var(--yellow-500)} /* ---------- Cifras: variante texto (24/7, ISO) ---------- */ .counter-num--text{font-size:clamp(2.2rem,4.2vw,3.1rem)} /* ---------- Dos recorridos (puertas) ---------- */ .puertas{display:grid;gap:clamp(1.1rem,2.5vw,1.8rem);grid-template-columns:repeat(2,1fr)} .puerta{border-radius:var(--radius-lg);padding:clamp(1.8rem,3.5vw,2.6rem);display:flex;flex-direction:column;gap:1rem;height:100%} .puerta-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center} .puerta-icon svg{width:30px;height:30px} .puerta h3{font-size:clamp(1.4rem,1.1rem+1vw,1.9rem)} .puerta-list{display:grid;gap:.5rem;margin:.2rem 0 .4rem} .puerta-list li{position:relative;padding-left:1.5em} .puerta-list li::before{content:"";position:absolute;left:0;top:.55em;width:.7em;height:.7em;border-radius:50%;background:var(--yellow-500)} .puerta-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:.4rem} /* Traslado: superficie azul clara, tranquila, para familias */ .puerta--traslado{background:var(--blue-50);border:1px solid var(--blue-100)} .puerta--traslado .puerta-icon{background:var(--blue-600);color:#fff} .puerta--traslado .puerta-list li::before{background:var(--blue-600)} /* Evento: superficie marino, enérgica, comercial */ .puerta--evento{background:var(--dark);color:var(--dark-text)} .puerta--evento h3{color:#fff} .puerta--evento .puerta-icon{background:var(--yellow-500);color:var(--ink)} /* ---------- Servicios numerados ---------- */ .svc-num{display:grid;gap:0} .svc-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.4rem);align-items:start;padding:1.6rem 0;border-top:1px solid var(--line)} .svc-item:last-child{border-bottom:1px solid var(--line)} .svc-index{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,3.5vw,2.8rem);line-height:1;color:var(--blue-200);letter-spacing:-.03em} .svc-body h3{margin-bottom:.4rem} .svc-body p{color:var(--ink-soft);margin:0 0 .7rem;max-width:60ch} /* ---------- Split (media + texto) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center} .split--reverse .split-media{order:2} .split-media img{width:100%;height:100%;max-height:460px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)} .split-body h2{margin:.4rem 0 1rem} .split-body p{color:var(--ink-soft)} .section--dark .split-body p{color:var(--dark-text)} /* ---------- Lista de etiquetas (tipos de evento) ---------- */ .tag-list{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.2rem 0 1.6rem} .tag-list li{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.4em .95em;font-size:.92rem;font-weight:500;color:var(--ink)} /* ---------- Credenciales (sobre marino) ---------- */ .creds{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,1.8rem)} .cred{border:1px solid var(--dark-line);border-radius:var(--radius);padding:1.4rem;background:var(--dark-2)} .cred-mark{display:block;font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--yellow-500);letter-spacing:-.02em;margin-bottom:.5rem} .cred p{color:var(--dark-text);margin:0;font-size:.95rem} .creds-mutuas{margin-top:1.6rem;color:var(--dark-text)} .creds-mutuas strong{color:#fff} /* ---------- Flota ---------- */ .fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,1.6rem)} .fleet-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.6rem;box-shadow:0 1px 2px rgba(8,28,51,.06),0 14px 30px -18px rgba(8,28,51,.28)} .fleet-type{display:inline-grid;place-items:center;min-width:2.4em;height:2.4em;padding:0 .5em;border-radius:12px;background:var(--yellow-500);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin-bottom:.9rem} .fleet-card h3{font-size:1.1rem;margin-bottom:.4rem} .fleet-card p{color:var(--ink-soft);margin:0;font-size:.95rem} .fleet-cta{margin-top:1.6rem} /* ---------- Cobertura territorial ---------- */ .cobertura{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start} .bases-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.4rem} .bases-list li{position:relative;padding-left:1.6em;font-weight:500} .bases-list li::before{content:"";position:absolute;left:0;top:.35em;width:.9em;height:.9em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--blue-600)} .cobertura-note{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:grid;gap:.8rem} .cobertura-note p{margin:0;color:var(--ink-soft)} .cobertura-note strong{color:var(--ink);font-family:var(--font-head)} /* ---------- CTA final de dos columnas ---------- */ .cta-cards--2{grid-template-columns:repeat(2,1fr)} .section--dark .cta-card{background:var(--dark-2);border-color:var(--dark-line)} .section--dark .cta-card h3{color:#fff} .section--dark .cta-card p{color:var(--dark-text)} .section--dark .cta-card--accent{background:var(--blue-600);border-color:var(--blue-600)} .section--dark .cta-card--accent h3,.section--dark .cta-card--accent p{color:#fff} /* ---------- Responsive de los bloques nuevos ---------- */ @media (max-width:860px){ .puertas{grid-template-columns:1fr} .split,.split--reverse{grid-template-columns:1fr} .split--reverse .split-media{order:0} .creds{grid-template-columns:repeat(2,1fr)} .fleet{grid-template-columns:repeat(2,1fr)} .cobertura{grid-template-columns:1fr} .cta-cards--2{grid-template-columns:1fr} } @media (max-width:520px){ .creds,.fleet,.bases-list{grid-template-columns:1fr} .svc-item{grid-template-columns:1fr;gap:.4rem} .puerta-actions .btn{width:100%} } /* ---------- Matriz / indice de servicios ---------- */ .svc-matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem} .svc-tile{display:flex;align-items:center;gap:.9rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(8,28,51,.06),0 10px 22px -16px rgba(8,28,51,.24);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)} .svc-tile:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(8,28,51,.34);border-color:var(--blue-200);color:var(--ink)} .svc-tile-num{font-family:var(--font-head);font-weight:700;color:var(--blue-200);font-size:1.15rem;flex:none} .svc-tile-txt{font-family:var(--font-head);font-weight:600;font-size:1rem;line-height:1.2;flex:1} .svc-tile svg{width:1.1em;height:1.1em;color:var(--blue-600);flex:none;transition:transform .2s var(--ease)} .svc-tile:hover svg{transform:translateX(3px)} /* ---------- Misión y visión ---------- */ .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.5vw,1.8rem)} .mv-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(1.8rem,3vw,2.3rem);box-shadow:0 1px 2px rgba(8,28,51,.06),0 14px 30px -18px rgba(8,28,51,.28)} .mv-card p:last-child{margin:0;color:var(--ink-soft);font-size:1.08rem} @media (max-width:640px){.mv-grid{grid-template-columns:1fr}} /* ---------- Carrusel de mutuas (marquesina) ---------- */ .marquee{margin-top:clamp(1.6rem,3vw,2.4rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;align-items:stretch;gap:1.2rem;width:max-content;animation:marquee 34s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} /* Cada item es una tarjeta con el nombre. Preparada para sustituir el texto por del logo real. */ .marquee-item{display:grid;place-items:center;min-width:220px;padding:1.4rem 2rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(8,28,51,.06),0 10px 22px -16px rgba(8,28,51,.22);font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--blue-700);letter-spacing:-.01em;text-align:center} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .6rem))}} @media (prefers-reduced-motion:reduce){ .marquee{-webkit-mask-image:none;mask-image:none} .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto} .marquee-item[aria-hidden="true"]{display:none} } /* ---------- Dónde estamos + mapa bajo demanda ---------- */ .mapa-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:stretch} .map-embed{position:relative;min-height:340px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-softer)} .map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block} .map-fallback{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.5rem;background:var(--bg-softer);color:var(--ink-soft);font-size:.9rem;line-height:1.5} .map-fallback svg{width:2.4em;height:2.4em;color:var(--blue-600)} .map-fallback span{max-width:36ch;text-align:center} .map-fallback a{color:var(--blue-600);font-weight:600} /* Cuando el mapa carga, el contenedor recibe .map-embed--loaded y el aviso se oculta por especificidad (no dependemos del atributo [hidden]). */ .map-embed--loaded .map-fallback{display:none} @media (max-width:760px){.mapa-layout{grid-template-columns:1fr}}