/*
 * El sistema de tarjetas de precios de ehost.ec (precios.html), tal cual.
 * Es la pinta que Roman quiere para los planes: tarjeta compacta .pc con
 * precio grande, periodo, boton coral y lista con vinetas de check.
 * Se copia entero porque sus variables --p-* viven en el mismo bloque.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Página de precios — sistema propio.

   El sitio es coral (#F05243) sobre neutros cálidos, pero esta página había
   ido acumulando grises fríos (#64748B) y azules sueltos (#f0f7ff, #DBEAFE)
   que peleaban con la marca. Aquí los neutros se inclinan hacia el coral y
   solo tres colores significan algo: coral = marca y precio, verde =
   incluido o gratis, ámbar = oferta.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --p-coral:    #F05243;   /* marca */
  --p-coral-d:  #C9352A;   /* coral legible sobre fondo claro */
  --p-tint:     #FDF2F0;   /* fondo coral suavísimo: hovers y rellenos */
  --p-tint-2:   #FAE3DF;   /* borde de ese relleno */

  --p-ink:      #1B1716;   /* titulares */
  --p-ink-2:    #4B4340;   /* texto corrido, cálido (antes #2D3748, frío) */
  --p-ink-3:    #786C68;   /* terciario cálido; 5.07 sobre blanco y 4.67 sobre el fondo alterno */

  --p-line:     #E9E2DF;   /* hairline cálida */
  --p-line-2:   #D8CFCB;   /* hairline con más peso */
  --p-paper:    #FFFFFF;
  --p-ground:   #F8F5F4;   /* fondo de sección alterna */

  --p-verde:    #2C7A4B;   /* «incluido / gratis» */
  --p-verde-bg: #E8F5EC;
  --p-ambar:    #8A5A12;   /* «oferta / promoción» */
  --p-ambar-bg: #FDF3E0;

  --p-r:        14px;      /* radio de tarjeta */
  --p-r-s:      10px;
}

/* Los precios se comparan en columna: tienen que alinearse dígito con dígito. */
.pc-price, .pc-billing, .pc-period, .dom-price, .ssl-price-cell, .dbox-num,
.sd-precio, .dom-table td, .ssl-table td { font-variant-numeric: tabular-nums; }

/* ── Pestañas ───────────────────────────────────────────────────────────── */
.pricing-tabs-wrap { position: sticky; top: 66px; z-index: 200; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--p-line); }
.pricing-tabs { max-width: 1320px; margin: 0 auto; padding: 0 20px; display: flex; gap: 2px;
  overflow-x: auto; scrollbar-width: none; }
.pricing-tabs::-webkit-scrollbar { display: none; }
.ptab { all: unset; padding: 15px 16px; font-size: 14px; font-weight: 600; color: var(--p-ink-3);
  cursor: pointer; white-space: nowrap; border-bottom: 2.5px solid transparent;
  transition: color .15s, border-color .15s, background .15s; display: flex; align-items: center;
  gap: 7px; border-radius: 8px 8px 0 0; }
.ptab:hover { color: var(--p-ink); background: var(--p-tint); }
/* `all: unset` se había llevado por delante el foco de teclado. */
.ptab:focus-visible { outline: 2px solid var(--p-coral); outline-offset: -3px; border-radius: 8px; }
.ptab.active { color: var(--p-coral-d); border-bottom-color: var(--p-coral); font-weight: 700; }
.ptab-icon { font-size: 15px; opacity: .9; }

/* En un móvil las nueve pestañas no caben y había que adivinar que la barra
   se desplazaba de lado: las seis últimas no se veían. Ahí se cambia por un
   selector, que enseña la lista entera de un toque y ocupa una sola línea. */
.ptab-movil { display: none; padding: 10px 20px; }
.ptab-movil select { width: 100%; font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--p-ink); background: var(--p-tint); border: 1.5px solid var(--p-tint-2);
  border-radius: var(--p-r-s); padding: 12px 40px 12px 14px; -webkit-appearance: none;
  appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9352A'%3E%3Cpath d='M8 11.5 2.5 6h11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 13px; }
.ptab-movil select:focus-visible { outline: 2px solid var(--p-coral); outline-offset: 2px; }
/* Las nueve pestañas necesitan 1225px. Por debajo de eso ya no caben, así que
   la barra tiene tres estados en vez de esconder media lista tras un
   desplazamiento lateral que nadie ve:
     · ancha    → una fila de pestañas, pegada arriba
     · media    → las pestañas se reparten en dos filas y la barra deja de
                  pegarse arriba, para no comerse media pantalla
     · estrecha → un selector, que enseña las nueve de un toque */
@media (max-width: 1239px) {
  .pricing-tabs-wrap { position: static; }
  .pricing-tabs { flex-wrap: wrap; justify-content: center; overflow-x: visible; padding: 6px 20px; }
  .ptab { border-bottom-width: 2px; }
}
@media (max-width: 860px) {
  .pricing-tabs { display: none; }
  .ptab-movil { display: block; }
  .pricing-tabs-wrap { position: sticky; }
}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.pricing-section { display: none; padding: 56px 0 76px; }
.pricing-section.active { display: block; }
/* Solo se ve una sección a la vez: alternar el fondo por posición en el
   documento no significaba nada y cambiaba al reordenar las pestañas. */
.pricing-section { background: var(--p-ground); }
.ps-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

.ps-head { margin-bottom: 38px; max-width: 760px; }
.ps-title { font-size: clamp(24px, 3vw, 31px); font-weight: 800; color: var(--p-ink);
  letter-spacing: -.6px; line-height: 1.15; margin-bottom: 9px; text-wrap: balance; }
.ps-sub { font-size: 15.5px; color: var(--p-ink-2); line-height: 1.6; }
.ps-sub a, .ps-famsub a { color: var(--p-coral-d); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--p-tint-2); }
.ps-sub a:hover, .ps-famsub a:hover { border-bottom-color: var(--p-coral); }

/* Encabezado de familia: el escalón que faltaba entre el título de 31px y la
   tarjeta. Antes era una etiqueta de 13px y de ella colgaba una familia
   entera de planes sin que se viera dónde empezaba. */
.ps-fam { font-size: 20px; font-weight: 800; color: var(--p-ink); letter-spacing: -.35px;
  margin: 0 0 6px; padding-left: 13px; position: relative; line-height: 1.25; }
.ps-fam::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px; background: var(--p-coral); }
.ps-fam + .plans-grid, .ps-famsub + .plans-grid { margin-top: 18px; }
.ps-famsub { font-size: 14px; color: var(--p-ink-3); margin: 0 0 0 13px; line-height: 1.55; }
.ps-nota { font-size: 13px; color: var(--p-ink-3); margin-top: 18px; line-height: 1.6; }

/* Separación entre familias dentro de una misma pestaña. */
.plans-grid + .ps-fam { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--p-line); }
.plans-grid + .ps-fam::before { top: calc(44px + .18em); }
.ps-nota + .ps-fam { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--p-line); }
.ps-nota + .ps-fam::before { top: calc(40px + .18em); }

/* ── Rejilla ────────────────────────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.plans-grid-3 { grid-template-columns: repeat(3, 1fr); }
.plans-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media(max-width:1000px){ .plans-grid-4, .plans-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px) { .plans-grid-4, .plans-grid-3 { grid-template-columns: 1fr; } }
.plans-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
@media(max-width:600px) { .plans-grid-2 { grid-template-columns: 1fr; max-width: none; } }

/* ── Tarjeta de plan ────────────────────────────────────────────────────── */
.pc { background: var(--p-paper); border: 1px solid var(--p-line-2); border-radius: var(--p-r);
  padding: 24px 22px; display: flex; flex-direction: column; position: relative;
  transition: box-shadow .16s, transform .16s, border-color .16s; }
.pc:hover { border-color: var(--p-tint-2); box-shadow: 0 10px 28px rgba(27,23,22,.09);
  transform: translateY(-3px); }

/* La recomendada llevaba un anillo al 8% de opacidad: no se veía. Ahora tiene
   fondo propio, borde coral y algo más de aire. */
.pc.pop { border: 2px solid var(--p-coral);
  background: linear-gradient(180deg, var(--p-tint) 0%, var(--p-paper) 130px);
  box-shadow: 0 8px 26px rgba(240,82,67,.13); padding: 26px 22px 24px; }
.pc.pop:hover { box-shadow: 0 14px 36px rgba(240,82,67,.2); }

.pc-badge { position: absolute; top: -11px; left: 20px; background: var(--p-coral); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 11px; border-radius: 99px; box-shadow: 0 3px 8px rgba(240,82,67,.35); }
.pc-badge.green  { background: var(--p-verde); box-shadow: 0 3px 8px rgba(44,122,75,.32); }
.pc-badge.accent { background: var(--p-ink); box-shadow: 0 3px 8px rgba(27,23,22,.3); }

.pc-name { font-size: 15.5px; font-weight: 800; color: var(--p-ink); margin-bottom: 4px;
  letter-spacing: -.2px; }
.pc-desc { font-size: 12.5px; color: var(--p-ink-3); margin-bottom: 18px; line-height: 1.45;
  min-height: 34px; }

/* El precio manda; lo de debajo lo matiza. Antes eran tres números en tres
   tamaños peleándose por la misma mirada. */
.pc-price { font-size: 34px; font-weight: 800; color: var(--p-ink); letter-spacing: -1.4px;
  line-height: 1; margin-bottom: 5px; }
.pc-price sup { font-size: 17px; font-weight: 700; top: -.62em; margin-right: 1px; letter-spacing: 0; }
.pc-period { font-size: 12.5px; color: var(--p-ink-3); line-height: 1.45; margin-bottom: 18px; }
.pc-billing { font-size: 12px; color: var(--p-ink-3); margin: -14px 0 16px; padding-top: 8px;
  border-top: 1px dashed var(--p-line); }

.pc-cta { display: block; padding: 11.5px; text-align: center; border-radius: var(--p-r-s);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s; margin-bottom: 20px; }
.pc:not(.pop) .pc-cta { background: var(--p-tint); color: var(--p-coral-d);
  border: 1.5px solid var(--p-tint-2); }
.pc:not(.pop) .pc-cta:hover { background: var(--p-coral); color: #fff; border-color: var(--p-coral); }
.pc.pop .pc-cta { background: var(--p-coral); color: #fff; border: 1.5px solid var(--p-coral); }
.pc.pop .pc-cta:hover { background: var(--p-coral-d); border-color: var(--p-coral-d); }
.pc-cta:focus-visible { outline: 2px solid var(--p-coral); outline-offset: 2px; }

.pc-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: auto;
  padding: 0; }
.pc-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px;
  color: var(--p-ink-2); line-height: 1.45; }
.pc-features li::before { content: '\2713'; color: var(--p-verde); font-weight: 800;
  flex-shrink: 0; font-size: 11px; margin-top: 1px; }
.pc-sep { border: none; border-top: 1px solid var(--p-line); margin: 24px 0 20px; }

/* ── Tablas (dominios y SSL) ────────────────────────────────────────────── */
.dom-table, .ssl-table { width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--p-paper); }
.dom-table th, .ssl-table th { text-align: left; padding: 11px 14px; background: var(--p-ground);
  border-bottom: 2px solid var(--p-line-2); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: var(--p-ink-3); }
.dom-table td, .ssl-table td { padding: 12px 14px; border-bottom: 1px solid var(--p-line);
  vertical-align: middle; color: var(--p-ink-2); }
/* El hover era azul (#f0f7ff) en una página coral. */
.dom-table tr:hover td, .ssl-table tr:hover td { background: var(--p-tint); }
.dom-table .dom-ext { font-weight: 800; color: var(--p-ink); font-size: 15px; }
.dom-table .dom-price { font-weight: 800; color: var(--p-coral-d); }
.ssl-table .ssl-price-cell { font-weight: 800; color: var(--p-coral-d); font-size: 16px; }
.ssl-table .ssl-name-cell { font-weight: 700; color: var(--p-ink); }
.ssl-table .ssl-free { color: var(--p-verde); }
.dom-table .dom-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 8px;
  border-radius: 99px; background: var(--p-ambar-bg); color: var(--p-ambar); letter-spacing: .3px; }
/* Era un chip azul con letra coral: dos marcas en la misma píldora. */
.dom-table .dom-pop { background: var(--p-tint); color: var(--p-coral-d); }

/* Lo ancho se desplaza dentro de su caja, nunca el cuerpo de la página. */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--p-line-2); border-radius: var(--p-r);
  background: var(--p-paper); }
.tabla-scroll tr:last-child td { border-bottom: none; }

/* ── Caja de descuentos ─────────────────────────────────────────────────── */
.dbox { margin-top: 40px; background: var(--p-tint); border: 1px solid var(--p-tint-2);
  border-radius: var(--p-r); padding: 24px 26px; }
.dbox-title { font-weight: 800; color: var(--p-coral-d); margin-bottom: 14px; font-size: 13px;
  text-transform: uppercase; letter-spacing: .9px; }
.dbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dbox-item { background: var(--p-paper); border: 1px solid var(--p-tint-2);
  border-radius: var(--p-r-s); padding: 15px 12px; text-align: center; }
.dbox-num { font-size: 26px; font-weight: 800; color: var(--p-coral-d); letter-spacing: -.8px;
  line-height: 1; }
.dbox-lbl { font-size: 12px; color: var(--p-ink-3); margin-top: 5px; }

/* ── Servidores dedicados ───────────────────────────────────────────────── */
.sd-caja { background: var(--p-paper); border: 1px solid var(--p-line-2); border-radius: var(--p-r);
  padding: 32px 34px; display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap; }
.sd-info { flex: 1 1 430px; }
.sd-eq { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sd-eq span { background: var(--p-tint); color: var(--p-coral-d); font-size: 12.5px;
  font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--p-tint-2); }
.sd-txt { font-size: 15px; line-height: 1.65; color: var(--p-ink-2); margin: 0 0 16px; }
.sd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 22px; }
.sd-lista li { font-size: 13.5px; color: var(--p-ink-2); display: flex; align-items: center; gap: 8px; }
.sd-lista li::before { content: "\2713"; color: var(--p-verde); font-weight: 800; font-size: 13px; }
.sd-accion { flex: 0 0 auto; text-align: center; min-width: 220px; background: var(--p-ground);
  border: 1px solid var(--p-line); border-radius: var(--p-r); padding: 22px 20px; }
.sd-desde { font-size: 11.5px; font-weight: 800; color: var(--p-ink-3); text-transform: uppercase;
  letter-spacing: .8px; margin-bottom: 4px; }
.sd-precio { font-size: 38px; font-weight: 800; color: var(--p-ink); letter-spacing: -1.4px;
  line-height: 1; }
.sd-precio sup { font-size: 20px; top: -.62em; margin-right: 1px; }
.sd-precio small { font-size: 15px; font-weight: 600; color: var(--p-ink-3); letter-spacing: 0; }
.sd-btn { display: block; margin-top: 16px; background: var(--p-coral); color: #fff;
  border: 1.5px solid var(--p-coral); border-radius: var(--p-r-s); padding: 13px 26px;
  font-size: 14.5px; font-weight: 700; text-decoration: none; transition: background .16s; }
.sd-btn:hover { background: var(--p-coral-d); border-color: var(--p-coral-d); }
.sd-btn:focus-visible { outline: 2px solid var(--p-coral); outline-offset: 2px; }
.sd-nota { font-size: 12px; color: var(--p-ink-3); margin-top: 10px; }
@media (max-width: 780px) {
  .sd-caja { padding: 24px 20px; flex-direction: column; align-items: stretch; gap: 22px; }
  .sd-accion { min-width: 0; }
}

/* ── Servicios web ──────────────────────────────────────────────────────── */
.service-card { background: var(--p-paper); border: 1px solid var(--p-line-2);
  border-radius: var(--p-r); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .16s, transform .16s; }
.service-card:hover { box-shadow: 0 10px 28px rgba(27,23,22,.09); transform: translateY(-3px); }
.service-card-icon { font-size: 32px; line-height: 1; }
.service-card-title { font-size: 17.5px; font-weight: 800; color: var(--p-ink); letter-spacing: -.3px; }
.service-card-desc { font-size: 14px; color: var(--p-ink-2); line-height: 1.6; flex: 1; }
.service-card-price { font-size: 13px; font-weight: 800; color: var(--p-coral-d); }
.service-card-cta { display: inline-block; padding: 11px 18px; background: var(--p-coral); color: #fff;
  border-radius: var(--p-r-s); font-size: 13.5px; font-weight: 700; text-decoration: none;
  text-align: center; transition: background .15s; }
.service-card-cta:hover { background: var(--p-coral-d); }
.service-card-cta:focus-visible { outline: 2px solid var(--p-coral); outline-offset: 2px; }

/* ── Piezas sueltas ─────────────────────────────────────────────────────── */
.included-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--p-verde-bg);
  color: var(--p-verde); font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; }
.rsec { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media(max-width:700px){ .rsec { grid-template-columns: 1fr; } }

.toggle-row { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; flex-wrap: wrap; }
.toggle-label { font-size: 13.5px; font-weight: 600; color: var(--p-ink-3); }
.toggle-label.active { color: var(--p-coral-d); font-weight: 800; }
.toggle-switch { width: 44px; height: 25px; background: var(--p-line-2); border-radius: 99px;
  cursor: pointer; position: relative; transition: background .2s; border: none; flex-shrink: 0; }
.toggle-switch.on { background: var(--p-coral); }
.toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle-switch.on::after { transform: translateX(19px); }
.toggle-switch:focus-visible { outline: 2px solid var(--p-coral); outline-offset: 2px; }
.save-pill { background: var(--p-ambar-bg); color: var(--p-ambar); font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  .pc, .service-card, .toggle-switch, .toggle-switch::after, .ptab { transition: none; }
  .pc:hover, .service-card:hover { transform: none; }
}
/* ── Cabecera de la página ──────────────────────────────────────────────── */
/* Un bloque rojo a sangre competía con los precios, que es lo que hay que
   leer. El fondo se aclara y el coral se reserva para el acento. */
.pr-hero { position: relative; padding: 54px 24px 46px; text-align: center;
  background: var(--p-paper); border-bottom: 1px solid var(--p-line); }
/* Un velo coral casi imperceptible arriba, para que no sea un rectángulo
   blanco sin más y enganche con la barra de pestañas. */
.pr-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #FDF4F2 0%, rgba(253,244,242,0) 78%); }
.pr-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.pr-hero-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--p-coral-d); background: var(--p-tint);
  border: 1px solid var(--p-tint-2); border-radius: 99px; padding: 5px 15px; margin-bottom: 18px; }
.pr-hero h1 { font-size: clamp(29px, 5vw, 46px); font-weight: 800; line-height: 1.12;
  letter-spacing: -1.3px; margin: 0 0 14px; color: var(--p-ink); text-wrap: balance; }
.pr-hero p { font-size: 16.5px; color: var(--p-ink-2); max-width: 560px; margin: 0 auto 26px;
  line-height: 1.6; }
/* Una sola línea de lo que entra en todos los planes, separada por filetes:
   antes eran cuatro cajitas iguales que parecían botones sin serlo. */
/* Los cuatro necesitaban 783px y la caja daba 760: uno se caía solo a la
   segunda línea. Se le da su propio ancho y algo menos de aire lateral. */
.pr-hero-incl { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center;
  flex-wrap: wrap; gap: 10px 0; max-width: 900px; }
.pr-hero-incl li { font-size: 13.5px; font-weight: 600; color: var(--p-ink-2); padding: 0 15px;
  border-left: 1px solid var(--p-line-2); display: flex; align-items: center; gap: 7px; }
.pr-hero-incl li:first-child { border-left: none; }
.pr-hero-incl li::before { content: '✓'; font-size: 11px; font-weight: 800; color: var(--p-verde); }
@media (max-width: 620px) {
  .pr-hero { padding: 40px 20px 34px; }
  .pr-hero-incl { flex-direction: column; align-items: center; gap: 9px; }
  .pr-hero-incl li { border-left: none; padding: 0; }
}

/* ── Enlaces dentro de tablas y de encabezados de familia ───────────────── */
.tlink { color: var(--p-coral-d); font-weight: 700; font-size: 13px; text-decoration: none;
  white-space: nowrap; }
.tlink:hover { text-decoration: underline; }
.tlink:focus-visible { outline: 2px solid var(--p-coral); outline-offset: 2px; border-radius: 4px; }
.fam-link { font-size: 13px; font-weight: 600; color: var(--p-coral-d); text-decoration: none;
  letter-spacing: 0; margin-left: 8px; white-space: nowrap; border-bottom: 1px solid var(--p-tint-2); }
.fam-link:hover { border-bottom-color: var(--p-coral); }

/* ── Caja de cierre de Servicios Web ────────────────────────────────────── */
.cta-box { margin-top: 44px; border-radius: var(--p-r); padding: 36px 32px; text-align: center;
  color: #fff; background: linear-gradient(135deg, #C9382B 0%, #A22B21 100%); }
.cta-box-title { font-size: 24px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 9px; }
.cta-box-sub { font-size: 15px; color: rgba(255,255,255,.95); margin: 0 auto 22px; max-width: 480px;
  line-height: 1.6; }
.cta-box-btn { display: inline-block; background: #fff; color: var(--p-coral-d); font-weight: 800;
  padding: 13px 28px; border-radius: var(--p-r-s); text-decoration: none; font-size: 14px;
  transition: transform .15s, box-shadow .15s; }
.cta-box-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.cta-box-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* La tarjeta de servicio que queremos que se mire primero. */
.service-card.destacada { border: 2px solid var(--p-coral);
  background: linear-gradient(180deg, var(--p-tint) 0%, var(--p-paper) 120px);
  box-shadow: 0 8px 26px rgba(240,82,67,.13); }