/* ==========================================================================
   Agua en Claro V2: hoja de estilos
   Orden: 1 Variables · 2 Base · 3 Componentes · 4 Secciones · 5 Responsive
   Para cambiar colores o tamaños, edita primero las variables (apartado 1).
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
  --ink: #0f2b38;
  --deep: #07505e;
  --teal: #067b80;
  --teal-dark: #055f64;
  --aqua: #dff8f4;
  --paper: #f4faf9;
  --edge: #d8e7e7;
  --muted: #4a666f;
  --faint: #5a7279;
  --sand: #fcf3e6;
  --amber: #e0a04a;
  --white: #fff;
  --r-lg: 24px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 18px 50px rgba(19, 68, 78, .10);
  --font: "Avenir Next", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 72px;
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.6; }
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #1c9fa4; outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 10px; }

/* 3. Componentes ---------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 12px; font-weight: 750; font-size: .95rem; line-height: 1.2; text-align: center; transition: background-color .15s, border-color .15s; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 8px 20px rgba(6, 123, 128, .18); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-light { background: #fff; color: var(--deep); border-color: #a9d3d0; }
.btn-light:hover { border-color: var(--teal); }
.btn-disabled { background: transparent; color: var(--faint); border: 1px dashed #9fbcbc; cursor: not-allowed; font-weight: 650; }

.kicker { color: var(--teal); font-weight: 750; font-size: .92rem; }
.section-head { max-width: 680px; margin-bottom: 30px; }
.section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.45rem); letter-spacing: -.03em; margin: 6px 0 12px; text-wrap: balance; }
.section-head p { color: var(--muted); font-size: 1.02rem; }


.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--sand); border-left: 4px solid var(--amber); color: #5b4313; font-size: .92rem; }
.note strong { color: #4a3508; }

/* Cabecera ----------------------------------------------------------------- */
.topbar { background: #0d4855; color: #dff3f0; text-align: center; padding: 8px 16px; font-size: .8rem; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 16px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: 1.35rem; letter-spacing: -.04em; white-space: nowrap; }
.brand svg { width: 30px; height: 36px; flex: none; }
.nav { display: flex; align-items: center; gap: 26px; font-size: .92rem; font-weight: 650; color: #35525c; }
.nav a:not(.nav-cta):hover { color: var(--teal); }
.nav-cta { background: var(--teal); color: #fff; border-radius: 12px; padding: 11px 18px; font-weight: 750; }
.nav-cta:hover { background: var(--teal-dark); }
.nav-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; background: #fff; border: 1px solid #b5d6d3; border-radius: 12px; font-weight: 700; color: var(--deep); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; content: ""; position: relative; }
.nav-toggle .bars::before { position: absolute; top: -6px; }
.nav-toggle .bars::after { position: absolute; top: 6px; }

/* 4. Secciones ------------------------------------------------------------ */
.block { padding: clamp(52px, 7vw, 88px) 0; }
.block--tint { background: var(--paper); border-block: 1px solid #e6f0ee; }

/* Portada */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid #dbebe9; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: #e4f2f0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(.95); transform: scale(1.06); }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(247, 252, 251, .95) 0%, rgba(247, 252, 251, .88) 38%, rgba(247, 252, 251, .34) 70%, rgba(247, 252, 251, .06) 100%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 56px 0 64px; min-height: min(640px, calc(100svh - var(--header-h) - 34px)); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #a9ddd5; color: #07656b; background: rgba(230, 250, 245, .92); border-radius: 999px; padding: 6px 14px; font-size: .84rem; font-weight: 700; }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #1f9fa0; }
.hero h1 { font-size: clamp(2.4rem, 4.9vw, 4.1rem); line-height: 1.07; letter-spacing: -.045em; margin: 20px 0 18px; max-width: 12.5em; text-wrap: balance; }
.hero h1 em { color: var(--teal); font-style: normal; }
.hero .lead { color: #3f5b65; font-size: 1.1rem; max-width: 33em; margin-bottom: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #3f5b65; font-size: .88rem; font-weight: 600; }
.proof li { display: flex; align-items: center; gap: 7px; }
.proof svg { width: 16px; height: 16px; color: var(--teal); flex: none; }

.hero__art { position: relative; justify-self: center; width: min(460px, 100%); }
.stage { position: relative; margin: 0; aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 26px; border-radius: 32px; background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: rise .8s .1s cubic-bezier(.2, .7, .2, 1) both; }
.stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(13, 76, 82, .18)); }
.float-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid #e0eceb; border-radius: 14px; box-shadow: 0 10px 28px rgba(23, 79, 84, .12); font-size: .8rem; line-height: 1.35; color: var(--muted); }
.float-note strong { display: block; font-size: .86rem; color: var(--ink); }
.float-note svg { width: 22px; height: 22px; color: var(--teal); flex: none; }
.fn-a { top: 34px; right: -58px; }
.fn-b { bottom: 30px; left: -58px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Tipos */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.filter { min-height: 44px; padding: 8px 18px; border: 1px solid #c4dedd; border-radius: 999px; background: #fff; color: #3f5d66; font-size: .9rem; font-weight: 700; }
.filter:hover { border-color: var(--teal); }
.filter[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.filter-status { margin-left: auto; font-size: .86rem; color: var(--faint); }
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; }
.cat__media { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--aqua); overflow: hidden; }
.cat__media img { width: 100%; height: 100%; object-fit: cover; }
.cat__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.tag { align-self: flex-start; font-size: .76rem; font-weight: 750; color: #0b5f66; background: #e3f6f2; padding: 4px 10px; border-radius: 6px; }
.cat h3 { font-size: 1.14rem; letter-spacing: -.02em; }
.cat p { font-size: .9rem; color: var(--muted); flex: 1; }
.cat .soon { font-size: .8rem; color: var(--faint); font-weight: 650; padding-top: 6px; border-top: 1px solid #edf3f2; }

/* Productos destacados */
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.prod { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; }
.prod--empty { background: transparent; border-style: dashed; border-color: #9fc4c2; }
.prod__media { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--aqua); }
.prod__media img { width: 100%; height: 100%; object-fit: cover; }
.prod__state { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #b7d6d3; color: var(--deep); font-size: .72rem; font-weight: 750; }
.prod__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; flex: 1; }
.prod__brand { font-size: .82rem; color: var(--faint); font-weight: 650; }
.prod h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: .88rem; }
.specs dt { color: var(--faint); }
.specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pending { color: var(--faint); font-weight: 500; font-style: italic; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: .86rem; }
.proscons h4 { font-size: .86rem; margin-bottom: 6px; }
.proscons li { position: relative; padding-left: 16px; margin-bottom: 4px; color: var(--muted); }
.proscons .pros li::before { content: "+"; position: absolute; left: 0; color: var(--teal); font-weight: 900; }
.proscons .cons li::before { content: "\2212"; position: absolute; left: 0; color: #a4552b; font-weight: 900; }
.price { padding-top: 12px; border-top: 1px solid #edf3f2; font-size: .88rem; color: var(--muted); }
.price strong { display: block; font-size: 1.25rem; color: var(--ink); letter-spacing: -.02em; }
.prod .btn { width: 100%; margin-top: auto; }
.prod__source { font-size: .78rem; color: var(--faint); }
.prod__source a { text-decoration: underline; }

/* Calculadora */
.calc-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.calc-intro { position: sticky; top: calc(var(--header-h) + 24px); }
.calc-intro h2 { font-size: clamp(1.75rem, 3.2vw, 2.45rem); letter-spacing: -.03em; margin: 6px 0 14px; text-wrap: balance; }
.calc-intro > p { color: var(--muted); }
.steps { display: grid; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); font-size: .94rem; counter-increment: step; }
.steps li::before { content: counter(step); flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #d9f0ea; color: #075f63; font-weight: 850; }
.steps strong { color: var(--ink); }
.calc { padding: clamp(20px, 3vw, 30px); background: #fff; border: 1px solid #d3e5e2; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.calc h3 { font-size: 1.15rem; margin-bottom: 4px; }
.calc__sub { color: var(--faint); font-size: .86rem; margin-bottom: 18px; }
.calc fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.calc legend { padding: 0; margin-bottom: 10px; font-weight: 800; font-size: .95rem; color: var(--deep); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .8rem; color: var(--muted); font-weight: 650; line-height: 1.3; }
.field input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #c9dddc; border-radius: var(--r-sm); background: #fdfefe; font-size: 1rem; }
.field input[aria-invalid="true"] { border-color: #b3401c; background: #fff6f2; }
.calc__actions { display: flex; justify-content: flex-end; margin: -6px 0 6px; }
.link-btn { background: none; border: 0; padding: 8px 4px; color: var(--teal-dark); font-weight: 700; font-size: .88rem; text-decoration: underline; min-height: 44px; }
.calc hr { border: 0; height: 1px; background: #e4eceb; margin: 14px 0 20px; }
.results h4 { font-size: .95rem; margin-bottom: 14px; }
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 96px; gap: 12px; align-items: center; font-size: .86rem; color: var(--muted); }
.bar-row strong { text-align: right; color: var(--ink); font-size: .95rem; font-variant-numeric: tabular-nums; }
.track { height: 12px; border-radius: 999px; background: #e8f0ee; overflow: hidden; }
.bar { display: block; height: 100%; min-width: 2px; width: 0; border-radius: 999px; background: #2fa5a3; transition: width .3s; }
.bar--service { background: var(--amber); }
.stats { display: grid; gap: 0; margin: 20px 0 0; font-size: .88rem; border-top: 1px solid #e4eceb; }
.stats div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #e4eceb; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.stats .stat--wide { flex-direction: column; gap: 2px; }
.stats .stat--wide dd { text-align: left; }
.verdict { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); background: #e8f7f3; color: var(--deep); font-weight: 700; font-size: .93rem; }
.verdict.is-error { background: #fff0ea; color: #8a2f10; }
.assumptions { margin-top: 18px; font-size: .82rem; color: var(--faint); }
.assumptions summary { cursor: pointer; font-weight: 700; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.assumptions ul { list-style: disc; padding-left: 20px; margin-top: 6px; display: grid; gap: 6px; }

/* Guías */
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid #e0ecea; border-radius: var(--r-lg); background: #fff; }
.guide__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #e6f7f3; color: var(--deep); font-size: 1.3rem; font-weight: 800; }
.guide h3 { font-size: 1.1rem; letter-spacing: -.02em; margin-top: 6px; }
.guide p { color: var(--muted); font-size: .92rem; flex: 1; }
.guide small { color: var(--faint); font-size: .8rem; font-weight: 650; }

/* Banner y pie */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(26px, 4vw, 42px); border-radius: 28px; background: #0b5260; color: #fff; }
.banner h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); letter-spacing: -.03em; margin-bottom: 8px; }
.banner p { color: #c4e8e3; max-width: 36em; }
.banner .btn { background: #fff; color: #0b5962; white-space: nowrap; }
.site-footer { background: #103743; color: #c9dfe2; padding: 40px 0 36px; font-size: .86rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; }
.site-footer strong { color: #fff; font-size: 1.1rem; }
.site-footer h2 { font-size: .95rem; color: #fff; margin-bottom: 8px; }
.site-footer p { margin-top: 8px; max-width: 58ch; }
.site-footer .small { margin-top: 14px; color: #a9c4c9; font-size: .8rem; }

/* Plantilla de artículo */
.article { padding: 44px 0 72px; }
.article__inner { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
.crumbs { font-size: .84rem; color: var(--faint); margin-bottom: 18px; }
.crumbs a { text-decoration: underline; }
.article h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.04em; line-height: 1.12; margin-bottom: 14px; }
.article .meta { color: var(--faint); font-size: .88rem; margin-bottom: 24px; }
.article h2 { font-size: 1.6rem; letter-spacing: -.025em; margin: 40px 0 12px; }
.article p, .article li { color: #2f4a54; }
.article p { margin-bottom: 14px; max-width: 70ch; }
.toc { padding: 18px 22px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--paper); margin: 24px 0; }
.toc ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.toc a { color: var(--teal-dark); text-decoration: underline; }

/* 5. Responsive ------------------------------------------------------------ */
@media (max-width: 1020px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-grid, .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { gap: 20px; }
  .fn-a { right: -8px; }
  .fn-b { left: -8px; }
  .calc-grid { gap: 28px; }
}
@media (max-width: 860px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-intro { position: static; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  :root { --header-h: 64px; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav { display: none; position: absolute; top: calc(100% + 1px); left: -20px; right: -20px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 18px; background: #fff; border-bottom: 1px solid var(--edge); box-shadow: 0 18px 30px rgba(19, 68, 78, .12); }
  .js .nav.is-open { display: flex; }
  .js .nav a { padding: 14px 4px; border-bottom: 1px solid #edf3f2; font-size: 1rem; }
  .js .nav .nav-cta { margin-top: 12px; text-align: center; border-bottom: 0; padding: 14px; }
  .nav { gap: 14px; flex-wrap: wrap; font-size: .85rem; }
  .brand { font-size: 1.2rem; }
  .hero__scrim { background: linear-gradient(180deg, rgba(247, 252, 251, .97) 0%, rgba(247, 252, 251, .92) 58%, rgba(247, 252, 251, .6) 100%); }
  .hero__grid { grid-template-columns: 1fr; padding: 38px 0 44px; min-height: 0; gap: 26px; }
  .hero h1 { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
  .hero .lead { font-size: 1rem; }
  .hero__art { width: min(340px, 100%); }
  .stage { aspect-ratio: 1 / 1; padding: 18px; }
  .fn-a { top: 10px; right: -6px; }
  .fn-b { bottom: 12px; left: -6px; }
  .float-note { padding: 8px 11px; font-size: .74rem; }
  .actions .btn { flex: 1 1 100%; }
  .filter-status { flex-basis: 100%; margin-left: 0; }
  .banner { flex-direction: column; align-items: flex-start; }
  .banner .btn { width: 100%; }
}
@media (max-width: 640px) {
  .bar-row { grid-template-columns: 1fr auto; grid-template-areas: "l v" "b b"; gap: 6px 12px; }
  .bar-row > span:first-child { grid-area: l; }
  .bar-row .track { grid-area: b; }
  .bar-row strong { grid-area: v; }
}
@media (max-width: 560px) {
  .wrap, .article__inner { width: calc(100% - 32px); }
  .cat-grid, .prod-grid, .guides { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .proscons { grid-template-columns: 1fr; }
  .float-note { display: none; }
  .topbar { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage { animation: none; }
  .bar, .btn { transition: none; }
}

/* Fotos ilustrativas: encuadre limpio, con declaración de procedencia en el pie de página. */
.stage:has(img[data-ai="true"]) {padding: 0; overflow: hidden; background: #f4faf9;}
.stage img[data-ai="true"] {width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none;}
.cat__media.is-ai-image img {object-position:center center;}


/* V3 · Tarjetas editoriales con modelos reales (sin fotografías comerciales) */
.prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.prod { box-shadow: 0 10px 32px rgba(19,68,78,.055); }
.prod__identity { position:relative; min-height:180px; display:flex; align-items:center; gap:30px; padding:30px 32px; overflow:hidden; background:linear-gradient(125deg,#d7f4ee,#f0faf6); border-bottom:1px solid #dae9e7; }
.prod__identity:after { content:''; position:absolute; width:220px; height:220px; top:-120px; right:-35px; border:38px solid rgba(255,255,255,.44); border-radius:50%; }
.prod__identity--filter { background:linear-gradient(130deg,#e0f5ff,#eaf9f2); }
.prod__identity--smart { background:linear-gradient(130deg,#e6ecfd,#d7f6f1); }
.prod__identity--network { background:linear-gradient(130deg,#e0f4e9,#e0eef1); }
.prod__glyph { width:90px; height:90px; flex:0 0 90px; display:grid; place-items:center; color:#087981; font-size:4.1rem; font-weight:500; line-height:1; border-radius:25px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.86); box-shadow:0 15px 32px rgba(18,92,104,.08); }
.prod__identitytext { position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.prod__identitytext strong { font-size:clamp(1.3rem,2vw,1.75rem); color:#123d4b; line-height:1.15; overflow-wrap:anywhere; }
.prod__mini { font-size:.78rem; color:#476a70; font-weight:720; letter-spacing:.03em; }
.prod__body { padding:24px; }
.prod__summary { font-size:.91rem; color:#4c6b72; margin-top:7px; }
.prod__links { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:center; font-size:.84rem; font-weight:720; color:var(--teal-dark); }
.prod__links a { text-decoration:underline; text-underline-offset:3px; }
.price small { display:block; font-size:.77rem; line-height:1.45; margin-top:4px; }
.price__label { font-size:.77rem; color:#5b7379; font-weight:650; }
.catalog-method { max-width:88ch; margin:26px auto 0; color:var(--muted); font-size:.86rem; text-align:center; }
.prod .btn { margin-top:auto; }
/* Fichas individuales */
.detail { padding:52px 0 80px; background:linear-gradient(180deg,#f5faf9,#fff 380px); }
.detail__wrap { width:min(1040px,calc(100% - 40px)); margin:0 auto; }
.detail__crumb { color:var(--teal-dark); font-size:.86rem; font-weight:700; margin-bottom:20px; }
.detail__crumb a { text-decoration:underline; }
.detail__head { display:grid; grid-template-columns:1fr 1.15fr; gap:36px; align-items:center; margin-bottom:34px; }
.detail__head .prod__identity { border-radius:24px; min-height:255px; border:1px solid var(--edge); flex-direction:column; justify-content:center; align-items:flex-start; gap:18px; }
.detail__head .prod__glyph { width:78px; height:78px; flex-basis:78px; font-size:3rem; }
.detail__head h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.14; letter-spacing:-.04em; margin:10px 0 15px; }
.detail__head p { color:var(--muted); }
.detail__panel { background:white; border:1px solid var(--edge); border-radius:20px; padding:28px; margin-top:22px; }
.detail__panel h2 { font-size:1.45rem; margin-bottom:16px; letter-spacing:-.025em; }
.detail__panel p { color:var(--muted); margin-bottom:12px; }
.detail__panel li { color:var(--muted); margin:0 0 9px; padding-left:18px; position:relative; }
.detail__panel li:before { position:absolute; left:0; top:0; color:var(--teal); content:'•'; font-weight:900; }
.detail__cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.detail__facts { display:grid; grid-template-columns:170px 1fr; gap:0 18px; }
.detail__facts dt, .detail__facts dd { padding:12px 0; border-bottom:1px solid #e8efed; }
.detail__facts dt { color:var(--muted); font-weight:650; }
.detail__facts dd { margin:0; }
.detail__links { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; align-items:center; }
.detail__links a:not(.btn) { color:var(--teal-dark); text-decoration:underline; font-weight:730; padding:12px 4px; }
.detail__notice { padding:15px 18px; border-left:4px solid #0d8586; border-radius:0 12px 12px 0; background:#e9f8f4; color:#254952 !important; }
.detail__meta { font-size:.8rem; color:var(--faint); }
@media(max-width:840px) { .detail__head { grid-template-columns:1fr; } }
@media(max-width:780px) { .prod-grid { grid-template-columns:1fr; } .detail__cols { grid-template-columns:1fr; } }
@media(max-width:500px) { .prod__identity { padding:22px; gap:18px; min-height:140px; } .prod__glyph { width:64px; height:64px; flex-basis:64px; border-radius:18px; font-size:2.7rem; } .prod__body { padding:20px; } .detail__facts { grid-template-columns:1fr; gap:0; } .detail__facts dt { border:0; padding-bottom:2px; } .detail__facts dd { padding-top:0; } }


/* --------------------------------------------------------------------------
   V3.1 · Fichas de producto compactas. Solo afecta a la cuadrícula del inicio.
   Las páginas de detalle mantienen íntegra su información y presentación.
   -------------------------------------------------------------------------- */
.prod-grid { gap: 18px; }
.prod-grid .prod__identity { min-height: 106px; padding: 14px 20px; gap: 15px; }
.prod-grid .prod__identity::after { width: 155px; height: 155px; top: -92px; right: -45px; border-width: 28px; }
.prod-grid .prod__glyph { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 17px; font-size: 2.45rem; }
.prod-grid .prod__identitytext { gap: 2px; }
.prod-grid .prod__identitytext h3 { position: relative; z-index: 1; font-size: clamp(1.1rem, 1.8vw, 1.34rem); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.prod-grid .prod__mini { font-size: .71rem; font-weight: 650; letter-spacing: 0; line-height: 1.35; }
.prod-grid .prod__body { padding: 17px 20px 19px; gap: 12px; }
.prod-grid .prod__summary { margin: 0; font-size: .87rem; line-height: 1.35; color: #45636b; }
.prod-grid .specs { grid-template-columns: 96px minmax(0,1fr); gap: 5px 12px; font-size: .81rem; line-height: 1.4; }
.prod-grid .specs dt { font-size: .78rem; }
.prod-grid .specs dd { font-weight: 650; }
.prod-grid .proscons { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; font-size: .8rem; line-height: 1.38; }
.prod-grid .proscons h4 { font-size: .79rem; margin-bottom: 4px; }
.prod-grid .proscons li { padding-left: 13px; margin: 0; }
.prod-grid .prod__decision { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; border-top: 1px solid #edf3f2; padding-top: 12px; margin-top: auto; }
.prod-grid .price { padding: 0; border: 0; margin: 0; min-width: 0; }
.prod-grid .price strong { font-size: 1.27rem; line-height: 1.2; }
.prod-grid .price__label { font-size: .7rem; }
.prod-grid .price small { font-size: .69rem; line-height: 1.3; margin-top: 4px; }
.prod-grid .prod__decision .btn { width: auto; margin: 0; padding: 11px 14px; min-height: 44px; font-size: .84rem; white-space: nowrap; }
.prod-grid .prod__links { justify-content: flex-start; gap: 7px 16px; font-size: .78rem; line-height: 1.4; }
.prod-grid .prod__links a { padding-block: 3px; }
@media (max-width: 500px) {
  .prod-grid .prod__identity { padding: 13px 16px; min-height: 100px; gap: 12px; }
  .prod-grid .prod__glyph { width: 52px; height: 52px; flex-basis: 52px; font-size: 2.1rem; }
  .prod-grid .prod__body { padding: 16px; gap: 13px; }
  .prod-grid .prod__decision { grid-template-columns: 1fr; gap: 10px; }
  .prod-grid .prod__decision .btn { width: 100%; }
}


/* ==========================================================================
   V3.2 · Recorrido visual cromático
   Ritmo de secciones sin alterar contenido, UX, fichas o calculadora.
   Fondos claros, bloque de calculadora de contraste y acentos cálidos.
   ========================================================================== */

/* 01 · Tipos: frescor, un leve acento cálido y tarjetas con profundidad */
#tipos {
  background:
    radial-gradient(ellipse 430px 360px at 94% 7%, rgba(255,216,155,.31), transparent 83%),
    linear-gradient(120deg,#e7f7f4 0%,#f3fbf9 59%,#fffdf7 100%);
  border-bottom: 1px solid #d8e8e4;
}
#tipos .cat {
  box-shadow: 0 12px 30px rgba(12,87,96,.07);
  border-color: #d9eae6;
  transition: transform .22s ease, box-shadow .22s ease;
}
#tipos .cat:hover { transform: translateY(-3px); box-shadow: 0 17px 36px rgba(12,87,96,.12); }
#tipos .cat__media { background: #d8eee8; }
#tipos .cat:nth-child(2) .tag { background:#fff1db; color:#87541b; }
#tipos .cat:nth-child(3) .tag { background:#dcefff; color:#215678; }
#tipos .cat:nth-child(4) .tag { background:#f3eafa; color:#694a88; }

/* 02 · Destacados: lavanda azulada sutil, más contraste con las tarjetas */
#destacados {
  background:
    radial-gradient(ellipse 470px 360px at 7% 9%, rgba(206,222,255,.61), transparent 88%),
    linear-gradient(120deg,#edf4ff 0%,#f3f6ff 51%,#f4f9fb 100%);
  border-block: 0;
}
#destacados .prod {
  background: #fff;
  border-color:#dbe7f0;
  box-shadow: 0 15px 34px rgba(39,70,103,.09);
}
#destacados .prod__identity--smart { background:linear-gradient(125deg,#e8eaff,#d4f1ff); }
#destacados .catalog-method { color:#465f75; }

/* 03 · Calculadora: punto de atención del recorrido, tinta blanca con un toque cálido */
#calculadora {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 480px 520px at 4% 84%,rgba(246,188,114,.19),transparent 81%),
    radial-gradient(ellipse 500px 560px at 98% 10%,rgba(72,188,190,.26),transparent 85%),
    linear-gradient(128deg,#073d51 0%,#075766 57%,#0b7180 100%);
  border-block: 1px solid #0e7480;
}
#calculadora .calc-intro { color:#fff; }
#calculadora .calc-intro .kicker { color:#ffd69f; }
#calculadora .calc-intro h2 { color:#fff; }
#calculadora .calc-intro > p { color:#daecee; }
#calculadora .steps li { color:#d5e9e9; }
#calculadora .steps strong { color:#fff; }
#calculadora .steps li::before {
  background:#ffe0ad;
  color:#4d3c28;
  box-shadow:0 4px 14px rgba(2,28,40,.16);
}
#calculadora .calc {
  background: #fff;
  color:var(--ink);
  border-color:#b9d3d4;
  box-shadow:0 28px 64px rgba(3,34,49,.24);
}
#calculadora .calc h3,
#calculadora .calc legend,
#calculadora .results h4 { color:var(--ink); }
#calculadora .calc fieldset { min-width:0; }
#calculadora .track { background:#eaf0f1; }
#calculadora .bar--service { background:#e7a24b; }

/* 04 · Guías: luz cálida; las tres tarjetas se distinguen sin perder unidad */
#guias {
  background:
    radial-gradient(ellipse 470px 360px at 93% 8%,rgba(255,213,181,.58),transparent 88%),
    linear-gradient(130deg,#fff4e4 0%,#fff9f3 67%,#f7f4ff 100%);
  border-block:0;
}
#guias .guide {
  border-color:#f0dfd0;
  box-shadow:0 10px 28px rgba(135,90,56,.075);
  border-top:4px solid #d7a970;
}
#guias .guide:nth-child(1) { border-top-color:#6c9acb; }
#guias .guide:nth-child(2) { border-top-color:#e5a454; }
#guias .guide:nth-child(3) { border-top-color:#3caa9e; }
#guias .guide:nth-child(1) .guide__icon { background:#e4efff; color:#355c94; }
#guias .guide:nth-child(2) .guide__icon { background:#fff0d6; color:#8a561b; }
#guias .guide:nth-child(3) .guide__icon { background:#dff6f0; color:#0b6d6d; }

/* 05 · Cierre: respiro celeste y llamada a la acción oscura */
.block--closing { background:linear-gradient(135deg,#e7f6fb,#edf9f8 67%,#f7fcfa); }
.block--closing .banner {
  background:linear-gradient(105deg,#073c53,#0c6c76);
  box-shadow:0 16px 36px rgba(7,58,76,.16);
}

/* Pequeño acento editorial para que cada bloque se identifique al desplazarse */
#tipos .kicker, #destacados .kicker, #calculadora .kicker, #guias .kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
}
#tipos .kicker::before, #destacados .kicker::before,
#calculadora .kicker::before, #guias .kicker::before {
  content:"";
  width:24px;
  height:4px;
  flex:0 0 24px;
  border-radius:10px;
  background:currentColor;
}
#destacados .kicker { color:#4969a2; }
#guias .kicker { color:#a05b2c; }

@media (max-width:780px) {
  #calculadora { background:linear-gradient(145deg,#083e50 0%,#0a6977 100%); }
  #calculadora .calc { box-shadow:0 15px 35px rgba(3,34,49,.22); }
}
@media (prefers-reduced-motion:reduce) {
  #tipos .cat { transition:none; }
  #tipos .cat:hover { transform:none; }
}

/* V3.3: fotografías reales temporales en cabeceras compactas y fichas */
.prod-grid .prod__identity.has-product-photo { background: linear-gradient(113deg,#f9fcfc,#e4f6f2); }
.prod-grid .prod__identity.has-product-photo .prod__glyph { display:none; }
.prod-grid .prod__identity .prod__photo { display:none; width:108px; height:108px; object-fit:contain; flex:0 0 108px; border-radius:12px; background:white; border:1px solid #edf0f1; padding:4px; position:relative; z-index:2; }
.prod-grid .prod__identity.has-product-photo .prod__photo { display:block; }
.prod-grid .prod__identity.has-product-photo { min-height:136px; padding:12px 20px; }
.prod-grid .prod__identity.has-product-photo .prod__identitytext { flex:1; }
.prod-grid .prod__identity.has-product-photo .prod__mini:last-child { font-size:.69rem; color:#54717a; }
.photo-lookup { display:inline-flex; align-items:center; padding:6px 9px; border-radius:8px; background:#fff; border:1px solid #bfd5d5; white-space:nowrap; position:relative; z-index:1; font-size:.72rem; font-weight:700; color:#166779; }
.detail__head .prod__identity:has(> .detail__product-photo) { padding:16px; }
.detail__product-photo { display:block; width:100%; height:290px; object-fit:contain; background:white; border-radius:15px; }
.detail__head .prod__identity:has(> .detail__product-photo:not([style*="display: none"])) .prod__glyph,
.detail__head .prod__identity:has(> .detail__product-photo:not([style*="display: none"])) .prod__identitytext { display:none; }
@media(max-width:560px){
  .prod-grid .prod__identity.has-product-photo { padding:12px; }
  .prod-grid .prod__identity .prod__photo { width:84px; height:94px; flex-basis:84px; }
  .prod-grid .prod__identity.has-product-photo .prod__identitytext h3 { font-size:1.08rem; }
  .detail__product-photo { height:230px; }
}

/* ==========================================================================
   V3.4 · Escaparate de productos panorámico
   Objetivo: fichas más anchas, fotografías 2× mayores, lectura comercial ágil.
   Afecta solo al catálogo de la portada; las fichas individuales se conservan.
   ========================================================================== */
@media (min-width: 1050px) {
  #destacados > .wrap { width:min(1360px, calc(100% - 48px)); }
}
#destacados .section-head { max-width:770px; }
#destacados .prod-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
#destacados .prod { border-radius:22px; min-width:0; box-shadow:0 15px 35px rgba(33,67,107,.10); }
#destacados .prod__identity,
#destacados .prod__identity.has-product-photo {
  min-height:254px; padding:17px 23px; gap:24px;
  align-items:center; justify-content:flex-start;
  background:linear-gradient(120deg,#e9f8f7 0%,#f8fcfd 53%,#e1f0f7 100%);
  border-bottom:1px solid #dce9ed;
}
#destacados .prod__identity--filter { background:linear-gradient(120deg,#e8f6ff 0%,#f9fdfb 56%,#e0f4eb 100%); }
#destacados .prod__identity--smart { background:linear-gradient(120deg,#e7ecff 0%,#fbfdff 57%,#dfedf8 100%); }
#destacados .prod__identity--network { background:linear-gradient(120deg,#e1f6f0 0%,#f8fcfb 54%,#d8eef4 100%); }
#destacados .prod__identity::after { width:210px; height:210px; top:-100px; right:-75px; border-width:31px; opacity:.85; }
#destacados .prod__identity .prod__photo {
  display:none; width:230px; height:217px; flex:0 0 230px;
  padding:10px; background:#fff; object-fit:contain; border:1px solid #e1ebed;
  border-radius:16px; box-shadow:0 12px 25px rgba(28,84,101,.11);
  position:relative; z-index:2;
}
#destacados .prod__identity.has-product-photo .prod__photo { display:block; }
#destacados .prod__identity.has-product-photo .prod__glyph { display:none; }
#destacados .prod__glyph {
  width:190px; height:190px; flex:0 0 190px; border-radius:22px;
  display:grid; place-items:center; font-size:5.2rem;
  color:#147d86; background:rgba(255,255,255,.8);
  box-shadow:0 12px 25px rgba(28,84,101,.09);
}
#destacados .prod__identitytext { min-width:0; flex:1; gap:10px; }
#destacados .prod__identitytext h3 {
  font-size:clamp(1.3rem,1.9vw,1.65rem);
  line-height:1.17; letter-spacing:-.025em; overflow-wrap:normal;
  word-break:normal; hyphens:auto;
}
#destacados .prod__identitytext .prod__mini:first-child {
  display:inline-flex; align-self:flex-start; padding:6px 10px;
  border-radius:99px; color:#07686f; background:#ffffffdb;
  font-size:.76rem; font-weight:750; letter-spacing:0;
  border:1px solid #d3e7e6;
}
#destacados .prod__identitytext .prod__mini:last-child { font-size:.8rem; color:#56717a; font-weight:500; line-height:1.4; }
#destacados .prod__body { padding:17px 23px 20px; gap:14px; }
#destacados .prod__summary { font-size:.92rem; font-weight:650; color:#2a555e; line-height:1.35; }
#destacados .specs { grid-template-columns:115px minmax(0,1fr); gap:6px 15px; font-size:.86rem; line-height:1.4; }
#destacados .specs dt { font-size:.81rem; }
#destacados .prod-grid .proscons { display:none; } /* Está íntegro en las fichas individuales */
#destacados .prod__decision { padding-top:14px; gap:12px; }
#destacados .prod__decision .btn { min-height:46px; white-space:normal; }
#destacados .prod__links { margin-top:-4px; }
#destacados .photo-lookup { align-self:center; white-space:normal; text-align:center; }
@media (max-width:1049px) {
  #destacados .prod-grid { gap:18px; }
  #destacados .prod__identity, #destacados .prod__identity.has-product-photo { gap:16px; min-height:220px; padding:15px; }
  #destacados .prod__identity .prod__photo { width:173px; height:186px; flex-basis:173px; }
  #destacados .prod__glyph { width:150px; height:164px; flex-basis:150px; font-size:4rem; }
  #destacados .prod__identitytext h3 { font-size:1.25rem; }
}
@media (max-width:790px) {
  #destacados .prod-grid { grid-template-columns:1fr; gap:20px; }
  #destacados .prod__identity, #destacados .prod__identity.has-product-photo { min-height:245px; gap:22px; padding:18px 23px; }
  #destacados .prod__identity .prod__photo { width:215px; height:205px; flex-basis:215px; }
  #destacados .prod__glyph { width:187px; height:189px; flex-basis:187px; }
  #destacados .prod__identitytext h3 { font-size:1.45rem; }
}
@media (max-width:480px) {
  #destacados > .wrap { width:calc(100% - 24px); }
  #destacados .prod__identity, #destacados .prod__identity.has-product-photo {
    min-height:199px; gap:12px; padding:12px; align-items:center;
  }
  #destacados .prod__identity .prod__photo { width:46%; height:178px; flex:0 0 46%; border-radius:12px; padding:6px; }
  #destacados .prod__glyph { width:43%; height:168px; flex:0 0 43%; border-radius:14px; font-size:3.5rem; }
  #destacados .prod__identitytext { gap:9px; }
  #destacados .prod__identitytext h3 { font-size:clamp(1.1rem,4.6vw,1.3rem); }
  #destacados .prod__identitytext .prod__mini:first-child { font-size:.68rem; padding:4px 7px; }
  #destacados .prod__identitytext .prod__mini:last-child { font-size:.74rem; }
  #destacados .prod__body { padding:16px; gap:12px; }
  #destacados .specs { grid-template-columns:98px minmax(0,1fr); gap:7px 9px; font-size:.81rem; }
  #destacados .prod__decision { grid-template-columns:1fr; gap:11px; }
  #destacados .prod__decision .btn { width:100%; }
}

/* En modelos sin fotografía cargable, el enlace de referencia se mantiene bajo el título. */
#destacados .prod__identitytext .photo-lookup { align-self:flex-start; max-width:100%; }


/* ==========================================================================
   V3.5 · Comparador interactivo: sección diferenciada con lectura clara
   ========================================================================== */
@media (min-width:781px) and (max-width:1100px) {
  .site-header .nav { gap:13px; font-size:.84rem; }
  .site-header .nav-cta { padding:10px 13px; }
}
.block--compare {
  background:linear-gradient(130deg,#f7fcfc 0%,#eff9f5 49%,#fff9ef 100%);
  border-top:1px solid #d5eae6;
  border-bottom:1px solid #d7e7e0;
}
.compare-heading { max-width:790px; }
#comparador .kicker { color:#087e81; }
.compare-panel {
  background:#fff;
  border:1px solid #cee4e1;
  border-radius:24px;
  padding:clamp(18px,3vw,32px);
  box-shadow:0 18px 46px rgba(10,69,83,.09);
  min-width:0;
}
.compare-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
  align-items:end;
  gap:18px;
}
.compare-select-wrap { display:flex; flex-direction:column; gap:10px; min-width:0; }
.compare-select-wrap label { font-size:.96rem; font-weight:750; color:#194653; display:flex; align-items:center; gap:11px; }
.compare-count { display:inline-grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#dcf4ed; color:#046d72; font-weight:800; font-size:.75rem; }
.compare-select-wrap:last-child .compare-count { background:#e8ebff; color:#485ba9; }
.compare-select-wrap select { width:100%; min-width:0; font:inherit; font-weight:650; border:1px solid #b4d4d0; background:#f9fdfc; color:#193b47; border-radius:12px; padding:14px 42px 14px 15px; min-height:51px; cursor:pointer; }
.compare-vs { place-self:end center; display:grid; place-items:center; width:49px; height:49px; border-radius:50%; background:#073f54; color:#fff; font-size:.88rem; font-weight:850; box-shadow:0 7px 18px rgba(2,52,67,.14); }
.compare-help { color:#567179; font-size:.88rem; margin:14px 0 10px; line-height:1.5; }
.compare-status { color:#156975; font-weight:700; font-size:.88rem; margin:0 0 18px; min-height:1.4em; }
.compare-scroll { width:100%; max-width:100%; overflow-x:auto; border:1px solid #d9e9e8; border-radius:15px; -webkit-overflow-scrolling:touch; }
.compare-table { width:100%; min-width:660px; border-collapse:separate; border-spacing:0; font-size:.94rem; line-height:1.5; }
.compare-table th, .compare-table td { text-align:left; vertical-align:top; padding:16px 20px; overflow-wrap:anywhere; }
.compare-table th:first-child { width:26%; }
.compare-table td { width:37%; }
.compare-table thead th { background:#0c5362; color:#fff; font-size:.97rem; line-height:1.3; font-weight:800; border:0; }
.compare-table thead th:nth-child(3) { background:#185f7a; }
.compare-table tbody th { color:#3a5a63; font-weight:700; }
.compare-table tbody tr:nth-child(even) { background:#f7fafb; }
.compare-table tbody tr.compare-table__different { background:#eef8f5; }
.compare-table tbody tr:nth-child(even).compare-table__different { background:#eaf4f1; }
.compare-table tbody tr + tr > * { border-top:1px solid #e4eeed; }
.compare-foot { display:flex; gap:20px; justify-content:space-between; align-items:center; margin-top:22px; }
.compare-foot p { max-width:50ch; font-size:.86rem; color:#4c6972; }
.compare-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.compare-links .btn { min-height:42px; font-size:.81rem; padding:10px 13px; }
.compare-disclaimer { max-width:94ch; color:#59727a; font-size:.83rem; margin-top:17px; }
.prod-grid .compare-add {
  display:inline-flex; justify-content:center; align-items:center; gap:5px;
  min-height:39px; padding:7px 13px; border-radius:10px;
  background:#e7f4f2; color:#075f68; border:1px solid #a6d2cd;
  font-size:.84rem; font-weight:750; line-height:1.25; text-decoration:none;
}
.prod-grid .compare-add:hover { background:#d1eee8; border-color:#6cbbb8; }
.prod-grid .compare-add.is-selected { background:#e4e9fd; border-color:#acbae9; color:#405b9c; }
@media(max-width:980px) {
  .compare-foot { flex-direction:column; align-items:flex-start; }
  .compare-links { justify-content:flex-start; }
}
@media(min-width:651px) { .compare-swipe { display:none; } }
@media(max-width:650px) {
  .compare-swipe { display:block; color:#0c7180; font-size:.82rem; font-weight:750; padding:7px 12px; margin-bottom:10px; background:#e7f5f3; border:1px solid #b7ded7; border-radius:10px; }
  .compare-controls { grid-template-columns:minmax(0,1fr); gap:13px; }
  .compare-vs { place-self:center; width:34px; height:34px; font-size:.73rem; margin:-2px 0; }
  .compare-select-wrap { gap:7px; }
  .compare-select-wrap select { font-size:.94rem; }
  .compare-scroll { border-radius:12px; }
  .compare-table { min-width:590px; font-size:.88rem; }
  .compare-table th, .compare-table td { padding:12px 13px; }
  .compare-foot { gap:14px; }
  .compare-links { width:100%; }
  .compare-links .btn { width:100%; white-space:normal; }
}
@media(prefers-reduced-motion:reduce) {
 .prod-grid .compare-add { transition:none; }
}


/* V3.6: guía destacada en portada y estilo editorial de lectura */
.guide-feature { display:grid; grid-template-columns:minmax(250px,.88fr) minmax(0,1.12fr); background:#fff; border:1px solid #f0d7a7; border-radius:26px; overflow:hidden; box-shadow:0 16px 42px rgba(62,87,89,.1); margin-bottom:24px; transition:transform .16s ease, box-shadow .16s ease; }
.guide-feature:hover { transform:translateY(-3px); box-shadow:0 22px 45px rgba(62,87,89,.14); }
.guide-feature__media { min-height:275px; position:relative; background:#eaf4ef; }
.guide-feature__media img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.guide-feature__label { position:absolute; left:20px; top:20px; background:#fff; border:1px solid #d6e6dd; color:#075b64; padding:7px 14px; border-radius:99px; font-size:.78rem; font-weight:800; box-shadow:0 4px 18px rgba(0,0,0,.05); }
.guide-feature__body { padding:clamp(25px,4vw,44px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:15px; }
.guide-feature__body h3 { font-size:clamp(1.6rem,2.8vw,2.4rem); letter-spacing:-.035em; line-height:1.14; max-width:20ch; }
.guide-feature__body p { color:#446773; max-width:54ch; line-height:1.6; }
.guide-feature__link { display:inline-flex; align-items:center; gap:8px; color:#fff; background:#087b80; font-size:.92rem; font-weight:800; padding:12px 18px; border-radius:11px; }
@media(max-width:720px){ .guide-feature { grid-template-columns:1fr; } .guide-feature__media { min-height:235px; } .guide-feature__body { padding:25px; } }

.article-buy { background:#fff; padding:0 0 95px; }
.article-buy .article-top { background:linear-gradient(127deg,#e7f7f2 0%,#f1f2ff 55%,#fff3dc 100%); padding:35px 0 48px; border-bottom:1px solid #d8e8e1; }
.article-buy .article-top__grid { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(270px,.8fr); align-items:center; gap:46px; }
.article-buy .article-top .crumbs { font-size:.84rem; margin-bottom:20px; }
.article-buy .article-top .crumbs a { text-decoration:underline; text-underline-offset:3px; }
.article-buy h1 { font-size:clamp(2.25rem,4.3vw,4rem); line-height:1.08; letter-spacing:-.046em; max-width:15ch; margin:14px 0 19px; text-wrap:balance; }
.article-buy .article-top .summary { max-width:60ch; font-size:1.05rem; line-height:1.65; color:#3d6169; }
.article-buy .article-top .summary strong {color:#0a4b59;}
.article-buy .article-top__meta { display:flex; flex-wrap:wrap; gap:9px; margin:19px 0 24px; font-weight:700; font-size:.82rem; color:#3b6870; }
.article-buy .article-top__meta span { border:1px solid #c5dfdc; background:#ffffffac; padding:6px 10px; border-radius:99px; }
.article-buy .article-top__img { position:relative; border-radius:24px; overflow:hidden; background:#e3f7f2; aspect-ratio: 4 / 4.2; border:7px solid #ffffffd9; box-shadow:0 18px 48px rgba(15,69,84,.12); }
.article-buy .article-top__img img { height:100%; width:100%; object-fit:cover; }
.article-buy .article-top__img figcaption { position:absolute; left:10px; right:10px; bottom:10px; background:rgba(255,255,255,.89); font-size:.75rem; color:#40606a; border-radius:9px; padding:5px 10px; }
.article-buy .reading { width:min(1140px,calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns:224px minmax(0,1fr); gap:54px; padding-top:50px; align-items:start; }
.article-buy .reading__side { position:sticky; top:100px; border:1px solid #dcebe6; background:#f7fcfa; border-radius:18px; padding:18px; }
.article-buy .reading__side strong { display:block; font-size:.84rem; color:#164f5c; margin-bottom:11px; }
.article-buy .reading__side a { display:block; padding:8px 0; color:#466a74; font-size:.87rem; border-top:1px solid #dfece9; line-height:1.35; }
.article-buy .reading__side a:hover { color:#077e81; text-decoration:underline; }
.article-buy .reading__main { min-width:0; max-width:790px; }
.article-buy .reading__main h2 { font-size:clamp(1.55rem,2.9vw,2.05rem); letter-spacing:-.03em; margin:42px 0 14px; scroll-margin-top:100px; text-wrap:balance; }
.article-buy .reading__main h2:first-child { margin-top:0; }
.article-buy .reading__main h3 { font-size:1.19rem; margin:24px 0 8px; }
.article-buy .reading__main p { color:#385661; line-height:1.8; margin:0 0 17px; }
.article-buy .reading__main a:not(.btn) { text-decoration:underline; text-underline-offset:3px; color:#006a74; font-weight:650; }
.article-buy .reading__main ul { list-style:disc; padding-left:21px; margin:12px 0 20px; display:grid; gap:8px; color:#385661; line-height:1.7; }
.article-buy .reading__main li::marker { color:#119191; }
.article-buy .lede { border-left:4px solid #13aaa0; padding:10px 0 10px 19px; font-size:1.06rem; font-weight:600; }
.article-buy .quick-picks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin:23px 0 30px; }
.article-buy .pick { padding:19px; border-radius:17px; background:#eaf6f4; border:1px solid #cae5de; }
.article-buy .pick:nth-child(2){background:#f0f0fc;border-color:#dadbf5;} .article-buy .pick:nth-child(3){background:#fff7e8;border-color:#f5dfbd;} .article-buy .pick:nth-child(4){background:#eff5ff;border-color:#d3dff8;}
.article-buy .pick strong {display:block; line-height:1.35; font-size:1.01rem; color:#113a48; margin-bottom:7px;} .article-buy .pick span {color:#41616b; font-size:.88rem; line-height:1.5;}
.article-buy .guide-table-wrap {max-width:100%; overflow-x:auto; border:1px solid #dae8e5; border-radius:15px; margin:20px 0 14px;}
.article-buy .guide-table {width:100%; min-width:595px; border-collapse:collapse; font-size:.89rem; line-height:1.5;}
.article-buy .guide-table th,.article-buy .guide-table td {text-align:left; vertical-align:top; padding:15px 17px; border-bottom:1px solid #e4edeb;}
.article-buy .guide-table thead th {background:#104c5d; color:#fff; font-weight:750;}
.article-buy .guide-table tbody th {color:#184b58; width:22%;}
.article-buy .guide-table tbody tr:nth-child(even){background:#f5faf9;}
.article-buy .guide-note {font-size:.82rem;color:#668087!important;}
.article-buy .tip {background:#fff7e9; border-left:4px solid #efa945; border-radius:0 13px 13px 0; padding:17px 20px; margin:21px 0;}
.article-buy .tip p {margin:0; color:#584f3e;}
.article-buy .model-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:21px 0 28px;}
.article-buy .model {border:1px solid #d8e9e7;border-radius:17px;padding:21px;background:#fff;display:flex;flex-direction:column;gap:10px;}
.article-buy .model h3 {margin:0;font-size:1.13rem;}
.article-buy .model p {font-size:.9rem;line-height:1.65;margin:0;flex:1;}
.article-buy .model .model__type {font-size:.74rem;font-weight:800;color:#07747c;background:#e4f5f0;padding:5px 10px;border-radius:99px;align-self:flex-start;}
.article-buy .model .model__link {font-size:.88rem;font-weight:800;}
.article-buy .faq {border:1px solid #d9e7e7; border-radius:12px; margin-bottom:11px; overflow:hidden; background:#fff;}
.article-buy .faq summary {font-weight:750;cursor:pointer;padding:16px 20px;color:#123d4c; min-height:52px;}
.article-buy .faq[open] {background:#f7fcfa;}
.article-buy .faq p {padding:0 20px 17px;margin:0;}
.article-buy .sources {font-size:.91rem;}
.article-buy .sources li {overflow-wrap:anywhere;}
.article-buy .article-action {margin:40px 0 0;border-radius:22px;background:#0b5561;color:#fff;padding:29px 30px;display:flex;gap:28px;align-items:center;justify-content:space-between;}
.article-buy .article-action strong{font-size:1.18rem;display:block;margin-bottom:5px;} .article-buy .article-action p {color:#cae8e4;margin:0;font-size:.88rem;} .article-buy .article-action .btn {white-space:nowrap;}
.article-buy .article-top .btn {margin:0;}
@media(max-width:1020px){ .article-buy .reading {grid-template-columns:1fr;gap:24px;} .article-buy .reading__side {position:static;display:none;} }
@media(max-width:780px){.article-buy .article-top__grid{grid-template-columns:1fr;gap:28px;} .article-buy .article-top__img{max-width:520px;aspect-ratio:16/10;margin:0;} .article-buy .reading {padding-top:33px;} .article-buy .article-action{flex-direction:column;align-items:flex-start;} }
@media(max-width:520px){.article-buy .quick-picks,.article-buy .model-grid{grid-template-columns:1fr;} .article-buy .article-top{padding:20px 0 32px;} .article-buy .article-top__meta {gap:6px;} .article-buy .article-top__meta span{font-size:.73rem;} .article-buy .article-action{padding:24px;} }
@media(prefers-reduced-motion:reduce){.guide-feature{transition:none;}}


/* =======================================================================
   V3.7 · Diseño editorial vivo de la primera guía
   Mantiene contenido/fuentes y estilos del resto del sitio sin alterarlos.
   ======================================================================= */
.article-buy {
  background:linear-gradient(180deg,#fff 0%,#f9fbfc 55%,#fff 100%);
}
.article-buy .reading { padding-top:55px; }
.article-buy .reading__main { padding-bottom:4px; }
.article-buy .reading__side { border:1px solid #d0e7e4; box-shadow:0 12px 36px rgba(30,78,93,.065); }
.article-buy .reading__side a[href="#frio"],
.article-buy .reading__side a[href="#costes"],
.article-buy .reading__side a[href="#modelos"],
.article-buy .reading__side a[href="#errores"],
.article-buy .reading__side a[href="#preguntas"] {
 padding-left:9px; border-left:3px solid #79c8c5;
}
.article-buy .guide-chapter {
 --accent:#047c83;
 position:relative; isolation:isolate; overflow:hidden;
 border:1px solid rgba(56,105,122,.11);
 border-radius:26px;
 padding:32px 34px 33px;
 margin:35px -23px;
 box-shadow:0 12px 33px rgba(37,67,82,.055);
 scroll-margin-top:93px;
}
.article-buy .guide-chapter::before {
 content:""; position:absolute; right:-80px; top:-130px;
 width:260px; height:260px; border-radius:50%;
 background:rgba(255,255,255,.27); border:26px solid rgba(255,255,255,.17);
 pointer-events:none; z-index:-1;
}
.article-buy .guide-chapter--ice {--accent:#1966a0;background:linear-gradient(143deg,#d8ecff 0%,#e9f5ff 68%,#eef9ff 100%);border-color:#b9dcf6;}
.article-buy .guide-chapter--sand {--accent:#9f5b10;background:linear-gradient(145deg,#ffecd0 0%,#fff5dc 75%,#fff7e8 100%);border-color:#f2d6a4;}
.article-buy .guide-chapter--violet {--accent:#6446a1;background:linear-gradient(145deg,#e8e0fa 0%,#f4efff 72%,#f7f2ff 100%);border-color:#d9c8f6;}
.article-buy .guide-chapter--coral {--accent:#ae4e34;background:linear-gradient(145deg,#ffe0d3 0%,#fff0e9 75%,#fff4ef 100%);border-color:#f3cbbb;}
.article-buy .guide-chapter--mint {--accent:#087c6a;background:linear-gradient(145deg,#cef0e6 0%,#e4f8ef 72%,#effbf5 100%);border-color:#b4e2d4;}
.article-buy .guide-chapter--slate {--accent:#345d79;background:linear-gradient(145deg,#e2edf4 0%,#f0f5fa 72%,#f7f9fc 100%);border-color:#cddde8;}
.article-buy .chapter-head {display:flex;align-items:flex-start;gap:16px;margin:0 0 20px;position:relative;}
.article-buy .chapter-emblem {display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;color:#fff;background:var(--accent);border-radius:16px;box-shadow:0 8px 17px rgba(29,67,76,.11);}
.article-buy .chapter-emblem svg {width:27px;height:27px;}
.article-buy .chapter-kicker {display:block;margin:0 0 5px;color:var(--accent);font-size:.77rem;font-weight:850;letter-spacing:.085em;}
.article-buy .guide-chapter h2 {margin:0;letter-spacing:-.034em;color:#103744;font-size:clamp(1.53rem,2.65vw,2.04rem);}
.article-buy .guide-chapter p {color:#344d59;line-height:1.77;}
.article-buy .guide-chapter a:not(.btn) {color:#075d6d;}
.article-buy .guide-chapter--ice .cold-facts {
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;
 margin:23px 0 23px;
}
.article-buy .cold-fact {display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:5px;background:#fff;border:1px solid #c1dbf2;border-radius:18px;padding:17px 15px;box-shadow:0 8px 18px rgba(30,93,147,.055);}
.article-buy .cold-fact__symbol {display:grid;place-items:center;width:35px;height:35px;border-radius:12px;color:#1b679b;background:#e6f4ff;font-size:1.4rem;grid-row:span 2;}
.article-buy .cold-fact strong {color:#164568;white-space:nowrap;font-size:clamp(1.7rem,3vw,2.2rem);letter-spacing:-.05em;line-height:1;}
.article-buy .cold-fact strong small {font-size:.52em;letter-spacing:0;}
.article-buy .cold-fact>span:last-child {color:#4a6273;font-size:.77rem;line-height:1.45;}
.article-buy .cold-fact b {display:block;color:#264b66;margin-bottom:3px;font-size:.8rem;}
.article-buy .cold-facts .cold-facts__note {grid-column:1/-1;margin:0;color:#375d75;font-size:.77rem;line-height:1.55;}
.article-buy .guide-chapter .tip {border:1px solid #bcddf2;border-left:5px solid #1474b2;border-radius:14px;background:#fff;padding:19px 20px;margin:22px 0 0;box-shadow:0 6px 16px rgba(24,96,136,.055);}
.article-buy .guide-chapter .tip p {color:#244a61;}
.article-buy .cost-grid,
.article-buy .mistakes-grid {padding:0;margin:22px 0;list-style:none;display:grid;gap:12px;counter-reset:article-items;}
.article-buy .cost-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.article-buy .cost-grid li,
.article-buy .mistakes-grid li {counter-increment:article-items;position:relative;border-radius:15px;background:rgba(255,255,255,.88);border:1px solid rgba(100,84,57,.14);box-shadow:0 5px 11px rgba(59,69,52,.04);}
.article-buy .cost-grid li {padding:53px 17px 17px;font-size:.87rem;line-height:1.55;}
.article-buy .cost-grid li::before {content:counter(article-items,decimal-leading-zero);position:absolute;top:13px;left:16px;display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#fff0d5;color:#915214;font-weight:850;font-size:.79rem;}
.article-buy .cost-grid li::marker,
.article-buy .mistakes-grid li::marker {content:"";}
.article-buy .cost-grid li strong {color:#70430b;}
.article-buy .guide-chapter--sand .btn-primary {background:#976116;color:#fff;box-shadow:0 9px 18px rgba(100,61,12,.13);}
.article-buy .guide-chapter--sand .btn-primary:hover {background:#7d4d12;}
.article-buy .guide-chapter--sand>p:has(>a.btn) {margin-top:23px;}
.article-buy .model-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 24px;}
.article-buy .model {position:relative;overflow:hidden;background:#fff;border:1px solid #d1c1ef;box-shadow:0 9px 18px rgba(75,59,128,.06);padding:22px 19px;}
.article-buy .model::before {content:"";display:block;height:5px;position:absolute;inset:0 0 auto;background:#0b9697;}
.article-buy .model:nth-child(2)::before {background:#6c63c4;}
.article-buy .model:nth-child(3)::before {background:#dc8a4b;}
.article-buy .model:nth-child(4)::before {background:#3988aa;}
.article-buy .model h3 {margin:0;color:#1e3658;font-size:1.1rem;line-height:1.3;}
.article-buy .model p {color:#415265;}
.article-buy .model .model__type {color:#4e3b81;background:#f0eafa;border:1px solid #e3d7fa;}
.article-buy .model .model__link {display:inline-flex;align-items:center;align-self:flex-start;background:#efeafa;border-radius:10px;padding:9px 11px;color:#554297!important;text-decoration:none!important;font-weight:800;}
.article-buy .model .model__link:hover {background:#e1d8f6;}
.article-buy .mistakes-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.article-buy .mistakes-grid li {font-size:.88rem;line-height:1.55;padding:18px 17px 18px 57px;min-height:138px;}
.article-buy .mistakes-grid li::before {content:counter(article-items);position:absolute;top:16px;left:15px;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#fff;background:#ca6448;font-weight:850;}
.article-buy .mistakes-grid li:last-child {grid-column:1/-1;min-height:0;}
.article-buy .mistakes-grid li strong {color:#96442d;}
.article-buy .faq-intro {margin:-2px 0 20px!important;}
.article-buy .guide-chapter--mint .faq {background:#fff;border:1px solid #b5ddd0;border-radius:13px;box-shadow:0 4px 10px rgba(38,111,92,.04);}
.article-buy .guide-chapter--mint .faq[open] {background:#fff;box-shadow:0 9px 22px rgba(29,107,89,.09);}
.article-buy .guide-chapter--mint .faq summary {list-style:none;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:17px 19px;font-weight:750;line-height:1.45;color:#145243;}
.article-buy .guide-chapter--mint .faq summary::-webkit-details-marker {display:none;}
.article-buy .guide-chapter--mint .faq summary::after {content:"+";flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#d9f5e9;color:#0d715e;font-size:1.3rem;font-weight:600;line-height:1;}
.article-buy .guide-chapter--mint .faq[open] summary::after {content:"−";background:#0c836e;color:#fff;}
.article-buy .guide-chapter--mint .faq p {padding:0 19px 18px;color:#3a5e55;}
.article-buy .guide-chapter--slate .source-cards {list-style:none;padding:0;margin:22px 0;display:grid;gap:10px;}
.article-buy .guide-chapter--slate .source-cards li {background:#fff;border:1px solid #cddde7;border-radius:12px;padding:13px 14px 13px 42px;position:relative;font-size:.85rem;line-height:1.55;}
.article-buy .guide-chapter--slate .source-cards li::before {content:"↗";position:absolute;left:14px;top:13px;color:#285d7b;font-size:1rem;font-weight:900;}
.article-buy .guide-chapter--slate .guide-note {background:#d8e8f2;border-radius:10px;padding:13px 14px;color:#385d74!important;margin:20px 0 0;}
.article-buy .article-action {margin:40px -23px 0;border-radius:22px;background:linear-gradient(107deg,#064a60 0%,#077e7e 100%);padding:30px 32px;box-shadow:0 12px 31px rgba(6,87,93,.19);}
.article-buy .article-action .btn {border-color:#b7ddd9;}
@media(max-width:780px){
 .article-buy .reading {padding-top:33px;}
 .article-buy .guide-chapter {padding:26px 24px 27px;margin:29px 0;}
 .article-buy .article-action {margin:32px 0 0;}
}
@media(max-width:520px){
 .article-buy .guide-chapter {margin:24px -15px;padding:23px 17px 24px;border-radius:20px;}
 .article-buy .chapter-head {gap:11px;}
 .article-buy .chapter-emblem {width:44px;height:44px;flex-basis:44px;border-radius:13px;}
 .article-buy .chapter-emblem svg {width:23px;height:23px;}
 .article-buy .chapter-kicker {font-size:.67rem;}
 .article-buy .guide-chapter h2 {font-size:1.46rem;line-height:1.18;}
 .article-buy .guide-chapter .cold-facts,
 .article-buy .cost-grid,
 .article-buy .mistakes-grid,
 .article-buy .model-grid {grid-template-columns:minmax(0,1fr);}
 .article-buy .mistakes-grid li:last-child {grid-column:auto;}
 .article-buy .mistakes-grid li {min-height:0;}
 .article-buy .article-action {margin:30px -15px 0;padding:24px 20px;}
 .article-buy .reading__main .btn {max-width:100%;white-space:normal;}
}

/* V3.8 - Segunda guía: garrafa frente a red; conserva el estilo editorial V3.7 */
.guide-feature--second{margin-top:22px;background:linear-gradient(120deg,#eff5ff,#fff4e5);border-color:#d8e1f2;box-shadow:0 12px 27px rgba(33,87,120,.075)}
.guide-feature--second .guide-feature__media{order:2}
.guide-feature--second .guide-feature__label{background:#254a7e;color:#fff}
.guide-feature--second .guide-feature__body .kicker{color:#71449a}
.guide-feature--second .guide-feature__link{color:#185e87}
.article-top--comparison{background:linear-gradient(120deg,#edf8f8 0%,#fff5e5 65%,#faf3fe 100%)}
.article-top--comparison h1 em{color:#087f80;font-style:normal}
.article-buy .comparison-intro{padding:4px 0 15px}
.article-buy .comparison-intro h2{margin:6px 0 12px;font-size:clamp(1.7rem,3vw,2.25rem);letter-spacing:-.04em}
.article-buy .comparison-intro .lede{font-size:1.03rem}
.comparison-hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:25px 0 24px}
.comparison-hero-card{padding:22px 21px 24px;border-radius:19px;position:relative;overflow:hidden;min-height:245px;box-shadow:0 9px 22px rgba(26,87,110,.065)}
.comparison-hero-card--bottle{background:linear-gradient(150deg,#e3f6ef,#f5fcf8);border:1px solid #bce5d5}
.comparison-hero-card--network{background:linear-gradient(150deg,#e4eaff,#f6f4ff);border:1px solid #d4d7f4}
.comparison-hero-card .card-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#fff;color:#09766d;font-size:1.6rem;font-weight:700}
.comparison-hero-card--network .card-icon{color:#6252a0}
.comparison-hero-card .card-mini{display:block;margin:17px 0 4px;color:#52717a;font-size:.7rem;font-weight:850;letter-spacing:.08em}
.comparison-hero-card h3{margin:0 0 8px!important;font-size:1.35rem!important;color:#163b4f}
.comparison-hero-card p{font-size:.88rem;line-height:1.58!important}
.comparison-hero-card strong{font-size:.83rem;color:#0d7771}
.comparison-hero-card--network strong{color:#6251a1}
.article-buy .compare-essentials{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.article-buy .essential{display:flex;gap:12px;border-radius:15px;background:#fff;border:1px solid #d0e3f2;padding:17px 15px;box-shadow:0 5px 12px rgba(36,100,155,.04)}
.article-buy .essential>span{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#e4f2fc;color:#266a9b;font-size:.8rem;font-weight:900}
.article-buy .essential h3{margin:2px 0 8px;font-size:1rem;color:#20506f}
.article-buy .essential p{font-size:.82rem;line-height:1.58;margin:0}
.article-buy .cost-note{border-radius:14px;background:#fff;border:1px solid #eed7af;padding:18px 19px;margin:18px 0 0}
.article-buy .cost-note strong{color:#97581b}
.article-buy .cost-note p{margin:7px 0 0;font-size:.88rem}
.article-buy .comparison-calculator .chapter-head{margin-bottom:14px}
.article-buy .comparison-calculator>p{font-size:.9rem}
.article-buy #costComparison{margin:21px 0 24px}
.article-buy .cost-calc-usage{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid #d5c4ef;border-radius:14px;padding:16px 17px;margin-bottom:13px}
.article-buy .cost-calc-usage>label{font-size:1rem;font-weight:750;color:#3b286f}
.article-buy .usage-control{display:flex;align-items:center;gap:10px}
.article-buy .usage-control input{width:100px}
.article-buy .usage-control span{font-weight:700;color:#665294}
.article-buy .cost-calc-columns{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.article-buy .cost-calc-side{min-width:0;padding:18px;border-radius:16px;background:#fff;border:1px solid #d9cdef;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.article-buy .cost-calc-side--bottle{border-top:5px solid #058e80}
.article-buy .cost-calc-side--network{border-top:5px solid #7a56bd}
.article-buy .cost-calc-side legend{font-size:1rem;font-weight:850;color:#2c4660;padding:0 7px}
.article-buy .cost-input{min-width:0;display:flex;flex-direction:column;gap:5px}
.article-buy .cost-input label{font-size:.79rem;font-weight:700;line-height:1.35;color:#385265}
.article-buy .cost-input input,.article-buy .usage-control input{font:inherit;font-variant-numeric:tabular-nums;color:#243e55;border:1px solid #c6d7e4;background:#fbfeff;border-radius:9px;padding:10px 11px;max-width:100%;min-height:43px}
.article-buy .cost-input input:focus-visible,.article-buy .usage-control input:focus-visible{outline:3px solid #a5d6ee;outline-offset:1px}
.article-buy .cost-calc-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:15px 0 0}
.article-buy .cost-calc-actions .btn{border-color:#d4c8e8;background:#fff;color:#584080;font-size:.8rem;padding:10px 13px}
.article-buy .cost-calc-actions>span{font-size:.74rem;color:#68577a}
.article-buy .cc-error{color:#97321d;font-weight:750;border-radius:10px;padding:12px;background:#ffebde;margin:15px 0}
.article-buy .cc-results{border:1px solid #c8b5eb;background:#fff;border-radius:18px;padding:22px;box-shadow:0 9px 23px rgba(67,43,118,.09)}
.article-buy .cc-result-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin:0 0 18px}
.article-buy .cc-result-heading h3{font-size:1.35rem!important;margin:3px 0 0;color:#292c59}
.article-buy .cc-demo-tag{padding:7px 10px;background:#f0eafa;border-radius:999px;color:#64469b;font-size:.7rem;font-weight:750;white-space:nowrap}
.article-buy .cc-year-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.article-buy .cc-year-card{background:#f8f9fe;border:1px solid #dde0f2;border-radius:13px;padding:15px 13px}
.article-buy .cc-year-card h4{margin:0 0 14px;font-size:1.05rem;color:#29385a}
.article-buy .cc-row{margin:0 0 11px}
.article-buy .cc-row__head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;font-size:.75rem;line-height:1.45}
.article-buy .cc-row__head span{color:#566276}
.article-buy .cc-row__head b{color:#172f49;font-variant-numeric:tabular-nums;font-size:.91rem}
.article-buy .cc-track{height:8px;border-radius:999px;background:#dfe7ed;overflow:hidden;margin-top:7px}
.article-buy .cc-track>span{display:block;height:100%;border-radius:999px;background:#098c84;min-width:0}
.article-buy .cc-row--network .cc-track>span{background:#8160bc}
.article-buy .cc-year-card .cc-winner{display:block;border-top:1px solid #dce4ed;margin-top:13px;padding-top:9px;font-size:.71rem;font-weight:800;color:#406177}
.article-buy .cc-summary{margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.article-buy .cc-summary-item{display:flex;flex-direction:column;gap:5px;background:#f4f7fb;border-radius:12px;padding:12px 14px}
.article-buy .cc-summary-item small{color:#5e6875;line-height:1.4}
.article-buy .cc-summary-item strong{font-size:1.3rem;color:#263e5b;font-variant-numeric:tabular-nums}
.article-buy .cc-verdict{padding:15px 16px;background:#e0f4ee;border-radius:11px;color:#135849!important;font-size:.91rem!important;font-weight:750;margin:0 0 10px!important}
.article-buy .cc-cross{color:#495c70!important;font-size:.8rem!important;margin:0!important}
.article-buy .cc-assumptions{background:#fff;border:1px solid #d4c7e9;border-radius:13px;margin:20px 0 18px;padding:15px 18px}
.article-buy .cc-assumptions summary{font-weight:800;cursor:pointer;color:#624794}
.article-buy .cc-assumptions ul{padding-left:19px!important;font-size:.82rem}
.article-buy .calc-editorial-note{font-size:.8rem!important}
.article-buy .decision-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.article-buy .decision-tile{background:#fff;border:1px solid #e8c9bd;border-radius:16px;padding:19px}
.article-buy .decision-tile span{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;color:#fff;background:#bf6548;font-weight:800}
.article-buy .decision-tile h3{margin:12px 0 8px;font-size:1rem;color:#773f34}
.article-buy .decision-tile p{margin:0;font-size:.86rem;line-height:1.55}
.article-buy .decision-lesson{border-left:4px solid #b85f41;border-radius:9px;padding:16px;background:#fff;color:#674539;margin:15px 0 20px;font-size:.87rem;line-height:1.6}
.article-buy .guide-chapter .chapter-head+div{max-width:100%}
@media(max-width:810px){
 .article-buy .cc-year-grid{grid-template-columns:1fr}
 .article-buy .cc-year-card{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
 .article-buy .cc-year-card h4,.article-buy .cc-year-card .cc-winner{grid-column:1/-1}
}
@media(max-width:570px){
 .comparison-hero-cards,.article-buy .compare-essentials,.article-buy .cost-calc-columns,.article-buy .decision-tiles,.article-buy .cc-summary{grid-template-columns:1fr}
 .article-buy .cost-calc-usage{align-items:flex-start;flex-direction:column}
 .article-buy .cc-results{padding:16px 13px}
 .article-buy .cc-year-card{grid-template-columns:1fr}
 .article-buy .cc-result-heading{flex-direction:column}
 .article-buy .guide-feature--second .guide-feature__media{order:0}
 .article-buy .cost-calc-side{padding:14px}
 .article-buy .decision-tile{padding:15px}
}
@media(max-width:780px){.guide-feature--second .guide-feature__media{order:0}}


/* Agua en Claro V3.9: tercera guía, diseño editorial a color */
.article-top--energy{background:linear-gradient(125deg,#e1f5f6 0%,#f3f3ff 55%,#fff1d9 100%)}
.article-top--energy h1 em{font-style:normal;color:#0a8383}
.guide-feature--third{background:linear-gradient(135deg,#ebf8fc,#f9f3ff);border-color:#cee5ee}
.guide-feature--third .guide-feature__label{background:#5446a9;color:#fff}
.article-buy .energy-intro>h2{font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.035em;margin:7px 0 12px}
.article-buy .energy-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:23px 0}
.article-buy .energy-fact{border-radius:16px;border:1px solid #c3e7e1;background:#e8f8f4;padding:16px;min-width:0}
.article-buy .energy-fact--violet{background:#f1ebff;border-color:#d8cbf1}
.article-buy .energy-fact--amber{background:#fff3df;border-color:#f4dfc1}
.article-buy .energy-symbol{display:grid;place-items:center;background:#fff;border-radius:12px;width:40px;height:40px;color:#127e75;font-weight:900;font-size:1.2rem}
.article-buy .energy-fact--violet .energy-symbol{color:#7454bd}.article-buy .energy-fact--amber .energy-symbol{color:#b27029}
.article-buy .energy-fact h3{font-size:.97rem;margin:15px 0 9px;color:#244258}
.article-buy .energy-fact strong{display:block;font-size:1.75rem;color:#153d54;letter-spacing:-.04em;margin-bottom:8px;font-variant-numeric:tabular-nums}
.article-buy .energy-fact p{font-size:.8rem;line-height:1.48;margin:0}
.article-buy .energy-formula{display:flex;gap:14px;align-items:flex-start;background:#092f43;color:#fff;padding:19px;border-radius:16px;margin:20px 0}
.article-buy .energy-formula>span{font-size:1.5rem;flex:0 0 38px}
.article-buy .energy-formula strong{color:#a9f1df}
.article-buy .energy-formula p{color:#eff7fc;font-size:.88rem;margin:5px 0 0;line-height:1.6}
.article-buy .energy-models{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.article-buy .energy-model{background:#fff;border:1px solid #c8dfea;border-radius:15px;padding:18px;min-width:0}
.article-buy .energy-model--warm{border-color:#eed5b5}
.article-buy .energy-model__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.article-buy .energy-model__top strong{font-size:1.6rem;font-variant-numeric:tabular-nums;color:#1c6691;white-space:nowrap}
.article-buy .energy-model--warm .energy-model__top strong{color:#b66d23}
.article-buy .energy-pill{font-size:.67rem;color:#186c7e;border-radius:99px;background:#e3f6f8;padding:6px 8px;font-weight:800}
.article-buy .energy-model--warm .energy-pill{color:#97601d;background:#fff2da}
.article-buy .energy-model h3{font-size:1.03rem;margin:16px 0 9px;color:#183e5a}
.article-buy .energy-model p{font-size:.83rem;line-height:1.65}
.article-buy .energy-model a{font-size:.8rem;font-weight:750}
.article-buy .energy-calc{margin:22px 0 0}
.article-buy .energy-mode{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0 0 15px;border:0;padding:0;min-width:0}
.article-buy .energy-mode legend{font-weight:850;color:#503b7d;margin-bottom:12px;font-size:.93rem}
.article-buy .energy-choice{display:flex;align-items:flex-start;gap:11px;background:#fff;border:2px solid #e0d8f2;border-radius:14px;padding:15px 13px;cursor:pointer;min-width:0}
.article-buy .energy-choice:has(input:checked){border-color:#8b64c5;background:#fdfbff;box-shadow:0 0 0 2px #d8c8f2}
.article-buy .energy-choice input{accent-color:#7f58bd;flex-shrink:0;margin-top:4px}
.article-buy .energy-choice strong{display:block;font-size:.84rem;color:#363057;line-height:1.4}
.article-buy .energy-choice small{display:block;font-size:.72rem;line-height:1.4;color:#6b627f;margin-top:5px}
.article-buy .energy-fields{background:#fff;border:1px solid #d7c7ed;padding:18px;border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.article-buy .energy-calc [hidden]{display:none!important}
.article-buy .energy-fields__title{grid-column:1/-1;font-size:.85rem;font-weight:850;color:#624b9b;padding-bottom:6px;border-bottom:1px solid #e4dcf1}
.article-buy .energy-fields__title:not(:first-child){margin-top:8px}
.article-buy .energy-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.article-buy .energy-field label,.article-buy .energy-rate label{font-size:.77rem;font-weight:760;color:#374d63;line-height:1.4}
.article-buy .energy-field input,.article-buy .energy-rate input{min-height:43px;border:1px solid #c9c9e1;border-radius:9px;background:#fcfdff;padding:10px 12px;font:inherit;color:#243857;width:100%;font-variant-numeric:tabular-nums}
.article-buy .energy-field input:focus-visible,.article-buy .energy-rate input:focus-visible{outline:3px solid #a8cbea;outline-offset:2px}
.article-buy .energy-field-note{grid-column:1/-1;margin:0!important;font-size:.77rem!important;color:#59677f!important;background:#f7f6fe;padding:11px 13px;border-radius:9px}
.article-buy .energy-rate{background:#fff;border:1px solid #d7c7ed;border-radius:12px;padding:15px;display:flex;gap:15px;justify-content:space-between;align-items:center;margin:13px 0}
.article-buy .energy-rate input{max-width:140px;flex:0 0 120px}
.article-buy .energy-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:17px 0}
.article-buy .energy-actions .btn{background:#fff;color:#62429f;border:1px solid #cbb7e4;padding:9px 14px;font-size:.78rem}
.article-buy .energy-actions span{color:#665977;font-size:.76rem}
.article-buy .energy-error{color:#9b3c24;background:#ffe5df;border-radius:10px;padding:12px;font-weight:750}
.article-buy .energy-results{padding:22px;background:#fff;border:1px solid #cabbec;border-radius:17px;box-shadow:0 8px 24px rgba(56,36,100,.08)}
.article-buy .energy-results__tag{display:inline-block;background:#f1e9fc;color:#654391;padding:7px 10px;border-radius:100px;font-size:.7rem;font-weight:800}
.article-buy .energy-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.article-buy .energy-kpi{background:#eef8fa;border:1px solid #d2e7ee;padding:14px 10px;border-radius:13px;min-width:0}
.article-buy .energy-kpi--focus{background:#073f56;border-color:#073f56}
.article-buy .energy-kpi small{display:block;min-height:38px;color:#4a6774;font-size:.73rem;line-height:1.4}
.article-buy .energy-kpi strong{display:block;font-size:clamp(1.1rem,2.2vw,1.62rem);color:#154866;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
.article-buy .energy-kpi--focus strong{color:#fff}.article-buy .energy-kpi--focus small{color:#b9dadd}
.article-buy .energy-totals{display:grid;grid-template-columns:1fr auto;gap:9px 15px;border-top:1px solid #dbe5ed;padding:15px 4px;color:#435a72;font-size:.83rem}
.article-buy .energy-totals strong{color:#2e3b5b;font-variant-numeric:tabular-nums}
.article-buy .energy-verdict{padding:13px;border-left:4px solid #078e86;border-radius:9px;background:#ebf8f5;font-size:.8rem!important;color:#235c5b!important;margin:14px 0 0!important}
.article-buy .energy-footnote{font-size:.81rem;line-height:1.6;background:#f8f1ff;border-left:4px solid #9b74c8;padding:14px;margin:16px 0;border-radius:9px}
.article-buy .energy-steps{display:grid;gap:11px;margin:19px 0}
.article-buy .energy-step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #f2d9af;border-radius:14px;padding:17px}
.article-buy .energy-step>span{flex:0 0 40px;width:40px;height:40px;background:#fff1d6;color:#b17a18;border-radius:11px;display:grid;place-items:center;font-weight:900}
.article-buy .energy-step h3{font-size:.99rem;color:#79582c;margin:1px 0 8px}
.article-buy .energy-step p{font-size:.82rem;margin:0;line-height:1.6}
.article-buy .energy-causes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:21px 0}
.article-buy .energy-cause{background:#fff;border:1px solid #efcfca;padding:15px;border-radius:13px}
.article-buy .energy-cause b{display:grid;place-items:center;background:#fff1e9;border-radius:9px;color:#bb6251;font-size:1.3rem;width:33px;height:33px}
.article-buy .energy-cause h3{margin:11px 0 8px;color:#884b40;font-size:.98rem}
.article-buy .energy-cause p{font-size:.82rem;line-height:1.55;margin:0}
@media(max-width:800px){.article-buy .energy-facts{grid-template-columns:1fr 1fr}.article-buy .energy-fact:last-child{grid-column:1/-1}.article-buy .energy-kpis{grid-template-columns:1fr}.article-buy .energy-kpi small{min-height:0}.article-buy .energy-kpi strong{font-size:1.55rem}}
@media(max-width:570px){.article-buy .energy-facts,.article-buy .energy-models,.article-buy .energy-mode,.article-buy .energy-fields,.article-buy .energy-causes{grid-template-columns:1fr}.article-buy .energy-fact:last-child{grid-column:auto}.article-buy .energy-fields__title,.article-buy .energy-field-note{grid-column:auto}.article-buy .energy-rate{flex-direction:column;align-items:stretch}.article-buy .energy-rate input{flex:unset;max-width:100%}.article-buy .energy-results{padding:15px}.article-buy .energy-formula{padding:14px}.article-buy .energy-model__top strong{font-size:1.35rem}}