/* Tarjetas de servicio — landing y /servicios.
   No trae fuentes ni colores nuevos: usa --font-primary / --font-secondary
   del tema y el rosa del botón del hero, rgb(235,178,197).

   La letra de los botones va en rgb(69,69,69) y no en blanco: sobre ese rosa
   el blanco da 1.79:1 de contraste y el charcoal da 5.35:1 (AA pide 4.5:1). */

/* El tema pone grid-template-rows:100% en cada .block, o sea una sola fila:
   todo lo que se agregue después queda por fuera del alto de la sección y se
   monta encima de la siguiente. Con filas automáticas la sección crece. */
#zLmmaA,#zZ8IYD{grid-template-rows:auto}
/* El alto mínimo de 484px estaba para dejar respirar al título y al botón.
   Ahora el botón va debajo de las tarjetas y ese piso sólo deja un hueco. */
#zZ8IYD .block-layout{min-height:auto}

.boxen-tarjetas{position:relative;z-index:14;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:stretch;gap:24px;
  max-width:1224px;margin:0 auto;padding:0 4.44vw}

.boxen-tarjeta{flex:1 1 300px;max-width:364px;display:flex;flex-direction:column;
  background:rgba(255,255,255,.88);border:1px solid rgba(69,69,69,.18);
  border-radius:18px;padding:26px 24px 24px}

.boxen-tarjeta h3{font-family:var(--font-primary);font-weight:400;font-size:27px;
  line-height:1.2;color:rgb(69,69,69);margin:0 0 10px}
.boxen-tarjeta p{font-family:var(--font-secondary);font-size:16px;line-height:1.6;
  color:rgb(69,69,69);margin:0 0 14px}
.boxen-tarjeta ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 18px;padding:0}
.boxen-tarjeta li{font-family:var(--font-secondary);font-size:13px;color:rgb(108,102,97);
  /* ponytail: gris más oscuro que el original (124,117,112) — ese daba 4.08:1
     contra el fondo rgba(69,69,69,.06) sobre blanco, por debajo del 4.5:1 que
     pide WCAG AA (hallado con Lighthouse el 3 sep 2026). Este da 5.1:1. */
  background:rgba(69,69,69,.06);border-radius:999px;padding:4px 12px}

.boxen-sello{align-self:flex-start;font-family:var(--font-secondary);font-size:11px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgb(102,58,79);
  background:rgb(251,217,229);border-radius:999px;padding:4px 12px;margin:0 0 12px}

.boxen-pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.boxen-precio{font-family:var(--font-primary);font-size:25px;color:rgb(69,69,69);
  margin:0;white-space:nowrap}

/* Mismo botón del hero. El radio es 999px: el tema del sitio sobrescribe el
   4px que trae por defecto la clase grid-button--primary, así que los botones
   publicados son píldoras. */
.boxen-btn{display:inline-block;padding:14px 26px;border:0;border-radius:999px;
  background:rgb(235,178,197);color:rgb(69,69,69);
  font-family:var(--font-secondary);font-size:14px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .3s ease,color .3s ease}
.boxen-btn:hover{background:rgb(44,44,44);color:rgb(255,255,255)}
.boxen-btn:focus-visible{outline:3px solid #673de6;outline-offset:2px}

/* Encabezado de cada nivel de precio en /servicios. Lleva id (#para-empezar)
   para que "Ver las consultas" del hero salte directo aquí en vez de al
   principio de la página. scroll-margin-top separa el título de la barra
   de navegación fija, que mide 205px en escritorio y 100px en celular. */
.boxen-nivel{position:relative;z-index:14;max-width:1224px;margin:0 auto;padding:34px 4.44vw 0;
  scroll-margin-top:225px}
@media (max-width:920px){.boxen-nivel{scroll-margin-top:118px}}
.boxen-nivel-cab{display:flex;align-items:baseline;justify-content:center;
  gap:14px;flex-wrap:wrap;margin:0 0 6px}
.boxen-nivel-cab h2{font-family:var(--font-primary);font-weight:400;font-size:32px;
  color:rgb(69,69,69);margin:0}
.boxen-nivel-sub{font-family:var(--font-secondary);font-size:16px;color:rgb(124,117,112);
  text-align:center;margin:0 0 24px}

/* Botón suelto centrado (el "Conócelos aquí" del landing). */
.boxen-centrado{position:relative;z-index:14;text-align:center;padding:28px 4.44vw 8px}

/* Hero: dos botones y la línea de precio, dentro de la celda de la grilla. */
.boxen-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.boxen-hero-desde{flex:1 1 100%;margin:2px 0 0;font-family:var(--font-secondary);
  font-size:15px;color:rgb(69,69,69)}
/* En celular los dos botones se apilan y la fila de la grilla crece: sin este
   respiro el hero queda pegado al título de la sección siguiente. */
@media (max-width:920px){.boxen-hero-ctas{margin-bottom:28px}}

@media (max-width:600px){
  .boxen-tarjeta{max-width:none}
  .boxen-nivel-cab h2{font-size:26px}
}