/*
 * refine.css — capa de refinamiento visual sobre BaseLayout.*.css
 * Quita los recursos "por defecto" (píldoras, manchas difuminadas, vidrio,
 * degradados decorativos) sin tocar la estructura que usa scripts/build.mjs.
 * Para revertir: borrar este archivo y su <link> en cada página.
 */

/* ── 1. Tokens: radios más contenidos, una sola escala coherente ── */
:root {
  --radius-md: .5rem;
  --radius-lg: .625rem;
  --radius-xl: .75rem;
  --radius-2xl: .875rem;
  --radius-3xl: 1rem;
  --rf-btn-radius: .5rem;
  --rf-rule: var(--color-accent);
}

/* ── 2. Superficies del navegador ── */
::selection { background: var(--color-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
a { text-underline-offset: .2em; }
input, textarea, select { accent-color: var(--color-primary); caret-color: var(--color-primary); }

/* ── 3. Decoración genérica fuera: manchas, figuras flotantes, retículas de puntos, olas ── */
section div.absolute.rounded-full[class*="blur"],
footer div.absolute.rounded-full[class*="blur"],
section div.absolute.rounded-full.pointer-events-none:not(:has(*)),
section div.absolute.rounded-full.animate-float:not(:has(*)),
section div.absolute.bg-gradient-radial,
[class*="hero-shape-"], .cta-shape,
.hero-grid, .cta-grid,
section > div.absolute[style*="radial-gradient(rgba(255,255,255"],
section > div.absolute:has(> svg[preserveAspectRatio="none"]),
footer > div.absolute:has(> svg[preserveAspectRatio="none"]) {
  display: none !important;
}

/* Sin ola, el corte del hero queda recto: compensar el padding que la ola ocupaba */
section:has(> div.absolute > svg[preserveAspectRatio="none"]) .pb-28 { padding-bottom: 5rem; }

/* Fondos de sección claros: plano en vez de degradado diagonal */
.gradient-section-light { background: var(--color-light); }

/* ── 4. Etiquetas tipo píldora sobre los títulos: el título habla solo ── */
span.rounded-full.font-semibold.text-primary:is(.inline-block, .inline-flex),
.text-center > span.inline-block.rounded-full.bg-white\/15 {
  display: none !important;
}
div.flex.items-center:has(> span.rounded-full.font-semibold.text-primary:only-child) { display: none; }

/* Etiquetas de sección en políticas: sólidas, sin degradado ni píldora */
span.inline-flex.rounded-full.bg-gradient-to-r.from-navy.to-primary {
  background: var(--color-navy);
  border-radius: 4px;
  box-shadow: none;
}

/* ── 5. Credencial del hero ("Más de 8 años…"): sin píldora, sin vidrio, sin pulso ── */
div:has(> div.inline-flex.rounded-full.backdrop-blur-sm.animate-fade-in-up) {
  display: flex;
  flex-direction: column;
}
div.inline-flex.rounded-full.backdrop-blur-sm.animate-fade-in-up {
  order: 10;
  margin: 2.25rem 0 0;
  padding: 1.25rem 0 0;
  gap: .75rem;
  background: none;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / .16);
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: rgb(255 255 255 / .78);
  font-size: .8125rem;
  letter-spacing: .02em;
  align-self: stretch;
  max-width: 34rem;
}
.text-center > div.inline-flex.rounded-full.backdrop-blur-sm.animate-fade-in-up {
  justify-content: center;
  margin-inline: auto;
  width: 100%;
}
div.inline-flex.rounded-full.backdrop-blur-sm.animate-fade-in-up > div.animate-pulse {
  animation: none;
  width: 1.25rem;
  height: 2px;
  border-radius: 0;
  background: var(--rf-rule);
}

/* ── 6. Cifras sobre las fotos del hero: etiqueta impresa, no cristal ── */
.hero-badge, .hero-badge-2, .hero-badge-3 {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 6px 16px -6px rgb(10 20 60 / .45);
  padding: .4rem .6rem .45rem !important;
}
.hero-badge p, .hero-badge-2 p, .hero-badge-3 p { color: var(--color-navy) !important; }
.hero-badge p + p, .hero-badge-2 p + p, .hero-badge-3 p + p {
  color: var(--color-muted) !important;
  font-size: .6875rem;
}
.hero-badge-2 { background: var(--color-navy) !important; }
.hero-badge-2 p { color: #fff !important; }
.hero-badge-2 p + p { color: rgb(255 255 255 / .75) !important; }

/* Etiquetas de categoría en galería/productos: sin vidrio */
span.inline-block.rounded-full.bg-white\/20.backdrop-blur-sm {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgb(22 39 101 / .82);
  border-radius: 4px;
  letter-spacing: .02em;
}

/* Franja de cifras sobre la foto de "Especialistas": sólida */
#especialistas-section .backdrop-blur-sm.bg-navy\/85 {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--color-navy);
}

/* ── 7. Botones: esquinas contenidas, sin halo de brillo ── */
:is(a, button).rounded-full[class*="px-"] { border-radius: var(--rf-btn-radius); }
.hover\:shadow-glow:hover { box-shadow: 0 8px 20px -8px rgb(3 78 162 / .55); }

/* ── 8. Iconos: tinta plana en lugar de degradado ── */
.bg-gradient-to-br.from-navy.to-primary-light { background: var(--color-navy); }

/* Cifras: los íconos encima de cada número sobran; números tabulares */
#stats-section .w-16.h-16.mx-auto { display: none; }
#stats-section [data-target], #stats-section .font-heading { font-variant-numeric: tabular-nums; }

/* CTA final: fuera el destello flotante sobre el título */
#cta-section .animate-float { display: none; }

/* ── 9. Títulos: énfasis con color plano, no texto degradado ── */
.gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--color-primary);
}

/* ── 10. Testimonios: sin barra degradada al pasar el cursor ── */
#testimonials-section .bg-gradient-to-r.from-primary.via-primary-light { display: none; }

/* ── 11. FAQ: la numeración 01–05 no aporta, se oculta ── */
[data-faq-toggle] > div > span.w-8.h-8:first-child { display: none; }

/* ── 12. Texto enriquecido de WordPress (ver setRichHtml en build.mjs) ── */
[data-rich-text] > * + * { margin-top: 1em; }

@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-pulse { animation: none !important; }
}