/* =========================================================
   G2 Agentes – capa visual (1.1): fotos en marcos, color y movimiento.
   Se carga después de theme.css. Todo respeta modo oscuro y reduce-motion.
   ========================================================= */

:root {
	--stat: #4dac27;
	--c-auto: #f2674d;
	--c-gmm: #14a59d;
	--c-vida: #4b7bec;
	--c-empresa: #8a5cf5;
	--c-casa: #e89a00;
	--c-viaje: #1ea0e6;
	--frame-shadow: 0 30px 60px -28px rgba(7, 26, 38, .6);
}
html[data-theme="dark"] { --stat: var(--gold); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --stat: var(--gold); } }

/* ---------- Etiquetas pequeñas sobre títulos ---------- */
.g2-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 1.1em; padding: .5em 1em;
	border-radius: 18px; font: 700 .8rem/1.25 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
	color: var(--gold); background: rgba(77, 172, 39, .12); border: 1px solid rgba(77, 172, 39, .38);
}
.g2-eyebrow--dark { color: var(--link); background: color-mix(in srgb, var(--link) 10%, transparent); border-color: color-mix(in srgb, var(--link) 30%, transparent); }

/* ---------- Marcos de fotografía ---------- */
.g2-ph { position: relative; margin: 0; overflow: hidden; background: linear-gradient(150deg, var(--ink-2), var(--ink)); color: var(--on-ink); isolation: isolate; }
.g2-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g2-ph__art { position: absolute; inset: 0; z-index: 0; }
.g2-ph__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g2-ph__icon { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .5); }
.g2-ph__icon .g2-ic { stroke-width: 1.2; }
.g2-ph__edit {
	position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap;
	padding: .45em 1em; border-radius: 999px; background: var(--gold); color: #10242f; font: 700 .78rem/1 var(--font-body); text-decoration: none;
}
.g2-ph--arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; box-shadow: 14px 14px 0 0 color-mix(in srgb, var(--gold) 90%, transparent); }
.g2-ph--round { aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--card); box-shadow: var(--frame-shadow); }
.g2-ph--soft { aspect-ratio: 4 / 3; border-radius: 24px; box-shadow: var(--frame-shadow); }
.g2-ph--wide { aspect-ratio: 3 / 2; border-radius: 0; }
.g2-ph--tilt { aspect-ratio: 4 / 5; border: 10px solid #fff; border-bottom-width: 40px; border-radius: 6px; transform: rotate(-3deg); box-shadow: var(--frame-shadow); background-clip: padding-box; }
.g2-ph--tilt::after { content: ""; position: absolute; top: -18px; left: 50%; width: 90px; height: 28px; margin-left: -45px; background: rgba(77, 172, 39, .85); transform: rotate(3deg); z-index: 2; }

/* ---------- Portada ---------- */
.g2-hero { background: radial-gradient(900px 520px at 92% 0%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 65%), linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); padding-block: clamp(48px, 7vw, 100px) clamp(56px, 8vw, 120px); }
.g2-hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.g2-hero__blob--a { width: 380px; height: 380px; right: -80px; top: 60px; background: var(--gold); opacity: .18; }
.g2-hero__blob--b { width: 320px; height: 320px; left: -120px; bottom: -80px; background: var(--gold); opacity: .18; }
.g2-hero__grid { align-items: center; }
@media (min-width: 980px) { .g2-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); } }
.g2-hero__art { position: relative; width: 100%; max-width: 500px; margin-inline: auto; padding: 18px 26px 40px 46px; }
.g2-hero__main { width: min(100%, 400px); margin-left: auto; }
.g2-hero__small { position: absolute; left: 0; bottom: 6%; width: 38%; max-width: 190px; z-index: 2; }
.g2-float {
	position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px;
	background: var(--card); color: var(--text); box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .55); font: 600 .9rem/1.2 var(--font-body);
}
.g2-float--status { top: 8%; left: 0; }
.g2-float--aseg { right: -6px; bottom: 16%; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; }
.g2-float--aseg strong { font: 800 1.9rem/1 var(--font-display); color: var(--stat); }
.g2-float--aseg span { font-size: .78rem; color: var(--muted); max-width: 14ch; }
.g2-float--city { right: 18px; top: 0; background: var(--gold); color: #10242f; }
.g2-sticker {
	position: absolute; z-index: 3; left: 12%; bottom: -6px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
	background: var(--gold); color: #10242f; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); animation: g2-bob 5s ease-in-out infinite;
}
@keyframes g2-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@media (max-width: 520px) {
	.g2-hero__art { padding: 14px 14px 36px 24px; }
	.g2-float--city { display: none; }
	.g2-sticker { width: 60px; height: 60px; }
}

/* ---------- Aseguradoras en cinta continua ---------- */
.g2-insurers { padding-block: 22px 26px; overflow: hidden; }
.g2-insurers__label { text-align: center; margin-bottom: 14px; }
.g2-marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.g2-marquee__track { flex: none; flex-wrap: nowrap !important; min-width: 100%; justify-content: space-around; gap: 0 56px !important; padding-inline: 28px; animation: g2-marq 45s linear infinite; }
.g2-marquee:hover .g2-marquee__track { animation-play-state: paused; }
.g2-marquee__track li { white-space: nowrap; }
@keyframes g2-marq { to { transform: translateX(-100%); } }

/* ---------- Ramos: tarjetas con foto ---------- */
.g2-ramogrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.g2-ramocard { --acc: var(--link); }
.g2-ramocard--auto { --acc: var(--c-auto); } .g2-ramocard--gmm { --acc: var(--c-gmm); } .g2-ramocard--vida { --acc: var(--c-vida); }
.g2-ramocard--empresa { --acc: var(--c-empresa); } .g2-ramocard--casa { --acc: var(--c-casa); } .g2-ramocard--viaje { --acc: var(--c-viaje); }
.g2-ramocard a {
	display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
	color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative;
}
.g2-ramocard a:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -22px color-mix(in srgb, var(--acc) 70%, #000); border-color: var(--acc); color: var(--text); }
.g2-ramocard .g2-ph { background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 35%, var(--ink))); }
.g2-ramocard .g2-ph__icon { color: rgba(255, 255, 255, .55); }
.g2-ramocard .g2-ph img { transition: transform .5s; }
.g2-ramocard a:hover .g2-ph img { transform: scale(1.05); }
.g2-ramocard__media { position: relative; display: block; }
.g2-ramocard__ic { position: absolute; left: 20px; bottom: -27px; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--acc); color: #fff; box-shadow: 0 10px 20px -8px var(--acc); z-index: 4; }
.g2-ramocard__txt { display: grid; gap: 6px; padding: 38px 22px 8px; }
.g2-ramocard__txt strong { font: 700 1.3rem/1.15 var(--font-display); letter-spacing: -.01em; }
.g2-ramocard__txt span { color: var(--muted); font-size: .98rem; }
.g2-ramocard__go { margin-top: auto; padding: 8px 22px 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--acc); }
html[data-theme="dark"] .g2-ramocard__go { color: color-mix(in srgb, var(--acc) 55%, #fff); }
.g2-ramocard a:hover .g2-ramocard__go .g2-ic { transform: translateX(4px); }
.g2-ramocard__go .g2-ic { transition: transform .2s; }

/* ---------- Cotizador sobre fondo de marca ---------- */
.g2-cotiza { background: radial-gradient(900px 500px at 0% 0%, color-mix(in srgb, var(--gold) 22%, var(--ink)) 0%, transparent 60%), linear-gradient(160deg, var(--ink-2), var(--ink)); color: var(--on-ink); position: relative; overflow: clip; }
.g2-cotiza .g2-h2 { color: #fff; }
.g2-cotiza .g2-sub { color: var(--on-ink-muted); }
.g2-cotiza__grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .g2-cotiza__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .g2-cotiza__side { position: sticky; top: 112px; } }
.g2-cotiza__side .g2-ph--tilt { width: min(78%, 300px); margin: 36px 0 0 14px; }
@media (max-width: 979px) { .g2-cotiza__side .g2-ph--tilt { display: none; } }

/* ---------- Quiénes somos ---------- */
.g2-about__grid { display: grid; gap: clamp(32px, 6vw, 80px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .g2-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.g2-about__mosaic { display: grid; gap: 18px; grid-template-columns: 1.05fr .95fr; grid-template-areas: "a b" "a c"; align-items: center; width: 100%; max-width: 560px; margin-inline: auto; padding: 0 14px 14px 0; }
.g2-about__a { grid-area: a; }
.g2-about__b { grid-area: b; }
.g2-about__c { grid-area: c; width: 72%; justify-self: end; }
.g2-stats { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 36px; }
.g2-stats li { display: grid; }
.g2-stats strong { font: 800 clamp(2.2rem, 4vw, 3rem)/1 var(--font-display); color: var(--stat); letter-spacing: -.03em; }
.g2-stats span { color: var(--muted); font-weight: 600; }

/* ---------- Agentes ---------- */
.g2-agentgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 26px; }
.g2-agent { border-radius: 26px; padding: 0; transition: transform .2s, box-shadow .2s; }
.g2-agent:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.g2-agent__photo { aspect-ratio: auto; background: none; padding: 22px 22px 6px; position: relative; display: block; }
.g2-agent .g2-ph--arch { box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--gold) 90%, transparent); }
.g2-agent__tag { position: absolute; left: 36px; bottom: 22px; z-index: 3; display: inline-flex; gap: 5px; align-items: center; padding: .4em .85em; border-radius: 999px; background: var(--gold); color: #10242f; font: 700 .78rem/1 var(--font-body); }
.g2-agent__body { padding: 16px 22px 24px; }
.g2-agent__body h3 { font-size: 1.4rem; }
.g2-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px; }
.g2-badges li { padding: .32em .75em; border-radius: 999px; font: 700 .76rem/1.1 var(--font-body); background: color-mix(in srgb, var(--gold) 26%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); color: var(--text); }
.g2-agent__cta { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.g2-btn--sm { min-height: 40px; padding: .5em 1.1em; font-size: .92rem; }
.g2-iconlink { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; flex: none; transition: transform .15s; }
.g2-iconlink:hover { transform: scale(1.08); color: #fff; }
.g2-profile__photo { background: none; aspect-ratio: auto; overflow: visible; max-width: 380px; padding: 0 14px 14px 0; }
.g2-profile__photo .g2-ph { width: 100%; }
.g2-agentforms .g2-sub { margin-bottom: 24px; }

/* ---------- Pasos ---------- */
.g2-pasos { background: var(--card); border-block: 1px solid var(--line); }
.g2-steps li { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 92px 26px 26px; }
.g2-steps li::before { top: 22px; left: 26px; width: 54px; height: 54px; font-size: 1.4rem; background: var(--gold); color: #10242f; border-radius: 16px; transform: rotate(-6deg); }
html[data-theme="dark"] .g2-steps li::before { background: var(--gold); }
.g2-steps li::after { display: none; }

/* ---------- Siniestros ---------- */
.g2-siniestro { background: linear-gradient(150deg, var(--ink-2), var(--ink)); }
.g2-siniestro__side { display: grid; gap: 16px; }
.g2-siniestro__photo { aspect-ratio: 16 / 9; }

/* ---------- Calculadoras ---------- */
.g2-toolgrid li:nth-child(6n+1) { --acc: var(--c-auto); } .g2-toolgrid li:nth-child(6n+2) { --acc: var(--c-gmm); } .g2-toolgrid li:nth-child(6n+3) { --acc: var(--c-vida); }
.g2-toolgrid li:nth-child(6n+4) { --acc: var(--c-empresa); } .g2-toolgrid li:nth-child(6n+5) { --acc: var(--c-casa); } .g2-toolgrid li:nth-child(6n) { --acc: var(--c-viaje); }
.g2-toolgrid a { border-radius: 18px; padding: 14px 16px; font-weight: 600; justify-content: space-between; }
.g2-toolgrid a > span:nth-child(2) { flex: 1; }
.g2-toolgrid__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--acc, var(--link)); color: #fff; flex: none; }
.g2-toolgrid .g2-toolgrid__ic .g2-ic { color: #fff; }
.g2-toolgrid a:hover { border-color: var(--acc, var(--link)); }

/* ---------- Banda de videollamada con foto ---------- */
.g2-video { position: relative; overflow: clip; background: linear-gradient(120deg, var(--ink), var(--ink-2)); }
.g2-video__bg { position: absolute; inset: 0; }
.g2-video__bg img { width: 100%; height: 100%; object-fit: cover; }
.g2-video__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 20, 28, .92), rgba(6, 20, 28, .55)); }
.g2-video__in { position: relative; z-index: 1; }

/* ---------- Invitación a agentes (promotoría) ---------- */
.g2-promo { background: linear-gradient(115deg, var(--gold), #ffe08a); color: #10242f; padding-block: clamp(48px, 7vw, 88px); overflow: visible; }
.g2-promo__in { display: grid; gap: 36px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .g2-promo__in { grid-template-columns: minmax(0, 1fr) 300px; } .g2-promo__photo { margin-block: -120px -60px; } }
.g2-promo .g2-h2 { color: #10242f; }
.g2-promo p { font-size: 1.125rem; max-width: 54ch; }
.g2-promo .g2-eyebrow { color: #10242f; background: rgba(16, 36, 47, .08); border-color: rgba(16, 36, 47, .3); }
.g2-promo .g2-btn--primario { background: #10242f; color: #fff; }
.g2-promo .g2-btn--primario:hover { background: #1b3a4b; color: #fff; }
.g2-promo__photo { width: min(100%, 300px); justify-self: center; box-shadow: 12px 12px 0 0 #10242f; }
@media (max-width: 859px) { .g2-promo__photo { display: none; } }

/* ---------- Cabecera de páginas interiores con foto ---------- */
.g2-pagehead { background: radial-gradient(800px 360px at 90% 0%, color-mix(in srgb, var(--gold) 22%, var(--ink)), transparent 60%), linear-gradient(135deg, var(--ink), var(--ink-2)); }
.g2-pagehead__in { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .g2-pagehead.has-photo .g2-pagehead__in { grid-template-columns: minmax(0, 1fr) 260px; } }
.g2-pagehead__photo .g2-ph { width: min(100%, 240px); margin-inline: auto; }
@media (max-width: 859px) { .g2-pagehead__photo { display: none; } }

/* ---------- Páginas “Únete” y beneficios ---------- */
.g2-feat { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g2-feat li { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.g2-feat li > span { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--gold); color: #10242f; margin-bottom: 14px; }
.g2-feat h3 { font-size: 1.2rem; margin: 0 0 .35em; }
.g2-feat p { margin: 0; color: var(--muted); }

/* ---------- Formularios del plugin G2 Formularios dentro del tema ---------- */
.g2-card--form { padding: 0; background: transparent; border: 0; box-shadow: none; }
.g2-card--form .g2f, .g2-pf .g2f { margin: 0; max-width: none; }
.g2-pf__label { font: 700 .8rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.g2-pf__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.g2-pf__tab { appearance: none; cursor: pointer; padding: .65em 1.2em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font: 600 .95rem/1 var(--font-body); transition: all .15s; }
.g2-pf__tab:hover { border-color: var(--link); }
.g2-pf__tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
html[data-theme="dark"] .g2-pf__tab.is-on { background: var(--gold); border-color: var(--gold); color: #10242f; }
.g2-pf__panel[hidden] { display: none; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .g2-pf__tab.is-on { background: var(--gold); border-color: var(--gold); color: #10242f; } }

/* ---------- Pie ---------- */
.g2-footer__cedulas { color: var(--on-ink); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	.g2-marquee__track, .g2-sticker { animation: none; }
	.g2-marquee { overflow-x: auto; }
	.g2-marquee__track[aria-hidden="true"] { display: none; }
	.g2-ramocard a, .g2-agent { transition: none; }
}
@media print { .g2-marquee, .g2-float, .g2-sticker { display: none !important; } }

@media (max-width: 600px) { .g2-ramocard .g2-ph--wide { aspect-ratio: 16 / 9; } }