/* ==========================================================================
   Cotizaciones — Clinica Palermo
   Figma: 1183:15538
   ========================================================================== */

/* ─── Section (single gray container) ─── */
.cot-hero {
  background: #f5f5f5;
  padding: 56px 0 0;
}

.cot-hero .cp-container {
  max-width: 1115px;
}

.cot-hero__title {
  margin: 0 0 0;
  font-family: var(--cp-font-heading);
  font-size: 32px;
  font-weight: 800;
  line-height: 43.7px;
  color: var(--cp-text-ink); /* #344054 */
}

/* ─── Cards grid ─── */
.cot-cards {
  background: #f5f5f5;
  padding: 32px 0;
}

.cot-cards .cp-container {
  max-width: 1115px;
}

.cot-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ─── Card individual (Figma: pad=20, r=10, stroke=#d5dfeb) ─── */
.cot-card {
  background: #fff;
  border: 1px solid #d5dfeb;
  border-radius: 10px;
  padding: 20px;
}

.cot-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  color: var(--cp-blue-700); /* #0e4fbe */
}

.cot-card__icon svg {
  width: 44px;
  height: 44px;
}

.cot-card__title {
  margin: 0 0 0;
  padding-top: 12px;
  font-family: var(--cp-font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 32.8px;
  color: var(--cp-blue-700); /* #0e4fbe */
}

.cot-card__description {
  margin: 0 0 0;
  padding-top: 8px;
  font-family: var(--cp-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.5px;
  color: var(--cp-text-ink); /* #344054 */
}

/* ─── Botón de correo (Figma: 456×44, pad=0/20/0/20, gap=8) ─── */
.cot-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0 20px;
  height: 44px;
  background: var(--cp-blue-700); /* #0e4fbe */
  color: #fff;
  font-family: var(--cp-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 19.5px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.cot-card__button:hover,
.cot-card__button:focus,
.cot-card__button:focus-visible,
.cot-card__button:active {
  background: #0a3d8f;
  color: #fff;
}

/* ─── Phone row (Figma: gap=10) ─── */
.cot-card__phone-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  white-space: nowrap;
}

.cot-card__phone-label,
.cot-card__phone-ext {
  font-family: var(--cp-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--cp-text-ink); /* #344054 */
}

.cot-card__button--phone {
  background: var(--cp-blue-700); /* #0e4fbe */
}

.cot-card__button--phone:hover {
  background: #0a3d8f;
}

.cot-card__phone-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ─── Horario bar (Figma: fill=rgba(14,79,190,0.1), pad=10, r=10, left, icon gray) ─── */
.cot-card__horario {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 16px;
  padding: 10px;
  background: rgba(14,79,190,0.1);
  border-radius: 10px;
}

.cot-card__horario-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: #344054;
}

.cot-card__horario-text {
  font-family: var(--cp-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.5px;
  color: #344054;
}

.cot-card__horario-text strong {
  font-weight: 700;
}

/* ─── Warning banner ─── */
.cot-warning {
  background: #f5f5f5;
  padding: 0 0 56px;
}

.cot-warning .cp-container {
  max-width: 1115px;
  background: #f3f6fb;
  border: 1px solid #0e4fbe;
  border-radius: 10px;
  padding: 15px;
}

.cot-warning__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cot-warning__line1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cot-warning__icon {
  flex: none;
  vertical-align: middle;
}

.cot-warning__title {
  color: #dc2626;
  font-family: var(--cp-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 19.5px;
}

.cot-warning__desc {
  margin: 0;
  color: var(--cp-blue-700);
  font-family: var(--cp-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.5px;
}

/* ─── Responsive — mobile independiente, no daña desktop >767px ─── */
@media (max-width: 767px) {
  .cot-hero { padding: 56px 20px 0; }
  .cot-hero__title { font-size: 32px; line-height: 43.7px; }
  .cot-cards { padding: 20px 0; }
  .cot-cards__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    min-width: 0;
  }
  .cot-card {
    padding: 16px;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .cot-card__title {
    font-size: clamp(1.125rem, 5vw, 1.5rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  .cot-card__description {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cot-card__button {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    padding: 12px 16px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    text-align: center;
    box-sizing: border-box;
  }
  .cot-card__phone-row {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* Mobile: horario en una sola línea — no daña desktop (>767px)
     PUNTO CONGELADO Ruta Celeste (desktop+mobile) 2026-08-28: no modificar
     sin alerta previa + documentar como ajuste a su punto. */
  .cot-card__horario {
    width: fit-content;
    max-width: calc(100vw - 40px);
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .cot-card__horario-icon { width: 20px; height: 20px; }
  .cot-card__horario-text { font-size: 12px; white-space: nowrap; }
  .cot-warning { padding: 56px 20px; }
  .cot-warning .cp-container {
    width: 100%;
  }
  .cot-warning__inner {
    flex-direction: column;
    gap: 8px;
  }
  .cot-warning__line1 {
    flex-wrap: wrap;
  }
}