/*
 * ehost.la — el CSS que ehost.ec tiene EN LÍNEA en sus páginas.
 *
 * styles.css es la hoja compartida, pero un par de componentes llevan su CSS
 * dentro del <style> de cada página de ehost.ec, así que al enlazar solo
 * styles.css se quedaban a medias. Aquí van copiados tal cual: es diseño, no
 * contenido, y compartirlo es exactamente lo que queremos.
 *
 * El que más importa es el de la tabla en móvil. Sin él la tabla mide 640 px
 * fijos en una pantalla de 375, y aunque el contenedor la deja desplazarse, el
 * resultado es justo lo que se veía «deformado». Con estas reglas cada fila se
 * convierte en una tarjeta y el nombre de la columna sale del atributo
 * data-col, que por eso lleva cada celda.
 */

@media (max-width: 720px) {
  .domain-table, .domain-table tbody, .domain-table tr, .domain-table td { display: block; width: 100%; }
  .domain-table { min-width: 0 !important; }
  .domain-table thead { display: none; }
  .domain-table tr {
    border: 1.5px solid var(--border); border-radius: 12px;
    margin-bottom: 12px; padding: 6px 0; background: var(--white);
  }
  .domain-table td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; border: none; padding: 7px 16px; text-align: right;
  }
  .domain-table td::before {
    content: attr(data-col); color: var(--text-3);
    font-size: 12.5px; font-weight: 500; text-align: left;
  }
  .domain-table td.domain-ext { font-size: 20px; padding-top: 12px; }
  .domain-table td.domain-ext::before { content: ''; }
  .domain-table td.domain-cta-cell { padding: 10px 16px 14px; }
  .domain-table td.domain-cta-cell::before { content: ''; }
  .domain-table td.domain-cta-cell .btn-sm {
    flex: 1; text-align: center; padding: 11px 14px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
}

/* La banda de cifras bajo el hero: en móvil, cuatro columnas no caben. */
@media (max-width: 720px) {
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
}

/* El precio anual bajo el mensual. No existe en ehost.ec —allí lo calcula un
   conmutador de ciclo por JavaScript— y aquí se enseña fijo, para que nadie
   vea «$0.00» si un script falla al cargar. */
.plan-anual {
  font-size: 13.5px;
  color: var(--text-3);
  margin: -10px 0 18px;
  text-align: center;
}

/* Formas de pago, al pie.
   No están en styles.css porque en ehost.ec el bloque de pagos va en el cuerpo
   de la página, no abajo. Aquí van al pie porque es donde el comprador los
   busca: justo antes de decidir. */
.footer-pagos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 22px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-pagos-tit {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: #fff; margin-right: 8px;
}
.pago-chip {
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px; padding: 6px 12px; white-space: nowrap;
}
@media (max-width: 640px) {
  .footer-pagos { gap: 6px; }
  .footer-pagos-tit { width: 100%; margin-bottom: 4px; }
}

/* El buscador de dominios de ehost.ec (su CSS va en linea en cada pagina de
   alla, por eso no estaba en styles.css). Los estilos del RESULTADO —dom-res,
   dom-libre, dom-cargando— si estan en styles.css y nav.js ya sabe manejarlo:
   solo faltaba la caja. */
.domain-search {
  background: var(--white); border-radius: 14px; padding: 24px 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2); max-width: 680px; margin: 0 auto;
}
.domain-search h2 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.search-row { display: flex; gap: 10px; }
.search-row input {
  flex: 1; padding: 12px 16px; border: 1.5px solid var(--border);
  border-radius: 9px; font-size: 16px; color: var(--text);
  outline: none; transition: border-color 0.15s; font-family: inherit;
  min-width: 0;
}
.search-row input:focus { border-color: var(--blue); }
.search-row select {
  padding: 12px 10px; border: 1.5px solid var(--border); border-radius: 9px;
  font-size: 16px; color: var(--text); background: var(--white);
  cursor: pointer; outline: none; font-family: inherit;
}
.search-row .btn-primary {
  background: var(--blue); color: var(--white); padding: 12px 24px; border: none;
  border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 0.15s; white-space: nowrap; font-family: inherit;
}
.search-row .btn-primary:hover { background: var(--blue-dark); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
  .search-row { flex-wrap: wrap; }
  .search-row input { flex: 1 1 100%; }
  .search-row select { flex: 1; }
}

/* La linea del ahorro en la tarjeta: visible en los dos modos del interruptor. */
.pc-ahorro {
  font-size: 12px; font-weight: 700; color: var(--green, #2E7D32);
  background: var(--green-light, #E8F5E9);
  border-radius: 7px; padding: 5px 10px; margin: -8px 0 14px;
  text-align: center;
}