/*
 * components.css
 * ------------------------------------------------------------
 * Componentes UI reutilizables. Funcionan igual en público
 * y admin. Naming: BEM simple (.bloque__elemento--modificador).
 * ------------------------------------------------------------
 */

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-primary-text);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition);
}

.btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-text);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn--secondary:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

.btn--danger {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn--danger:hover {
    background: var(--color-text);
    color: var(--color-primary-text);
    border-color: var(--color-text);
}

/* ==========================================================
   Forms
   ========================================================== */
.form__field {
    display: block;
    margin: 0 0 var(--space-md);
}

.form__field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23737373' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

.form__submit {
    margin-top: var(--space-lg);
}

.inline-form {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-md);
}

.inline-form select,
.inline-form input {
    width: auto;
    flex: 0 0 auto;
}

/* ==========================================================
   Tables
   ========================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin: 0 0 var(--space-md);
}

.table th,
.table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border-strong);
}

.table tbody tr:hover {
    background: var(--color-bg-hover);
}

.table--striped tbody tr:nth-child(even) {
    background: var(--color-bg-alt);
}

.table--striped tbody tr:nth-child(even):hover {
    background: var(--color-bg-hover);
}

/* ==========================================================
   Alerts
   ========================================================== */
.alert {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-left-color: var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
    font-size: 0.95rem;
}

.alert--error {
    border-left-color: var(--color-text);
    font-weight: 500;
}

.alert--success {
    border-left-color: var(--color-text-muted);
    background: var(--color-bg-hover);
}

/* ==========================================================
   Badges
   ========================================================== */
.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    line-height: 1.4;
    text-transform: lowercase;
}

.badge--solid {
    background: var(--color-text);
    color: var(--color-primary-text);
    border-color: var(--color-text);
}

/* ==========================================================
   Lead form (público)
   ========================================================== */
.lead-form {
    max-width: 520px;
    margin: 0 0 var(--space-lg);
}

/* ==========================================================
   Safe Seguros — Home components
   ========================================================== */
.btn--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 28px;border-radius:4px}
.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn--dark{background:var(--color-navy-dark);border:1px solid var(--color-navy-dark);color:#fff;font-weight:700;padding:14px 24px;border-radius:4px;text-decoration:none}
.btn--dark:hover{background:#000;color:#fff}
.btn--lg{padding:14px 32px;font-size:1rem}
.btn--block{width:100%;display:block;margin-top:10px}

.cards{display:grid;gap:24px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.cards--3,.cards--5{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards--3,.cards--5{grid-template-columns:1fr}}

.card{background:#fff;border-radius:8px;padding:24px;text-align:center;box-shadow:0 2px 10px rgba(14,44,75,.06);transition:transform .2s,box-shadow .2s;border:1px solid var(--color-border)}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(14,44,75,.12)}
.card__media{margin:0 auto 18px;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);border-radius:50%;padding:16px}
.card__media img{max-width:100%;max-height:100%;filter:brightness(0) invert(1)}
.card h3{color:var(--color-navy);margin:0 0 8px;font-size:1.1rem}
.card p{color:var(--color-text-muted);margin:0;font-size:.95rem}
.card--compact{padding:20px 14px}
.card--compact img{width:48px;height:48px;margin:0 auto 10px;object-fit:contain}
.card--compact h3{font-size:.95rem;margin:0}
.card--clickable{
  background:#fff; border:1px solid var(--color-border);
  cursor:pointer; font:inherit; position:relative;
  display:flex; flex-direction:column; align-items:center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card--clickable:hover{
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: 0 16px 34px rgba(245,130,32,.18);
}
.card--clickable .card__cta{
  margin-top:10px; font-size:12px; font-weight:700;
  color: var(--color-primary); letter-spacing:.04em;
  opacity:0; transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}
.card--clickable:hover .card__cta{ opacity:1; transform:none; }

.team__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 56px;max-width:900px;margin:0 auto}
.team__card{text-align:center;flex:0 0 220px}
.team__card img{width:200px;height:200px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:4px solid var(--color-primary);box-shadow:0 10px 30px rgba(14,44,75,.12);transition:transform .25s ease,box-shadow .25s ease}
.team__card:hover img{transform:translateY(-4px);box-shadow:0 16px 36px rgba(14,44,75,.2)}
.team__card h3{color:var(--color-navy);text-transform:uppercase;letter-spacing:.05em;margin:0 0 4px;font-size:1.05rem}
.team__card p{color:var(--color-primary);font-weight:600;margin:0}
.team__card--no-photo{flex:0 0 260px;padding:28px 22px;background:#fff;border-radius:14px;border:1px solid #e8edf3;box-shadow:0 8px 22px -12px rgba(14,44,75,.18);transition:transform .25s ease,box-shadow .25s ease}
.team__card--no-photo:hover{transform:translateY(-4px);box-shadow:0 16px 32px -10px rgba(14,44,75,.22)}
.team__card--no-photo h3{font-size:1rem;margin-bottom:6px}
@media(max-width:720px){.team__grid{gap:30px 24px}.team__card{flex:0 0 160px}.team__card img{width:160px;height:160px}.team__card--no-photo{flex:0 0 240px}}

/* ==========================================================
   Seguros Personales — sección con cards modales
   ========================================================== */
.personales{background:#fff}
.personales__head{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:center;margin-bottom:50px}
.personales__title{color:var(--color-navy);font-size:2.6rem;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;margin:0;font-weight:800;position:relative}
.personales__title::after{content:"";position:absolute;top:10px;bottom:10px;right:-25px;width:3px;background:var(--color-primary);border-radius:2px}
.personales__lead{color:var(--color-text);font-size:1.05rem;line-height:1.6;margin:0;max-width:640px}
@media(max-width:900px){.personales__head{grid-template-columns:1fr;gap:20px}.personales__title::after{display:none}}

.personales__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.personales__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.personales__grid{grid-template-columns:1fr}}

.pcard{
    position:relative;border:0;padding:0;background:none;cursor:pointer;
    aspect-ratio:5/5;border-radius:18px;overflow:hidden;
    box-shadow:0 12px 28px -8px rgba(14,44,75,.18), 0 2px 4px rgba(14,44,75,.06);
    transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s cubic-bezier(.2,.8,.2,1);
    opacity:0;animation:pcardIn .8s cubic-bezier(.2,.8,.2,1) both;
    text-align:left;font-family:inherit;
    isolation:isolate;
    will-change:transform;
}
.pcard:hover{
    transform:translateY(-12px) scale(1.02);
    box-shadow:0 32px 56px -16px rgba(14,44,75,.32), 0 8px 16px -4px rgba(14,44,75,.14);
}
.pcard:active{ transform:translateY(-6px) scale(1.005); transition-duration:.15s; }
.pcard:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--color-primary), 0 32px 56px -16px rgba(14,44,75,.32); }

/* Borde luminoso interno que aparece al hover */
.pcard::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.06);
    pointer-events:none;z-index:5;
    transition:box-shadow .5s ease;
}
.pcard:hover::before{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.16);
}

/* Brillo diagonal que cruza la card al hover */
.pcard::after{
    content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
    transform:skewX(-18deg);z-index:4;pointer-events:none;opacity:0;
    transition:opacity .3s;
}
.pcard:hover::after{
    opacity:1;
    animation:pcardShine 1.1s cubic-bezier(.2,.8,.2,1) .1s;
}
@keyframes pcardShine{
    from{ left:-120%; }
    to{ left:140%; }
}
@keyframes pcardIn{ from{ opacity:0;transform:translateY(30px); } to{ opacity:1;transform:none; } }

/* Fondo de la card con gradiente animado */
.pcard__bg{
    position:absolute;inset:0;z-index:0;
    transition:transform 1.2s cubic-bezier(.2,.8,.2,1), filter .55s ease;
    background-size:140% 140%;
    background-position:50% 0%;
}
.pcard:hover .pcard__bg{
    transform:scale(1.08);
    background-position:50% 100%;
    filter:saturate(1.1) brightness(1.05);
}
.pcard__bg--hogar       { background:linear-gradient(160deg,#1c4b7a 0%,#0e2c4b 60%,#091e36 100%); }
.pcard__bg--vehiculo    { background:linear-gradient(160deg,#3a5a82 0%,#16395f 55%,#0a2238 100%); }
.pcard__bg--salud       { background:linear-gradient(160deg,#ffaa54 0%,var(--color-primary) 60%,#d96617 100%); }
.pcard__bg--viajes      { background:linear-gradient(160deg,#3a78b3 0%,#1d4a78 55%,#0a2238 100%); }
.pcard__bg--accidentes  { background:linear-gradient(160deg,#ffaa54 0%,var(--color-primary) 60%,#d96617 100%); }
.pcard__bg--responsabilidad { background:linear-gradient(160deg,#1c4b7a 0%,#0e2c4b 60%,#091e36 100%); }
.pcard__bg--pasajeros   { background:linear-gradient(160deg,#3a5a82 0%,#16395f 55%,#0a2238 100%); }
.pcard__bg--equipos     { background:linear-gradient(160deg,#3a78b3 0%,#1d4a78 55%,#0a2238 100%); }

/* Círculos decorativos que respiran */
.pcard__bg::after{
    content:"";position:absolute;right:-80px;bottom:-80px;
    width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle at center, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
    transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.pcard__bg::before{
    content:"";position:absolute;left:-50px;top:-50px;
    width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle at center, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%);
    transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.pcard:hover .pcard__bg::after{ transform:translate(-30px,-30px) scale(1.15); }
.pcard:hover .pcard__bg::before{ transform:translate(20px,20px) scale(1.2); }

/* Capa con contenidos */
.pcard__body, .pcard__overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;
    padding:28px 24px;color:#fff;z-index:2;
}

.pcard__body{ justify-content:flex-end; transition:opacity .35s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pcard__body{ opacity:0; transform:translateY(-12px); transition-duration:.3s; }

.pcard__icon{
    width:64px;height:64px;border-radius:50%;
    background:rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;color:#fff;
    margin:0 0 auto 0;align-self:flex-start;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:transform .55s cubic-bezier(.2,.8,.2,1), background .35s, box-shadow .35s;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.25);
}
.pcard:hover .pcard__icon{
    transform:rotate(-8deg) scale(1.08) translateY(-4px);
    background:rgba(255,255,255,.25);
    box-shadow:0 12px 32px -8px rgba(0,0,0,.4);
}
.pcard:hover .pcard__icon--big{
    transform:none;
    background:rgba(255,255,255,.28);
}
.pcard__title{
    font-size:1.4rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.02em;margin:14px 0 4px;display:block;
    text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.pcard__tag{ font-size:.88rem;opacity:.92;display:block;font-weight:500; }

/* Overlay con info detallada y CTA */
.pcard__overlay{
    background:linear-gradient(180deg,
        var(--color-primary) 0%,
        #e06f10 60%,
        #c45a08 100%
    );
    opacity:0;transform:translateY(40%);
    transition:opacity .4s ease, transform .55s cubic-bezier(.2,.8,.2,1);
    justify-content:center;text-align:center;align-items:center;
}
.pcard:hover .pcard__overlay,
.pcard:focus-visible .pcard__overlay{
    opacity:1;transform:translateY(0);
}
.pcard__overlay > *{
    opacity:0;transform:translateY(16px);
    transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.pcard:hover .pcard__overlay > *,
.pcard:focus-visible .pcard__overlay > *{
    opacity:1;transform:translateY(0);
}
.pcard:hover .pcard__overlay > :nth-child(1){ transition-delay:.1s; }
.pcard:hover .pcard__overlay > :nth-child(2){ transition-delay:.16s; }
.pcard:hover .pcard__overlay > :nth-child(3){ transition-delay:.22s; }
.pcard:hover .pcard__overlay > :nth-child(4){ transition-delay:.28s; }

.pcard__icon--big{
    width:72px;height:72px;
    background:rgba(255,255,255,.28);
    align-self:center;margin:0 0 14px;
    box-shadow:0 10px 24px -10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.22);
}
.pcard__overlay .pcard__title{ text-align:center;text-shadow:none;font-size:1.3rem; }
.pcard__desc{
    font-size:.92rem;line-height:1.45;margin:6px 0 18px;max-width:220px;
    color:rgba(255,255,255,.96);
}
.pcard__cta{
    display:inline-flex;align-items:center;gap:6px;
    padding:11px 22px;background:#fff;color:var(--color-primary);
    border-radius:999px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;font-size:.82rem;
    box-shadow:0 8px 20px -6px rgba(0,0,0,.25);
    transition:transform .25s ease, box-shadow .25s ease;
}
.pcard:hover .pcard__cta{
    transform:translateY(-1px);
    box-shadow:0 12px 28px -6px rgba(0,0,0,.32);
}

/* Card "salud" (naranja) — color tweaks para contraste */
.pcard__bg--salud + .pcard__body .pcard__icon,
.pcard__bg--accidentes + .pcard__body .pcard__icon{
    background:rgba(255,255,255,.22);
    box-shadow:0 8px 24px -8px rgba(184,80,8,.4);
}
.pcard__bg--salud ~ .pcard__overlay,
.pcard__bg--accidentes ~ .pcard__overlay{
    background:linear-gradient(180deg,
        var(--color-navy) 0%,
        #0a2038 60%,
        #081a2e 100%
    );
}
.pcard__bg--salud ~ .pcard__overlay .pcard__cta,
.pcard__bg--accidentes ~ .pcard__overlay .pcard__cta{
    color:var(--color-navy);
}

@media (prefers-reduced-motion: reduce){
    .pcard, .pcard__bg, .pcard__body, .pcard__overlay,
    .pcard__icon, .pcard__bg::before, .pcard__bg::after,
    .pcard__overlay > *{
        transition-duration:.01s !important;
        animation-duration:.01s !important;
    }
    .pcard::after{ display:none; }
}

/* ==========================================================
   Modal
   ========================================================== */
.modal{position:fixed;inset:0;z-index:1000;display:none}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,20,35,.65);backdrop-filter:blur(6px);animation:modalFade .25s ease both}
.modal__panel{position:relative;max-width:620px;margin:5vh auto;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:modalIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

.modal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .2s}
.modal__close:hover{background:rgba(255,255,255,.35)}

.modal__hero{display:flex;align-items:center;gap:18px;padding:28px 32px;color:#fff;background:linear-gradient(135deg,var(--color-navy) 0%,#1c4b7a 100%)}
.modal__hero--hogar{background:linear-gradient(135deg,#0e2c4b,#1c4b7a)}
.modal__hero--vehiculo{background:linear-gradient(135deg,#0e2c4b,#34547a)}
.modal__hero--salud{background:linear-gradient(135deg,var(--color-primary),#ff9a3c)}
.modal__hero--viajes{background:linear-gradient(135deg,#0e2c4b,#2a6aa1)}
.modal__hero--accidentes{background:linear-gradient(135deg,var(--color-primary),#ff9a3c)}
.modal__hero--responsabilidad{background:linear-gradient(135deg,#0e2c4b,#1c4b7a)}
.modal__hero--pasajeros{background:linear-gradient(135deg,#0e2c4b,#34547a)}
.modal__hero--equipos{background:linear-gradient(135deg,#0e2c4b,#2a6aa1)}
.modal__ic{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.modal__hero h3{color:#fff;margin:0 0 4px;font-size:1.3rem}
.modal__hero p{margin:0;opacity:.9;font-size:.92rem}

.modal__form{padding:28px 32px 32px;display:grid;gap:14px}
.modal__form label{display:block;font-size:.85rem;font-weight:600;color:var(--color-navy);margin:0}
.modal__form input,.modal__form select{width:100%;margin-top:6px}
.modal__form input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(245,130,32,.15)}
.modal__row--2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.modal__row--2{grid-template-columns:1fr}.modal__panel{margin:0;min-height:100vh;border-radius:0}}
.modal__small{text-align:center;color:var(--color-text-muted);font-size:.82rem;margin:6px 0 0}

/* Toast (preview) */
.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:var(--color-navy);color:#fff;padding:14px 22px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:all .3s ease;z-index:1200;font-weight:600}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

.lead-form__row{margin-bottom:14px}
.lead-form__row--2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-form label{display:block;font-size:.85rem;font-weight:500;margin-bottom:4px;color:inherit}
.lead-form input,.lead-form select,.lead-form textarea{background:#fff;color:var(--color-text);border-radius:4px;border:0}
.quote .lead-form label{color:#fff}
@media(max-width:560px){.lead-form__row--2{grid-template-columns:1fr}}


.lead-form__field {
    margin: 0 0 var(--space-md);
}

.lead-form__field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.lead-form__submit {
    margin-top: var(--space-lg);
}

.lead-form__field input,
.lead-form__field textarea {
    width: 100%;
}

/* ==========================================================
   Quote form — "¿Estás listo para tomar un seguro?"
   Override del lead-form genérico para que se vea moderno
   sobre fondo navy.
   ========================================================== */
.quote{
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 60%, #143a66 100%);
  position: relative;
  overflow: hidden;
}
.quote::before{
  content:""; position:absolute;
  right:-140px; top:-140px; width:420px; height:420px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(245,130,32,.22), transparent 70%);
  pointer-events:none;
}
.quote__inner{ position:relative; z-index:1; }

.quote .section__title{ margin-bottom: 8px; }
.quote .section__title span{ color:#fff; }
.quote .section__title::after{ background: var(--color-primary); }
.quote__form > p{ color: rgba(255,255,255,.8); margin: 6px 0 22px; font-size:15px; }

.quote .lead-form{
  display:flex; flex-direction:column; gap:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 22px;
  backdrop-filter: blur(6px);
}
.quote .lead-form__row{ margin:0; }
.quote .lead-form__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.quote .lead-form label{
  display:block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 0 0 6px;
}
.quote .lead-form input,
.quote .lead-form select,
.quote .lead-form textarea{
  width:100%;
  padding: 13px 14px;
  font: inherit;
  color:#fff;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 8px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.quote .lead-form input::placeholder,
.quote .lead-form textarea::placeholder{ color: rgba(255,255,255,.5); }
.quote .lead-form select{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white' opacity='0.7'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.quote .lead-form select option{ color: var(--color-navy); background:#fff; }
.quote .lead-form input:focus,
.quote .lead-form select:focus,
.quote .lead-form textarea:focus{
  outline:none;
  border-color: var(--color-primary);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 4px rgba(245,130,32,.22);
}

.quote .lead-form .btn--primary{
  margin-top: 4px;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 10px 26px rgba(245,130,32,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.quote .lead-form .btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(245,130,32,.5);
}

/* ==========================================================
   Page gallery (público)
   ========================================================== */
.page-gallery__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
.page-gallery__grid--single {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.page-gallery__grid--single .page-gallery__featured img {
    aspect-ratio: 4/5;
    max-height: 460px;
}
@media (max-width: 820px) {
    .page-gallery__grid { grid-template-columns: 1fr; }
}

.page-gallery__featured {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 8px 28px -14px rgba(0,0,0,0.25);
}
.page-gallery__featured img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}
.page-gallery__featured figcaption {
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    background: #fff;
}

.page-gallery__thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    align-content: start;
}
.page-gallery__thumbs:has(.page-gallery__thumb:nth-child(5)) {
    grid-template-columns: repeat(3, 1fr);
}

.page-gallery__thumb {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 1;
    box-shadow: 0 4px 14px -8px rgba(0,0,0,0.2);
}
.page-gallery__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms ease;
}
.page-gallery__thumb:hover img { transform: scale(1.06); }

/* ==========================================================
   WhatsApp FAB (botón flotante)
   ========================================================== */
.wa-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    display: grid;
    place-items: center;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.42), 0 4px 10px rgba(0,0,0,0.12);
    z-index: 60;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.wa-fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55), 0 6px 14px rgba(0,0,0,0.18);
    color: #fff;
}
.wa-fab:active { transform: translateY(0) scale(0.98); }
.wa-fab__icon { display: block; }

.wa-fab__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.55);
    animation: wa-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);    opacity: 0.6; }
    70%  { transform: scale(1.55); opacity: 0;   }
    100% { transform: scale(1.55); opacity: 0;   }
}

@media (max-width: 540px) {
    .wa-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
    .wa-fab__icon { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-fab__pulse { animation: none; opacity: 0; }
}

.team__card-contacts {
    display: inline-flex;
    gap: 8px;
    margin-top: 10px;
}
.team__card-contacts a {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #f5f5f5;
    color: var(--color-navy);
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: background 180ms, color 180ms, transform 180ms;
}
.team__card-contacts a:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}