/* Competition · Hero (score + vs list + share). Portado v1. Scope .sr-cph. */
.sr-cph { position: relative; padding: calc(var(--srew-nav-h, 96px) + 60px) 0 var(--sp-xl); overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 55% 52% at 12% 16%, rgba(34,211,238,.24), transparent 62%), radial-gradient(ellipse 48% 45% at 90% 8%, rgba(249,115,22,.10), transparent 60%), radial-gradient(ellipse 60% 55% at 74% 100%, rgba(36,67,120,.08), transparent 60%), linear-gradient(180deg, #fff 0%, #f4fbfd 55%, #fff 100%);
	/* The gradient runs past the section and the table pulls itself up over it,
	   so the hero's wash sits behind the first rows instead of ending in a seam. */
	padding-bottom: calc(var(--sp-xl) + 260px);
	margin-bottom: -260px; }
.sr-cph * { box-sizing: border-box; }
.sr-cph .comp-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-xl); flex-wrap: wrap; margin-top: var(--sp-lg); }
.sr-cph .comp-hero-head { display: flex; flex-direction: column; gap: var(--sp-md); max-width: 44em; }
.sr-cph h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; color: var(--c-ink); margin-top: .35em; }
.sr-cph h1 em { font-style: normal; background: linear-gradient(90deg, var(--c-ink-deep), var(--c-glow) 65%, var(--c-ink-deep)); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: srCphShine 8s var(--ease-out) infinite alternate; }
@keyframes srCphShine { to { background-position: 100% 50%; } }
.sr-cph .comp-hero-sub { font-size: 1.15rem; line-height: 1.55; color: var(--c-text-soft); max-width: 32em; margin-top: .4em; }
.sr-cph .comp-score { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-lg); align-items: center; margin-top: var(--sp-xl); padding: var(--sp-lg) var(--sp-xl); background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(236,254,255,.7)); border: 1px solid rgba(34,211,238,.22); border-radius: var(--r-xl); box-shadow: var(--sh-card); backdrop-filter: blur(10px); }
.sr-cph .comp-score-num { position: relative; width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--c-glow) 0deg calc(var(--pct,88) * 3.6deg), var(--c-line) calc(var(--pct,88) * 3.6deg) 360deg); flex: none; }
.sr-cph .comp-score-num::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.sr-cph .comp-score-num b { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--c-ink); letter-spacing: -.02em; line-height: 1; }
.sr-cph .comp-score-num sup { position: relative; font-family: var(--font-display); font-weight: 700; font-size: .72rem; color: var(--c-text-soft); margin-left: 2px; }
.sr-cph .comp-score-txt { display: flex; flex-direction: column; gap: .3rem; }
.sr-cph .comp-score-txt strong { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--c-ink); letter-spacing: -.005em; }
.sr-cph .comp-score-txt span { font-size: .95rem; color: var(--c-text-soft); line-height: 1.4; }
.sr-cph .btn { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: .85em 1.6em; border-radius: var(--r-btn); border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-micro), transform var(--t-micro), box-shadow var(--t-micro); }
.sr-cph .btn-orange:hover { background: var(--c-accent-hov); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(249,115,22,.4); }
.sr-cph .cta-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
.sr-cph .comp-vs { margin-top: var(--sp-xl); padding: var(--sp-md) 0; border-top: 1px dashed var(--c-border); border-bottom: 1px dashed var(--c-border); display: flex; align-items: center; gap: var(--sp-md) var(--sp-xl); flex-wrap: wrap; }
.sr-cph .comp-vs-label { font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-soft); }
.sr-cph .comp-vs-list { display: flex; flex-wrap: wrap; gap: .5em .7em; align-items: center; }
.sr-cph .comp-vs-item { font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--c-ink); padding: .35em .8em; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--c-border); letter-spacing: .02em; }
.sr-cph .comp-vs-item sup { color: var(--c-text-soft); margin-left: 2px; font-size: .7em; }

/* ============================================================
   El color del boton, repetido en cada estado.
   El tema pinta `a:hover` y el kit de Elementor `.elementor-kit-N a:hover`
   con su cian; un boton que solo declara el color en reposo pierde la
   etiqueta en cuanto pasas por encima. Se repite estado por estado en vez de
   confiar en la herencia — es el mismo fallo que aparecio en el hero, en la
   tabla comparativa y en el CTA de competencia.
   ============================================================ */
.sr-cph .btn-orange:active,
.sr-cph .btn-orange:focus,
.sr-cph .btn-orange:hover,
.sr-cph a.btn-orange:active,
.sr-cph a.btn-orange:focus,
.sr-cph a.btn-orange:hover { color: #fff; }