/*
  NegoCore Custom: plan de diseño
  =================================================================
  Encargo: autónomos y pequeños negocios que quieren una web o una
  herramienta a buen precio. Trabajo de la página: que confíen y pidan
  presupuesto. Dirección visual pedida por el titular: el estilo de
  notion.com (sin su marca, logos, ilustraciones ni textos).

  Pieza memorable: bajo la portada, una ventana de aplicación de ejemplo
  con el tablero de pedidos de una panadería, con columnas y etiquetas de
  estado. Usa el lenguaje de etiquetas de Notion para enseñar justo lo
  que se vende: una herramienta de negocio a medida.

  Color: siempre en modo oscuro (petición del titular), como el modo
  oscuro de Notion
    --fondo       #191919             fondo
    --texto       rgba(255,255,255,.92) texto
    --texto-suave rgba(255,255,255,.62) texto secundario
    --panel       #202020             paneles
    --borde       #2F2F2F             bordes de tarjetas y separadores
    --azul        #1F6CC6             botón principal (texto blanco AA)
    --azul-texto  #7DB7F2             enlaces y botón secundario
    Etiquetas en tonos oscuros (gris, amarillo, verde, azul y rosa) con
    texto claro de su mismo tono, todas con contraste AA.

  Tipografía
    Inter (variable, OFL), una sola familia. Portada en 650 con interletraje
    muy cerrado (−0,045em); títulos de sección en 700; texto en 400 a 16-20 px.

  Maqueta
    [N NegoCore Custom]   Servicios Precios Cómo Preguntas   [Pedir presupuesto]
                 Aplicaciones y webs a medida
                       para tu negocio            (centrado)
                       texto centrado
                [Pedir presupuesto] [Ver precios]
       ┌──────── ventana: lateral | tablero Nuevo / En el horno / Listo ───────┐
    Servicios:  dos paneles grises redondeados
    Precios:    cuatro tarjetas con borde
    Proceso:    cinco pasos numerados en fila (secuencia real)
    Preguntas:  título a la izquierda | desplegables a la derecha
    Contacto:   panel gris: introducción | formulario en tarjeta blanca
    Pie:        marca | La web | Contacto | Legal

  Principios
    - Blanco, aire y tipografía grande; el color solo en etiquetas y acciones.
    - Ningún paquete destacado como «el más pedido» (sería inventado).
    - Sin animaciones al cargar; solo responde a lo que hace el visitante.
*/

@font-face {
  font-family: "Inter";
  src: url("/fuentes/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --fondo: #191919;
  --texto: rgba(255, 255, 255, 0.92);
  --texto-suave: rgba(255, 255, 255, 0.62);
  --panel: #202020;
  --panel-claro: #262626;
  --hundido: #1E1E1E;
  --borde: #2F2F2F;
  --borde-campo: #6B6B6B;
  --azul: #1F6CC6;
  --azul-oscuro: #1A5BAA;
  --azul-texto-hover: #A9CFF7;
  --azul-suave: #1D2B3B;
  --azul-suave-hover: #22354A;
  --azul-texto: #7DB7F2;
  --error: #FF8A80;
  --error-fondo: #3B2220;
  --exito-fondo: #22392C;
  --exito-texto: #B5E3C5;

  --et-gris: #373737;     --et-gris-t: #E3E2E0;
  --et-amarillo: #564328; --et-amarillo-t: #FBE3B6;
  --et-verde: #243D30;    --et-verde-t: #C3E6CF;
  --et-azul: #143A4E;     --et-azul-t: #C6E2F2;
  --et-rosa: #4E2C3C;     --et-rosa-t: #F5D4E3;

  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-portada: clamp(2.5rem, 0.9rem + 6.4vw, 5.5rem);
  --t-seccion: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);

  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;
  --esp-6: 7rem;

  --ancho: 76rem;
  --margen: 1rem;
  --radio: 12px;
}

@media (min-width: 48rem) {
  :root { --margen: 2rem; }
}

/* Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

h3 { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.3; }

p, ul, ol, figure { margin: 0; }

a { color: var(--azul-texto); text-underline-offset: 0.18em; }
a:hover { color: var(--azul-texto-hover); }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] { scroll-margin-top: 5rem; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.saltar {
  position: absolute;
  left: var(--esp-2);
  top: -10rem;
  z-index: 20;
  padding: var(--esp-1) var(--esp-2);
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  font-weight: 600;
}
.saltar:focus { top: var(--esp-1); color: #fff; }

/* Botones --------------------------------------------------------- */

.boton {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--azul-oscuro); color: #fff; }
.boton[disabled] { opacity: 0.65; cursor: progress; }

.boton--suave { background: var(--azul-suave); color: var(--azul-texto); }
.boton--suave:hover { background: var(--azul-suave-hover); color: var(--azul-texto-hover); }

.boton--peque { padding: 0.45rem 0.85rem; font-size: 0.9375rem; }

/* Cabecera -------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(25, 25, 25, 0.96);
  border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 4rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  color: var(--texto);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}
.marca:hover { color: var(--texto); }

.menu { margin-right: auto; }
.menu ul { display: flex; gap: var(--esp-3); padding: 0; list-style: none; }
.menu a { color: var(--texto); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.menu a:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .menu { display: none; }
}

.boton--peque { white-space: nowrap; }

/* En móvil, la marca y el botón tienen que caber en una línea */
@media (max-width: 26rem) {
  .cabecera .marca img { display: none; }
  .cabecera .boton--peque { padding: 0.4rem 0.7rem; font-size: 0.875rem; }
}
@media (max-width: 22rem) {
  .cabecera .marca img { display: block; }
  .cabecera .marca span { display: none; }
}

/* Portada --------------------------------------------------------- */

.portada { padding-top: var(--esp-5); text-align: center; }

.portada h1 {
  max-width: 13ch;
  margin-inline: auto;
  font-size: var(--t-portada);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.portada__texto {
  max-width: 40rem;
  margin: var(--esp-3) auto 0;
  color: var(--texto-suave);
  font-size: 1.125rem;
  line-height: 1.5;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--esp-4);
}

@media (min-width: 48rem) {
  .portada { padding-top: var(--esp-6); }
  .portada__texto { font-size: 1.25rem; }
}

/* Ventana de ejemplo (la pieza memorable) */

.muestra { margin-top: var(--esp-5); text-align: left; }

.ventana {
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.02);
  font-size: 0.875rem;
  line-height: 1.4;
}

.ventana__barra {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--borde);
  background: var(--panel);
}
.ventana__puntos { display: flex; gap: 6px; }
.ventana__puntos i { width: 10px; height: 10px; border-radius: 50%; background: #4A4A4A; }
.ventana__pestana { color: var(--texto-suave); font-size: 0.8125rem; }

.ventana__cuerpo { display: grid; grid-template-columns: 1fr; min-height: 21rem; }

.ventana__lateral { display: none; }

.ventana__principal { padding: var(--esp-3) var(--esp-2); overflow: hidden; }

.ventana__titulo {
  margin-bottom: var(--esp-2);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tablero {
  display: grid;
  grid-template-columns: repeat(3, minmax(13rem, 1fr));
  gap: 0.75rem;
}

.columna {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: var(--hundido);
}
.columna__titulo { color: var(--texto-suave); font-size: 0.8125rem; }

.ficha {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  box-shadow: none;
}
.ficha p { font-weight: 500; }
.ficha small { color: var(--texto-suave); font-size: 0.75rem; }

.etiqueta {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.etiqueta--gris { background: var(--et-gris); color: var(--et-gris-t); }
.etiqueta--amarillo { background: var(--et-amarillo); color: var(--et-amarillo-t); }
.etiqueta--verde { background: var(--et-verde); color: var(--et-verde-t); }
.etiqueta--azul { background: var(--et-azul); color: var(--et-azul-t); }
.etiqueta--rosa { background: var(--et-rosa); color: var(--et-rosa-t); }

.icono {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.icono--amarillo { background: var(--et-amarillo); color: var(--et-amarillo-t); }
.icono--azul { background: var(--et-azul); color: var(--et-azul-t); }
.icono--verde { background: var(--et-verde); color: var(--et-verde-t); }

.muestra figcaption {
  margin-top: var(--esp-2);
  color: var(--texto-suave);
  font-size: 0.875rem;
  text-align: center;
}

@media (min-width: 52rem) {
  .ventana__cuerpo { grid-template-columns: 13.5rem 1fr; }
  .ventana__lateral {
    display: block;
    padding: var(--esp-2) 0.6rem;
    border-right: 1px solid var(--borde);
    background: var(--panel);
    color: var(--texto-suave);
  }
  .ventana__negocio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem var(--esp-2);
    color: var(--texto);
    font-weight: 600;
  }
  .ventana__lateral ul { padding: 0; list-style: none; }
  .ventana__lateral li { padding: 0.3rem 0.5rem; border-radius: 6px; }
  .ventana__lateral .activo { background: #2C2C2C; color: var(--texto); font-weight: 500; }
  .ventana__principal { padding: var(--esp-4) var(--esp-4) var(--esp-3); }
  .ventana__titulo { font-size: 2rem; }
}

/* Secciones ------------------------------------------------------- */

.seccion { padding-block: var(--esp-5); }

@media (min-width: 48rem) {
  .seccion { padding-block: var(--esp-6) 0; }
  .seccion:last-child { padding-bottom: var(--esp-6); }
}

.seccion__titulo {
  font-size: var(--t-seccion);
  letter-spacing: -0.035em;
  text-align: center;
}

.seccion__intro {
  max-width: 38rem;
  margin: var(--esp-2) auto 0;
  color: var(--texto-suave);
  font-size: 1.125rem;
  text-align: center;
}

/* Servicios */

.servicios {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.panel {
  padding: var(--esp-4) var(--esp-3);
  border-radius: 16px;
  background: var(--panel);
}
.panel .icono { width: 2.25rem; height: 2.25rem; border-radius: 8px; font-size: 1rem; }
.panel h3 { margin-top: var(--esp-2); font-size: 1.5rem; letter-spacing: -0.02em; }
.panel > p { max-width: 34rem; margin-top: var(--esp-1); color: var(--texto-suave); font-size: 1.0625rem; }

.lista-ejemplos {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--esp-3);
  padding: 0;
  list-style: none;
}
.lista-ejemplos li {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  font-weight: 500;
}

@media (min-width: 48rem) {
  .servicios { grid-template-columns: 1fr 1fr; }
  .panel { padding: var(--esp-4); }
}

/* Precios */

.paquetes {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  padding: 0;
  list-style: none;
}

.paquete {
  display: flex;
  flex-direction: column;
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.paquete h3 { font-size: 1.125rem; }

.paquete__precio {
  margin-top: var(--esp-2);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.paquete__precio span {
  margin-right: 0.15rem;
  color: var(--texto-suave);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}
.paquete__precio small { font-size: 0.5em; font-weight: 600; letter-spacing: 0; }

.paquete__resumen { min-height: 3em; margin-top: var(--esp-1); color: var(--texto-suave); }

.paquete .boton { margin-top: var(--esp-2); }

.paquete__incluye {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--esp-3);
  padding: var(--esp-3) 0 0;
  border-top: 1px solid var(--borde);
  list-style: none;
  font-size: 0.9375rem;
}
.paquete__incluye li { position: relative; padding-left: 1.6rem; }
.paquete__incluye li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.3rem;
  width: 0.4rem;
  height: 0.75rem;
  border: solid var(--azul);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.paquetes__nota {
  margin-top: var(--esp-3);
  color: var(--texto-suave);
  font-size: 0.9375rem;
  text-align: center;
}

/* cinco paquetes: 1 columna en móvil, 2 + 2 + 1, 3 + 2 y 5 en escritorio */
@media (min-width: 40rem) {
  .paquetes { grid-template-columns: repeat(2, 1fr); }
  .paquete__precio { font-size: 2rem; }
  .paquete__precio span { display: block; margin-bottom: 0.3rem; }
}
@media (min-width: 56rem) {
  .paquetes { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 70rem) {
  .paquetes { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 0; }
  /* subgrid: título, precio, resumen, botón y lista alineados entre tarjetas */
  .paquete { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
  .paquete__resumen { min-height: 0; }
  .paquete__incluye { align-content: start; }
  .paquete .boton { padding-inline: 0.5rem; font-size: 0.9375rem; white-space: nowrap; align-self: start; }
}

/* Proceso */

.pasos {
  counter-reset: paso;
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  padding: 0;
  list-style: none;
}

.pasos li {
  counter-increment: paso;
  padding: var(--esp-3);
  border-radius: var(--radio);
  background: var(--panel);
}
.pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--esp-2);
  border-radius: 50%;
  background: var(--fondo);
  color: var(--texto);
  font-weight: 700;
}
.pasos h3 { font-size: 1.0625rem; }
.pasos p { margin-top: 0.35rem; color: var(--texto-suave); font-size: 0.9375rem; }

@media (min-width: 40rem) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 70rem) {
  .pasos { grid-template-columns: repeat(5, 1fr); }
}

/* Preguntas */

.preguntas-rejilla { display: grid; gap: var(--esp-3); }
.preguntas-rejilla .seccion__titulo { text-align: left; }

.preguntas { border-top: 1px solid var(--borde); }
.preguntas details { border-bottom: 1px solid var(--borde); }

.preguntas summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-2);
  padding-block: 1.1rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.3rem;
  border: solid var(--texto-suave);
  border-width: 0 2px 2px 0;
  transform: translateY(-25%) rotate(45deg);
}
.preguntas details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.preguntas details p { max-width: 42rem; padding-bottom: 1.1rem; color: var(--texto-suave); font-size: 1.0625rem; }

@media (prefers-reduced-motion: no-preference) {
  .preguntas summary::after { transition: transform 0.15s ease; }
}

@media (min-width: 60rem) {
  .preguntas-rejilla { grid-template-columns: 1fr 2fr; gap: var(--esp-5); align-items: start; }
}

/* Contacto -------------------------------------------------------- */

.contacto {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-2);
  border-radius: 16px;
  background: var(--panel);
}

.contacto__intro h2 { font-size: var(--t-seccion); letter-spacing: -0.035em; }
.contacto__intro p { max-width: 26rem; margin-top: var(--esp-2); color: var(--texto-suave); font-size: 1.125rem; }
.contacto__intro .contacto__correo { color: var(--texto); font-size: 1rem; }
.contacto__correo a { font-weight: 600; }

@media (min-width: 48rem) {
  .contacto { padding: var(--esp-5) var(--esp-4); }
}
@media (min-width: 64rem) {
  .contacto { grid-template-columns: 1fr 1.25fr; gap: var(--esp-5); padding: var(--esp-5); }
}

.formulario {
  display: grid;
  gap: 1.25rem;
  padding: var(--esp-3) var(--esp-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
}

@media (min-width: 48rem) {
  .formulario { padding: var(--esp-4); }
}

.campo { display: grid; gap: 0.35rem; }

.campo label { font-size: 0.9375rem; font-weight: 600; }
.opcional { color: var(--texto-suave); font-weight: 400; }

.campo input:not([type="checkbox"]),
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--borde-campo);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
}
.campo textarea { resize: vertical; min-height: 8rem; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 0;
  border-color: var(--azul);
}

.campo [aria-invalid="true"] { border-color: var(--error); }

.campo__ayuda { color: var(--texto-suave); font-size: 0.875rem; }
.campo__error { color: var(--error); font-size: 0.875rem; font-weight: 600; }

.campo--casilla {
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.65rem;
}
.campo--casilla input { width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; accent-color: var(--azul); }
.campo--casilla label { font-weight: 400; }
.campo--casilla .campo__error { grid-column: 2; }

.privacidad-basica {
  padding: 0.75rem var(--esp-2);
  border-radius: 8px;
  background: var(--panel);
  color: var(--texto-suave);
  font-size: 0.875rem;
}

.formulario .boton { justify-self: start; }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.estado-envio:empty { display: none; }
.estado-envio { padding: 0.75rem var(--esp-2); border-radius: 8px; background: var(--azul-suave); }
.estado-envio--ok { background: var(--exito-fondo); color: var(--exito-texto); }
.estado-envio--error { background: var(--error-fondo); color: #FFD9D4; }
.estado-envio--error a { color: #FFD9D4; font-weight: 600; }

/* Pie ------------------------------------------------------------- */

.pie { padding-block: var(--esp-5) var(--esp-4); border-top: 1px solid var(--borde); }

.pie__rejilla { display: grid; gap: var(--esp-4); }

.marca--pie { margin: 0; }
.pie__lema { max-width: 18rem; margin-top: var(--esp-1); color: var(--texto-suave); }

.pie__titulo { margin-bottom: 0.6rem; color: var(--texto-suave); font-size: 0.875rem; }

.pie ul { display: grid; gap: 0.4rem; padding: 0; list-style: none; }
.pie ul a { color: var(--texto); font-size: 0.9375rem; text-decoration: none; }
.pie ul a:hover { text-decoration: underline; }

.pie__copy { margin-top: var(--esp-4); color: var(--texto-suave); font-size: 0.875rem; }

@media (min-width: 48rem) {
  .pie__rejilla { grid-template-columns: 2fr 1fr 1.3fr 1fr; }
}

/* Páginas legales ------------------------------------------------- */

.legal { padding-block: var(--esp-5) var(--esp-6); }
.legal .contenedor { max-width: 48rem; }
.legal h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); letter-spacing: -0.035em; }
.legal h2 { margin-top: var(--esp-4); font-size: 1.5rem; letter-spacing: -0.02em; }
.legal p, .legal ul { margin-top: var(--esp-2); font-size: 1.0625rem; line-height: 1.6; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: 0.35rem; }
.legal .actualizado { margin-top: var(--esp-1); color: var(--texto-suave); font-size: 0.9375rem; }
.pendiente { padding-inline: 0.2em; border-radius: 3px; background: var(--et-amarillo); color: var(--et-amarillo-t); }

/* Paquete aún no disponible */
.paquete h3 .etiqueta { margin-left: 0.25rem; vertical-align: 0.15em; }
.boton--inactivo { margin: 0; color: var(--texto-suave); cursor: default; white-space: normal !important; }
.boton--inactivo:hover { background: var(--azul-suave); color: var(--texto-suave); }
.paquete__precio--consulta { font-size: 1.75rem; white-space: normal; }

/* Quiénes somos */
.quienes__intro p {
  max-width: 40rem;
  margin: var(--esp-2) auto 0;
  color: var(--texto-suave);
  font-size: 1.125rem;
  text-align: center;
}
.quienes__puntos {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  padding: 0;
  list-style: none;
}
.quienes__puntos .panel { padding: var(--esp-3); }
.quienes__puntos h3 { margin-top: var(--esp-2); font-size: 1.25rem; }
.quienes__puntos p { margin-top: var(--esp-1); color: var(--texto-suave); }
.quienes__puntos .icono { width: auto; min-width: 2.25rem; padding-inline: 0.4rem; }

@media (min-width: 56rem) {
  .quienes__puntos { grid-template-columns: repeat(3, 1fr); }
}