/* ============================================================ FASE 4 SEGUROS · Seguro de camiones CSS no crítico — se carga de forma diferida. El CSS del hero va inline en el de cada página. ============================================================ */ /* ---------- 1. COBERTURAS ---------- */ .covers{padding:var(--s7) 0} .cover-grid{ display:grid;gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:var(--s5) } .cover{ background:var(--bg);border:1px solid var(--border);border-radius:var(--r2); padding:var(--s4);position:relative;overflow:hidden; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease } .cover::before{ content:"";position:absolute;inset:0 auto 0 0;width:3px; background:var(--axa-blue);transform:scaleY(0);transform-origin:top; transition:transform .25s ease } .cover:hover,.cover:focus-within{ border-color:var(--axa-blue);transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,143,.10) } .cover:hover::before,.cover:focus-within::before{transform:scaleY(1)} .cover-ico{ width:44px;height:44px;display:grid;place-items:center; background:var(--surface);border-radius:var(--r1);color:var(--axa-blue); margin-bottom:var(--s3) } .cover-ico svg{width:26px;height:26px} .cover h3{font-size:1.0625rem;margin-bottom:var(--s1)} .cover p{font-size:.9375rem;color:var(--muted);margin-bottom:var(--s3)} .cover-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none} .cover-tags li{ font-size:.75rem;font-weight:600;letter-spacing:.01em; background:var(--surface);color:var(--ink); padding:4px 9px;border-radius:99px } /* ---------- 2. PROCESO ---------- */ .steps{padding:var(--s7) 0;background:var(--surface)} .step-grid{ display:grid;gap:var(--s4);margin-top:var(--s5); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) } .step{position:relative;padding-left:56px} .step-n{ position:absolute;left:0;top:0;width:40px;height:40px; display:grid;place-items:center;border-radius:50%; background:var(--axa-blue);color:#fff; font-weight:700;font-size:1.0625rem;font-variant-numeric:tabular-nums } .step h3{font-size:1.0625rem;margin-bottom:6px} .step p{font-size:.9375rem;color:var(--muted)} /* Franja de confianza */ .trust-strip{ margin-top:var(--s6);padding:var(--s4); background:var(--bg);border:1px solid var(--border);border-radius:var(--r2); display:grid;gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) } .trust-item{display:flex;gap:12px;align-items:flex-start} .trust-item svg{width:22px;height:22px;color:var(--axa-blue);flex:none;margin-top:2px} .trust-item strong{display:block;font-size:.9375rem} .trust-item span{font-size:.875rem;color:var(--muted)} /* ---------- 3. FAQ ---------- */ .faq{padding:var(--s7) 0} .faq-list{margin-top:var(--s5);border-top:1px solid var(--border)} .faq-item{border-bottom:1px solid var(--border)} .faq-item summary{ cursor:pointer;list-style:none;padding:var(--s3) 40px var(--s3) 0; position:relative;font-weight:600;font-size:1.0625rem;color:var(--ink) } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--axa-blue)} .faq-item summary:focus-visible{outline:3px solid var(--axa-blue);outline-offset:3px;border-radius:4px} .faq-item summary::after{ content:"";position:absolute;right:8px;top:50%; width:10px;height:10px;margin-top:-7px; border-right:2px solid var(--axa-blue);border-bottom:2px solid var(--axa-blue); transform:rotate(45deg);transition:transform .2s ease } .faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-3px} .faq-answer{padding:0;color:var(--muted);max-width:68ch} .faq-answer>*:last-child{margin-bottom:var(--s4)} .faq-answer p+p{margin-top:var(--s2)} /* ---------- 4. RECURSOS / BLOG ---------- */ .resources{padding:var(--s7) 0;background:var(--surface)} .res-grid{ display:grid;gap:var(--s3);margin-top:var(--s5); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) } .res-card{ display:flex;flex-direction:column; background:var(--bg);border:1px solid var(--border);border-radius:var(--r2); padding:var(--s4);text-decoration:none;color:inherit; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease } .res-card:hover{ border-color:var(--axa-blue);transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,143,.10) } .res-kicker{ font-size:.75rem;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--axa-blue);margin-bottom:8px } .res-card h3{font-size:1rem;line-height:1.35;margin-bottom:8px} .res-card p{font-size:.875rem;color:var(--muted);flex:1} .res-more{ margin-top:var(--s3);font-size:.875rem;font-weight:600;color:var(--axa-blue); display:inline-flex;align-items:center;gap:6px } .res-card:hover .res-more{gap:10px} .res-more::after{content:"→";transition:transform .2s ease} /* ---------- 5. CTA DE CIERRE ---------- */ .closer{ padding:var(--s7) 0;background:var(--axa-blue);color:#fff;text-align:center } .closer h2{color:#fff;max-width:22ch;margin-inline:auto} .closer p{ color:rgba(255,255,255,.85);max-width:52ch; margin:var(--s3) auto var(--s5) } .closer .btn-primary{box-shadow:0 6px 20px rgba(0,0,0,.25)} .closer-alt{ margin-top:var(--s4);font-size:.9375rem;color:rgba(255,255,255,.85) } .closer-alt a{color:#fff;font-weight:600} /* ---------- 6. FOOTER ---------- */ .site-footer{background:#000063;color:rgba(255,255,255,.78);padding:var(--s6) 0 var(--s5)} .foot-grid{ display:grid;gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) } .foot-brand img{height:38px;width:auto;margin-bottom:var(--s3)} .foot-brand p{font-size:.875rem;max-width:36ch} .site-footer h3{ color:#fff;font-size:.8125rem;text-transform:uppercase; letter-spacing:.06em;margin-bottom:var(--s2) } .foot-list{list-style:none;font-size:.9375rem} .foot-list li+li{margin-top:8px} .site-footer a{color:rgba(255,255,255,.85);text-decoration:none} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:3px} .legal{ margin-top:var(--s5);padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.18); font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.62) } .legal p+p{margin-top:var(--s2)} .legal strong{color:rgba(255,255,255,.85);font-weight:600} /* ---------- 7. BOTÓN FLOTANTE WHATSAPP ---------- */ /* Acompaña al usuario durante todo el scroll: visible desde el inicio. */ .wa-float{ position:fixed;right:18px;bottom:18px;z-index:60; width:60px;height:60px;border-radius:50%; background:linear-gradient(145deg,#2FE075,#1EBE5A); color:#fff;display:grid;place-items:center; box-shadow:0 6px 20px rgba(37,211,102,.5),0 2px 8px rgba(0,0,0,.18); opacity:0;transform:translateY(16px) scale(.85); animation:wa-entrada .5s cubic-bezier(.2,.9,.3,1.2) .8s forwards; transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease } @keyframes wa-entrada{to{opacity:1;transform:none}} .wa-float svg{width:32px;height:32px;position:relative;z-index:1} .wa-float:hover{transform:scale(1.08);box-shadow:0 10px 32px rgba(37,211,102,.72),0 3px 10px rgba(0,0,0,.2)} .wa-float:active{transform:scale(1.02)} /* Doble onda para que el halo respire sin resultar molesto */ .wa-float::before,.wa-float::after{ content:"";position:absolute;inset:0;border-radius:50%; background:var(--wa);z-index:-1; animation:wa-pulse 3s cubic-bezier(.3,0,.5,1) infinite } .wa-float::after{animation-delay:1.5s} @keyframes wa-pulse{ 0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.75);opacity:0} 100%{transform:scale(1.75);opacity:0} } .wa-float:focus-visible{outline:3px solid var(--axa-blue);outline-offset:4px} /* Etiqueta que aparece al pasar el cursor en escritorio */ .wa-float span{ position:absolute;right:calc(100% + 12px); background:var(--ink);color:#fff; font-size:.8125rem;font-weight:600;white-space:nowrap; padding:8px 12px;border-radius:8px; opacity:0;transform:translateX(8px);pointer-events:none; transition:opacity .25s ease,transform .25s ease; box-shadow:0 4px 14px rgba(0,0,0,.18) } .wa-float:hover span{opacity:1;transform:none} @media (max-width:900px){.wa-float span{display:none}} /* ---------- 8. MODAL DE AGRADECIMIENTO ---------- */ .modal{ position:fixed;inset:0;z-index:80; display:none;place-items:center;padding:var(--s3); background:rgba(10,10,30,.62); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px) } .modal.is-open{display:grid} .modal-card{ background:var(--bg);border-radius:var(--r2); padding:var(--s6) var(--s5);max-width:440px;width:100%; text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3); animation:modal-in .28s cubic-bezier(.2,.8,.3,1) } @keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}} .modal-ico{ width:64px;height:64px;margin:0 auto var(--s3); border-radius:50%;background:#E8F5EE;color:var(--ok); display:grid;place-items:center } .modal-ico svg{width:34px;height:34px} .modal-card h2{font-size:1.375rem;margin-bottom:var(--s2)} .modal-card p{color:var(--muted);font-size:.9375rem;margin-bottom:var(--s4)} .modal-card .btn{width:100%} .modal-close{ margin-top:var(--s3);background:none;border:0; color:var(--muted);font-size:.875rem;cursor:pointer; text-decoration:underline;padding:8px } .modal-close:hover{color:var(--ink)} /* ---------- 9. PÁGINAS DE CONTENIDO (blog / legal) ---------- */ .page-head{ background:var(--surface);padding:var(--s7) 0 var(--s6); border-bottom:1px solid var(--border) } .breadcrumb{font-size:.8125rem;color:var(--muted);margin-bottom:var(--s3)} .breadcrumb a{color:var(--axa-blue);text-decoration:none} .breadcrumb a:hover{text-decoration:underline} .breadcrumb span{margin:0 6px;opacity:.5} .page-head h1{max-width:20ch} .page-meta{margin-top:var(--s3);font-size:.875rem;color:var(--muted)} /* Columna de lectura centrada. OJO: la medida va en rem, no en ch. La unidad ch depende del tamaño de fuente de CADA elemento, así que 68ch en un h1 de 44px son ~1900px y el título se desalinea del cuerpo. Con rem todos comparten el mismo borde. */ :root{--col-lectura:36rem} .prose{ max-width:var(--col-lectura);margin-inline:auto; padding:var(--s6) 0 var(--s7);font-size:1.0625rem } .page-head--lectura .breadcrumb, .page-head--lectura h1, .page-head--lectura .page-meta, .page-head--lectura .sec-lead{max-width:var(--col-lectura);margin-inline:auto} /* ---- Documentos largos: tres columnas ---- La columna de texto se mantiene en su medida de línea cómoda (65-75 caracteres) y el ancho sobrante se aprovecha con el índice a un lado y una llamada a la acción al otro, en vez de dejar aire muerto. El conjunto ocupa lo mismo que el resto del sitio (--wrap). */ .doc-rail{display:none} .doc-toc{display:none} .doc-cta{margin-top:var(--s6)} /* Dos columnas: índice + texto */ @media (min-width:1080px){ .doc-layout{ display:grid; grid-template-columns:230px minmax(0,var(--col-lectura)); gap:var(--s5) var(--s6); justify-content:center; align-items:start } .doc-rail{display:block} .doc-layout .prose, .doc-head .breadcrumb, .doc-head h1, .doc-head .page-meta, .doc-head .sec-lead{margin-inline:0;max-width:none} .doc-toc.is-ready{ display:block;position:sticky;top:130px;align-self:start; max-height:calc(100vh - 170px);overflow-y:auto; padding-right:var(--s2);scrollbar-width:thin } .doc-toc-tit{ font-size:.6875rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3) } .doc-toc ol{list-style:none;border-left:2px solid var(--border)} .doc-toc a{ display:block;padding:7px 0 7px 14px;margin-left:-2px; border-left:2px solid transparent; font-size:.875rem;line-height:1.4;color:var(--muted); text-decoration:none; transition:color .2s ease,border-color .2s ease } .doc-toc a:hover{color:var(--axa-blue)} .doc-toc a.is-active{color:var(--axa-blue);font-weight:600;border-left-color:var(--axa-blue)} .prose{font-size:1.125rem} .doc-cta{grid-column:2;margin-top:0} } /* Tres columnas: índice + texto + conversión */ @media (min-width:1280px){ /* 240 + 40 + 640 + 40 + 260 = 1220, prácticamente el ancho del sitio, manteniendo el texto por debajo de 75 caracteres por línea. */ .doc-layout{ grid-template-columns:240px minmax(0,40rem) 260px; gap:var(--s5) 40px } .doc-cta{ grid-column:3;position:sticky;top:130px;align-self:start; padding-top:var(--s6) } .doc-head + .doc-rail{display:block} } /* Tarjeta de conversión */ .doc-cta-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r2);padding:var(--s4) } .doc-cta-tit{font-weight:700;font-size:1.0625rem;margin-bottom:6px;color:var(--ink)} .doc-cta-txt{font-size:.875rem;color:var(--muted);margin-bottom:var(--s3)} .doc-cta-btn{width:100%;font-size:1rem;min-height:46px} .doc-cta-wa{ display:flex;align-items:center;justify-content:center;gap:7px; margin-top:10px;padding:10px;border-radius:var(--r1); font-size:.875rem;font-weight:600;color:var(--wa); text-decoration:none;border:1px solid var(--wa); transition:background-color .2s ease,color .2s ease } .doc-cta-wa svg{width:17px;height:17px} .doc-cta-wa:hover{background:var(--wa);color:#fff} /* En pantallas muy anchas la columna puede crecer un poco */ @media (min-width:1600px){ :root{--col-lectura:42rem} } .prose h2{ font-size:1.5rem;margin:var(--s6) 0 var(--s3); padding-top:var(--s2);border-top:1px solid var(--border) } .prose h3{font-size:1.1875rem;margin:var(--s5) 0 var(--s2)} .prose p{margin-bottom:var(--s3);color:#33334D} .prose ul,.prose ol{margin:0 0 var(--s3) 1.25rem;color:#33334D} .prose li{margin-bottom:10px} .prose li::marker{color:var(--axa-blue)} .prose strong{color:var(--ink)} .prose a{color:var(--axa-blue);font-weight:600} .prose table{ width:100%;border-collapse:collapse;margin:var(--s4) 0;font-size:.9375rem } .prose th,.prose td{ padding:10px 12px;text-align:left;border-bottom:1px solid var(--border) } .prose th{background:var(--surface);font-weight:600;font-size:.875rem} .prose caption{ caption-side:bottom;font-size:.8125rem;color:var(--muted); padding-top:10px;text-align:left } .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .callout{ background:var(--surface);border-left:3px solid var(--axa-blue); padding:var(--s3) var(--s4);border-radius:0 var(--r1) var(--r1) 0; margin:var(--s4) 0 } .callout p{margin:0;font-size:.9375rem} .callout strong{color:var(--axa-blue)} /* CTA embebido en artículos */ .inline-cta{ margin:var(--s6) 0;padding:var(--s5); background:var(--axa-blue);border-radius:var(--r2); color:#fff;text-align:center } .inline-cta p{color:rgba(255,255,255,.88);margin-bottom:var(--s4);font-size:1rem} .inline-cta strong{display:block;color:#fff;font-size:1.125rem;margin-bottom:8px} /* ---------- 10. UTILIDADES ---------- */ .center{text-align:center} .mt-4{margin-top:var(--s4)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important } .wa-float::before{display:none} } @media print{ .site-header,.wa-float,.modal,.closer,.inline-cta{display:none!important} body{color:#000} } /* ============================================================ 11. MOVIMIENTO Y MICROINTERACCIONES Todo lo de abajo se desactiva solo si el sistema pide menos movimiento (ver bloque prefers-reduced-motion). ============================================================ */ /* ---- FAQ: despliegue animado ---- El truco de grid-template-rows 0fr→1fr permite animar una altura desconocida. Sin JS sigue funcionando: el estado [open] aplica 1fr. */ .faq-answer-wrap{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.2,.8,.3,1) } .faq-item[open] .faq-answer-wrap{grid-template-rows:1fr} /* Mientras se cierra sigue teniendo [open], pero la altura vuelve a cero */ .faq-item.is-closing .faq-answer-wrap{grid-template-rows:0fr} .faq-answer{overflow:hidden;min-height:0} .faq-item{transition:background-color .25s ease} .faq-item[open]{background:linear-gradient(to right,rgba(0,0,143,.028),transparent)} .faq-item summary{transition:color .2s ease,padding-left .25s ease} .faq-item summary:hover{padding-left:6px} .faq-item[open] summary{color:var(--axa-blue)} /* ---- Aparición al entrar en pantalla ---- */ /* IMPORTANTE: el prefijo .js hace que el contenido SOLO se oculte cuando hay JavaScript para volver a mostrarlo. Sin JS, o si el observador fallara, la página se ve completa en lugar de quedar en blanco. */ @media (prefers-reduced-motion:no-preference){ .js .reveal{ opacity:0;transform:translateY(22px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1) } .js .reveal.is-in{opacity:1;transform:none} /* Los hijos entran en cascada, no todos de golpe */ .js .reveal-stagger>*{ opacity:0;transform:translateY(22px); transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1) } .js .reveal-stagger.is-in>*{opacity:1;transform:none} .js .reveal-stagger.is-in>*:nth-child(1){transition-delay:.04s} .js .reveal-stagger.is-in>*:nth-child(2){transition-delay:.10s} .js .reveal-stagger.is-in>*:nth-child(3){transition-delay:.16s} .js .reveal-stagger.is-in>*:nth-child(4){transition-delay:.22s} .js .reveal-stagger.is-in>*:nth-child(5){transition-delay:.28s} .js .reveal-stagger.is-in>*:nth-child(6){transition-delay:.34s} } /* ---- Tarjetas: elevación más marcada y suave ---- */ .cover,.res-card{ transition:border-color .25s ease,transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease } .cover:hover,.cover:focus-within{ transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,143,.13) } .res-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,143,.13)} .cover-ico{transition:background-color .25s ease,transform .3s cubic-bezier(.2,.8,.3,1)} .cover:hover .cover-ico{background:rgba(0,0,143,.08);transform:scale(1.06) rotate(-3deg)} .res-more::after{transition:transform .25s ease} .res-card:hover .res-more::after{transform:translateX(3px)} /* ---- Pasos del proceso ---- */ .step-n{transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease} .step:hover .step-n{transform:scale(1.1);box-shadow:0 6px 18px rgba(0,0,143,.3)} /* ---- Franja de confianza ---- */ .trust-item svg{transition:transform .3s cubic-bezier(.2,.8,.3,1)} .trust-item:hover svg{transform:scale(1.15)} /* ---- Insignias del hero ---- */ .badges li{transition:background-color .25s ease,transform .25s cubic-bezier(.2,.8,.3,1)} .badges li:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)} /* ---- Enlaces del pie ---- */ .foot-list a{ display:inline-block; transition:color .2s ease,transform .2s ease } .foot-list a:hover{transform:translateX(3px)} /* Compensa el encabezado fijo cuando se salta a un ancla */ [id]{scroll-margin-top:112px} /* ============================================================ 12. PULIDO FINAL ============================================================ */ /* Tarjetas de selección del formulario: respuesta táctil clara */ .card-opt span{transition:border-color .18s ease,background-color .18s ease,transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease} .card-opt input:hover:not(:checked)+span{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,143,.09)} .card-opt input:checked+span{box-shadow:0 3px 12px rgba(0,0,143,.14)} .card-opt svg{transition:transform .25s cubic-bezier(.2,.8,.3,1)} .card-opt input:checked+span svg{transform:scale(1.12)} /* Píldoras */ .pill span{transition:border-color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease} .pill input:hover:not(:checked)+span{border-color:#B9BCC7;transform:translateY(-1px)} .pill input:checked+span{box-shadow:0 3px 12px rgba(0,0,143,.22)} /* Campos de texto */ .input{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease} .input:hover:not(:focus){border-color:#C9CCD6} /* La barra de progreso brilla al avanzar */ .progress-fill{ background:linear-gradient(90deg,var(--axa-blue),#3D3DD1); box-shadow:0 0 8px rgba(0,0,143,.35) } /* El paso entra con un desplazamiento más natural */ @keyframes step-in{ from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} } /* Modal: entrada con más presencia */ .modal{animation:modal-fondo .25s ease} @keyframes modal-fondo{from{opacity:0}to{opacity:1}} .modal-ico{animation:modal-check .45s cubic-bezier(.2,.9,.3,1.4) .1s backwards} @keyframes modal-check{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}} /* Tarjeta del formulario: sombra más rica y elevación al interactuar */ .form-card{ box-shadow:0 20px 50px rgba(0,0,40,.26),0 2px 8px rgba(0,0,0,.1); transition:box-shadow .35s ease } .form-card:focus-within{box-shadow:0 26px 60px rgba(0,0,40,.32),0 3px 10px rgba(0,0,0,.12)} /* El halo rojo del hero respira muy lentamente */ @media (prefers-reduced-motion:no-preference){ .hero::after{animation:hero-halo 14s ease-in-out infinite} @keyframes hero-halo{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.12);opacity:.75} } } /* Enlaces de contenido con subrayado progresivo */ .prose a{ text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .25s ease } .prose a:hover{background-size:100% 2.5px} /* Ritmo vertical algo más holgado en móvil */ @media (max-width:600px){ .covers,.steps,.faq,.resources,.closer{padding:var(--s6) 0} .cover,.form-card{border-radius:12px} .bridge{padding-top:var(--s4);font-size:.9375rem} } /* ============================================================ 13. COBERTURAS (estructura del producto AU361) ============================================================ */ .cover-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .cover-lg{display:flex;flex-direction:column} .cover-tag-basic{ display:inline-block;align-self:flex-start; font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--axa-blue);background:rgba(0,0,143,.08); padding:4px 10px;border-radius:99px;margin-bottom:10px } .cover-list{list-style:none;margin:var(--s3) 0 0;font-size:.9375rem} .cover-list li{ position:relative;padding-left:24px;margin-bottom:9px;color:#33334D;line-height:1.45 } .cover-list li::before{ content:"";position:absolute;left:2px;top:7px; width:9px;height:5px;border-left:2px solid var(--axa-blue); border-bottom:2px solid var(--axa-blue);transform:rotate(-45deg) } .cover-nota{ margin-top:auto;padding-top:var(--s3);font-size:.8125rem;color:var(--muted); border-top:1px solid var(--border) } .cover-nota strong{color:var(--ink)} /* Coberturas adicionales */ .extras{ margin-top:var(--s5);padding:var(--s5); background:var(--surface);border-radius:var(--r2) } .extras-head h3{font-size:1.25rem;margin-bottom:6px} .extras-head p{color:var(--muted);font-size:.9375rem;margin-bottom:var(--s4)} .extras-grid{ display:grid;gap:var(--s3);list-style:none; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) } .extras-grid li{ padding-left:20px;position:relative;line-height:1.45 } .extras-grid li::before{ content:"";position:absolute;left:0;top:9px; width:7px;height:7px;border-radius:50%;background:var(--axa-red) } .extras-grid strong{display:block;font-size:.9375rem;margin-bottom:2px} .extras-grid span{font-size:.8125rem;color:var(--muted)} /* Tipos de unidad */ .unidades{ margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:10px;align-items:center } .unidades-tit{ font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--muted) } .unidades ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none} .unidades li{ font-size:.875rem;font-weight:600;color:var(--axa-blue); background:rgba(0,0,143,.06);padding:6px 13px;border-radius:99px } @media (max-width:600px){ .extras{padding:var(--s4)} }