/* * ============================================================ * sanitas-cotizacion.css * Extraído fielmente de indexVictor.html * Luis Hurtado · Agente Exclusivo Sanitas * * Fuente Google Fonts requerida (incluir en el ): * * * Estructura HTML esperada: * * * *
*
*
*

…

*

Hola, Nombre.
Aquí tienes tu comparativa.

*

…

*
*
🧑 XX años
… *
*
*
*
📋 Resumen de la cotización
*
Póliza recomendada…
… *
*
*
* *
*
⭐ Recomendada
*
Nombre · precio

Tagline

*
* *
* *
*
*
*
…
*

Nombre producto

*

…

*
*
*
€XXX…
*
…
*
Primer recibo: …
*
…
*
*
*
Coberturas principales
*
    *
  • ✓
    …
    • *
*
← solo en .recommended *
💡 Por qué es la mejor opción
*

…

*
*
*
Carencias: …
*
*
* *
*

🔍 Comparativa detallada

*
* * * * * *
…… ⭐
……
*
*
* *
*

¿Por qué te recomendamos X, Nombre?

*

…

*
*
……
*
*

…

*
* *
*

…

*

…

* 💬 Hablar con Luis *
* *

⚖️ …

* *
* ============================================================ */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── BASE ── */ body { font-family: 'DM Sans', -apple-system, sans-serif; background: #eef2f9; color: #1a2b3c; line-height: 1.6; } /* ══════════════════════════════════════════ TOPBAR ══════════════════════════════════════════ */ .topbar { background: white; border-bottom: 1px solid rgba(0,55,120,0.1); padding: 14px 5vw; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 10px rgba(0,40,120,0.08); } .topbar img { height: 42px; display: block; } .topbar-cta { font-size: 0.82rem; color: #0055b8; text-decoration: none; font-weight: 600; background: #e8f2ff; padding: 8px 20px; border-radius: 50px; transition: background 0.2s; white-space: nowrap; } .topbar-cta:hover { background: #cce0ff; } /* ══════════════════════════════════════════ HERO ══════════════════════════════════════════ */ .hero { background: linear-gradient(140deg, #001d52 0%, #003d8a 40%, #0062c8 75%, #0080e0 100%); padding: 64px 5vw 60px; color: white; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -120px; right: -140px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(100,180,255,0.12) 0%, transparent 70%); } .hero::after { content: ''; position: absolute; bottom: -80px; left: 10%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(0,220,160,0.08) 0%, transparent 70%); } .hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .hero-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .hero-eyebrow::before { content: ''; display: inline-block; width: 28px; height: 2px; background: rgba(255,255,255,0.4); } .hero h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.5px; } .hero h1 em { font-style: italic; color: #7dd4ff; } .hero-sub { font-size: 1rem; color: rgba(255,255,255,0.75); max-width: 560px; line-height: 1.7; margin-bottom: 28px; } .hero-pills { display: flex; flex-wrap: wrap; gap: 10px; } .hero-pill { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; padding: 6px 16px; font-size: 0.8rem; color: rgba(255,255,255,0.88); display: flex; align-items: center; gap: 7px; } .hero-pill span { font-weight: 600; } /* Hero profile card (columna derecha) */ .hero-profile { background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 24px 26px; min-width: 240px; flex-shrink: 0; } .hero-profile-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.15); } .hero-profile-item { margin-bottom: 11px; font-size: 0.85rem; } .hero-profile-item b { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 2px; } .hero-profile-item strong { color: white; } /* ══════════════════════════════════════════ WINNER BANNER ══════════════════════════════════════════ */ .winner-banner { background: linear-gradient(90deg, #0f5c32 0%, #1d8a4e 50%, #27a85f 100%); padding: 18px 5vw; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: white; } .winner-banner .badge { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; padding: 5px 16px; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; } .winner-banner strong { font-size: 1rem; font-weight: 600; } .winner-banner p { font-size: 0.85rem; color: rgba(255,255,255,0.82); } /* ══════════════════════════════════════════ CONTAINER ══════════════════════════════════════════ */ .container { max-width: 1160px; margin: 0 auto; padding: 40px 4vw 64px; } /* ══════════════════════════════════════════ CARDS ROW ══════════════════════════════════════════ */ .cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; align-items: start; } .policy-card { background: white; border-radius: 20px; border: 2px solid #dde6f5; overflow: hidden; box-shadow: 0 2px 16px rgba(0,55,180,0.07); display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; } .policy-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,55,180,0.13); } .policy-card.recommended { border-color: #18a05a; box-shadow: 0 6px 28px rgba(24,160,90,0.2); transform: translateY(-6px); } .policy-card.recommended:hover { transform: translateY(-10px); box-shadow: 0 16px 44px rgba(24,160,90,0.25); } /* ── CARD TOP ── */ .card-top { padding: 22px 22px 16px; border-bottom: 1px solid #f0f5fb; } .card-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; margin-bottom: 12px; } .badge-blue { background: #e8f2ff; color: #0055b8; } .badge-green { background: #e2f7ec; color: #166b3c; } .badge-gold { background: #fdf3e0; color: #8a5e0a; } .card-top h3 { font-family: 'DM Serif Display', serif; font-size: 1.25rem; color: #002d6e; line-height: 1.2; margin-bottom: 6px; } .card-top .tagline { font-size: 0.8rem; color: #5a7090; font-style: italic; } /* ── PRICE BLOCK ── */ .price-block { padding: 18px 22px; background: #f6f9fd; border-bottom: 1px solid #eef2f8; text-align: center; } .price-block.green-bg { background: #f0fbf5; } .price-number { font-family: 'DM Serif Display', serif; font-size: 2.6rem; color: #002d6e; line-height: 1; } .price-number sup { font-size: 1.2rem; vertical-align: super; } .price-block.green-bg .price-number { color: #0f5c32; } .price-unit { font-size: 0.85rem; color: #6080a0; margin-top: 4px; } .price-note { font-size: 0.74rem; color: #8a9ab0; margin-top: 3px; } .copago-tag { display: inline-block; margin-top: 10px; font-size: 0.74rem; font-weight: 600; padding: 4px 14px; border-radius: 50px; } .tag-none { background: #e2f7ec; color: #166b3c; } .tag-low { background: #fff4e0; color: #9a5000; } .tag-medium { background: #fff0f0; color: #a02020; } /* ── CARD BODY ── */ .card-body { padding: 18px 22px; flex: 1; } .cov-list { list-style: none; } .cov-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; margin-bottom: 9px; line-height: 1.4; } .cov-list li .icon { width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.64rem; flex-shrink: 0; margin-top: 1px; font-weight: 700; } .icon-check { background: #e2f7ec; color: #166b3c; } .icon-check-blue { background: #e8f2ff; color: #0055b8; } .icon-minus { background: #f0f4fa; color: #8a9ab0; } .cov-section-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9aabbd; margin: 16px 0 9px; padding-top: 12px; border-top: 1px solid #f0f4fa; } /* Why box (dentro de .recommended) */ .why-box { background: #f0fbf5; border-radius: 12px; padding: 13px 15px; margin-top: 16px; } .why-box-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #166b3c; margin-bottom: 7px; } .why-box p { font-size: 0.84rem; line-height: 1.55; color: #1a3d2b; } /* ── CARENCIAS ── */ .carencias { padding: 12px 22px; background: #fafbfc; border-top: 1px solid #eef2f8; font-size: 0.75rem; color: #6b7f96; } .carencias b { color: #4a6080; } /* ── CTA DENTRO DE TARJETA (opcional, comentado por defecto) ── */ .card-cta { padding: 16px 22px; border-top: 1px solid #eef2f8; } .card-cta a { display: block; text-align: center; background: #0055b8; color: white; text-decoration: none; border-radius: 50px; padding: 11px 18px; font-weight: 600; font-size: 0.86rem; transition: filter 0.2s; } .policy-card.recommended .card-cta a { background: #18a05a; } .card-cta a:hover { filter: brightness(1.1); } /* ══════════════════════════════════════════ COMPARISON TABLE ══════════════════════════════════════════ */ .comp-section { margin-bottom: 40px; } .comp-section h2 { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: #002d6e; margin-bottom: 18px; } .comp-wrap { background: white; border-radius: 18px; border: 1px solid #dde6f5; overflow: hidden; box-shadow: 0 2px 14px rgba(0,55,180,0.06); } table { width: 100%; border-collapse: collapse; } thead th { background: #002d6e; color: white; padding: 14px 16px; font-size: 0.83rem; font-weight: 600; text-align: left; } thead th.rec { background: #0f5c32; } tbody td { padding: 12px 16px; font-size: 0.86rem; border-bottom: 1px solid #f0f5fb; vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:nth-child(even) td { background: #f8fafd; } tbody tr:nth-child(even) td.rec { background: #f0fbf5; } td.rec { background: #f5fdf8; font-weight: 600; color: #0f5c32; } .t-check { color: #166b3c; font-weight: 700; } .t-cross { color: #cc2200; font-weight: 700; } .t-price { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: #002d6e; } td.rec .t-price { color: #0f5c32; } /* ══════════════════════════════════════════ REC BOX (justificación recomendada) ══════════════════════════════════════════ */ .rec-box { background: linear-gradient(140deg, #0d4f2c 0%, #1a7a45 60%, #27a85f 100%); border-radius: 20px; padding: 34px 32px; color: white; margin-bottom: 40px; } .rec-box h2 { font-family: 'DM Serif Display', serif; font-size: 1.6rem; margin-bottom: 14px; font-weight: 400; } .rec-box > p { font-size: 0.94rem; color: rgba(255,255,255,0.82); line-height: 1.7; margin-bottom: 10px; } .rec-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; } .rec-reason { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; padding: 14px 18px; font-size: 0.88rem; line-height: 1.55; } .rec-reason b { display: block; font-size: 0.8rem; margin-bottom: 5px; } /* ══════════════════════════════════════════ CLOSING ══════════════════════════════════════════ */ .closing { background: white; border-radius: 20px; border: 1px solid #dde6f5; padding: 36px 30px; text-align: center; box-shadow: 0 2px 14px rgba(0,55,180,0.06); margin-bottom: 24px; } .closing h3 { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: #002d6e; margin-bottom: 12px; } .closing p { font-size: 0.93rem; color: #4a6080; max-width: 480px; margin: 0 auto 24px; } .cta-btn { display: inline-flex; align-items: center; gap: 10px; background: #0055b8; color: white; text-decoration: none; border-radius: 50px; padding: 15px 32px; font-weight: 700; font-size: 0.97rem; box-shadow: 0 4px 18px rgba(0,85,184,0.28); transition: transform 0.2s, box-shadow 0.2s; } .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,85,184,0.32); } /* ══════════════════════════════════════════ DISCLAIMER ══════════════════════════════════════════ */ .disclaimer { font-size: 0.76rem; color: #9aabbd; text-align: center; padding: 0 10px 12px; line-height: 1.5; } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 820px) { .hero-inner { grid-template-columns: 1fr; } .hero-profile { min-width: unset; } .cards-row { grid-template-columns: 1fr; } .policy-card.recommended { transform: none; } .rec-reasons { grid-template-columns: 1fr; } table { font-size: 0.79rem; } thead th, tbody td { padding: 9px 10px; } }