/* ============================================================================
   CATI — CSS puro. Reemplaza Tailwind + Angular Material + Owl Carousel.
   Los únicos colores que tuve que inferir (no venían en el HTML que me pasaste,
   estaban en styles.c92b1958892f4e3c.css) son --trans y --purple-trans.
   Verifícalos con el cuentagotas del navegador sobre el sitio original.
   ========================================================================== */

:root{
  --trans:        #6e668f;  /* ← INFERIDO: color de títulos y enlaces "text-trans" */
  --purple-trans: #30255e;  /* ← INFERIDO: fondo morado del footer y del panel de cita */
  --plum-mid:     #6e668e;
  --plum-dark:    #2f2950;
  --ink:          #1d1d1b;
  --gray-400:     #9ca3af;

  --container: 1280px;
  --pad: .5rem;   /* el `container` de su Tailwind no lleva padding; lo añaden con px-2 */
}

/* ---------------------------------- Reset --------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Lato',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight:400;
  line-height:1.5;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h5,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:3px solid var(--trans); outline-offset:3px; }

.lato{ font-family:'Lato',sans-serif; }
.merri{ font-family:'Merriweather',Georgia,serif; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.mt-10{ margin-top:2.5rem; }
.py-10{ padding-block:2.5rem; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--purple-trans); color:#fff; padding:.75rem 1rem;
}
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Chevron `keyboard_arrow_right` como SVG inline en background (sin webfont de iconos) */
.chev{
  width:24px; height:24px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/24px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/24px no-repeat;
}

/* ================================== HERO ================================== */
.hero{
  position:relative;
  height:700px;
  padding-bottom:6rem;
  background-image:url('https://www.clinicatrans.org.mx/assets/imgs/back-slider.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  animation:fade-in .8s ease both;
}
@media (min-width:993px){
  .hero{
    height:635px;
    background-image:url('https://www.clinicatrans.org.mx/assets/imgs/back-slider.png');
  }
}
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }

.hero-top{ display:flex; align-items:center; }
.hero-top__spacer{ display:none; }
.hero-top__logo{ width:100%; }
.hero-top__logo a{
  display:flex; justify-content:center; align-items:center;
  width:100%; padding-block:.75rem;
}
.hero-top__logo img{ width:auto; }
.hero-top__menu{ width:100%; display:flex; align-items:center; justify-content:flex-end; }

@media (min-width:1024px){
  .hero-top__spacer{ display:block; width:33.333%; }
  .hero-top__logo{ width:33.333%; }
  .hero-top__menu{ width:33.333%; justify-content:flex-start; }
  .btn-menu{ margin-left:10rem; }
}
.btn-menu{
  display:flex; justify-content:center; align-items:center;
  color:#fff;
  transition:opacity .2s ease;
}
.btn-menu:hover{ opacity:.75; }

.lang{
  display:flex; justify-content:center; align-items:center; gap:1rem;
  color:#fff; font-size:1.25rem;
}
.lang img{ height:20px; width:auto; }

.hero-claims{
  display:flex; flex-direction:column;
  margin-top:2.5rem;
}
@media (min-width:1024px){
  .hero-claims{ flex-direction:row; margin-top:15rem; }
}
.hero-claims__left,
.hero-claims__right{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  margin-block:2.5rem;
}
.hero-claims__right > div{ display:flex; flex-direction:column; align-items:flex-end; }
@media (min-width:1024px){
  .hero-claims__left,.hero-claims__right{ width:50%; margin-block:0; }
  .hero-claims__left > div{ margin-left:5rem; }
  .hero-claims__right > div{ margin-right:5rem; }
}
.hero-claims h2{
  color:#fff; font-size:2.25rem; font-weight:400; line-height:1.2;
  text-align:center;
}
.hero-claims h5{
  color:#fff; font-size:1rem; font-weight:400; text-align:center;
}
@media (min-width:1024px){
  .hero-claims h2,.hero-claims h5{ text-align:left; }
}

/* ================================= DRAWER ================================= */
.drawer-backdrop{
  position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.6);
  opacity:0; transition:opacity .4s cubic-bezier(.25,.8,.25,1);
}
.drawer-backdrop[data-open]{ opacity:1; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:41;
  width:100%;
  background:#fff;
  overflow-y:auto;
  transform:translate3d(100%,0,0);
  transition:transform .4s cubic-bezier(.25,.8,.25,1);
  box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14);
}
@media (min-width:1024px){ .drawer{ width:24rem; } }
.drawer[data-open]{ transform:translate3d(0,0,0); }

.drawer__close{
  position:absolute; top:.75rem; left:.75rem;
  color:var(--purple-trans);
}
.drawer__nav{ padding-block:.5rem; }
.drawer__nav li{ height:38px; display:flex; align-items:center; padding-inline:1rem; }
.drawer__nav a{
  display:flex; align-items:center; justify-content:flex-end;
  width:100%;
  font-size:.875rem; letter-spacing:.02em;
  transition:padding-right .5s;
}
.drawer__nav a:hover{ padding-right:20px; }

.drawer__cita{
  background:var(--purple-trans);
  padding:1rem;
  min-height:100vh;
}
.drawer__cita h2{
  font-size:1.5rem; color:#fff; text-align:center; font-weight:400;
}
.drawer__row{
  display:flex; align-items:center; gap:1.25rem;
  margin-left:3rem; margin-top:.5rem;
}
.drawer__row a,.drawer__row span{ color:#fff; font-size:.9rem; }

.btn-outline{
  display:flex; justify-content:center; align-items:center;
  border:1px solid #fff;
  color:#fff; font-weight:700; font-size:1.125rem; text-transform:uppercase;
  margin:1.25rem auto;
  height:48px; max-width:66.666%;
  transition:background-color .3s ease,color .3s ease;
}
.btn-outline:hover{ background:#fff; color:var(--purple-trans); }
.btn-outline--lg{ height:56px; max-width:488px; margin-top:2.5rem; }
@media (min-width:1024px){ .btn-outline--lg{ height:58px; } }

/* ============================= WHATSAPP FLOTANTE ========================== */
.walink{ position:fixed; bottom:4rem; left:1rem; z-index:10; }
.walink a{
  display:flex; align-items:center; gap:1rem;
  filter:drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08));
}
.walink p{
  width:14rem; background:#fff; color:#000;
  padding-block:.75rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.875rem;
}
@media (max-width:640px){
  .walink p{ width:auto; padding-inline:.75rem; font-size:.8rem; }
}

/* ============================ SECCIÓN QUIÉNES SOMOS ======================= */
.section-intro{ padding-top:6rem; padding-bottom:6rem; }
.h-trans{
  color:var(--trans);
  text-align:center;
  font-size:2.25rem;
  font-weight:400;
  line-height:1.25;
}
.prose{
  width:100%;
  margin:2.5rem auto;
  color:var(--gray-400);
  text-align:center;
}
@media (min-width:1024px){ .prose{ width:50%; } }
.prose--quote{
  color:var(--trans);
  font-weight:700;
  margin-bottom:0;
}

.read-more-wrap{ text-align:center; margin-top:1.25rem; }
.read-more{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--trans); font-size:1rem;
  transition:margin-right .3s ease;
}
.read-more:hover{ margin-right:.75rem; }

/* ============================== BLOQUES SPLIT ============================= */
.split{
  display:flex; flex-direction:column;
  margin-inline:auto;
  padding-bottom:6rem;
}
@media (min-width:1024px){ .split{ flex-direction:row; } }
.split__text{
  width:100%;
  display:flex; justify-content:center; align-items:center;
  padding-block:2.5rem; padding-inline:.5rem;
}
.split__text--img{ background-repeat:no-repeat; background-size:cover; background-position:center; }
.split__media{
  width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.split__media img{ width:100%; }
@media (min-width:1024px){
  .split__text,.split__media{ width:50%; }
}
.split__text h2{ color:#fff; font-size:2.25rem; font-weight:400; }
.split__text ul{
  color:#fff;
  list-style:disc;
  margin-left:1.25rem;
  margin-top:1.25rem;
}
.split__text li{ margin-bottom:.15rem; }

.btn-info{
  display:inline-block;
  border:2px solid #e5e7eb; color:#e5e7eb;
  padding:.5rem 1rem;
  transition:background-color .3s ease,color .3s ease;
}
.btn-info:hover{ background:#e5e7eb; color:#000; }

/* ================================ MÉDICOS ================================= */
.section-medicos{ padding-bottom:6rem; }
.section-testimonios{ padding-bottom:6rem; }

.doctor{
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  height:600px;
  padding-inline:1rem;
  text-align:center;
}
.doctor__photo{ width:103px; height:auto; margin-bottom:2.5rem; }
.doctor__name{
  font-weight:300; font-size:1.5rem; color:var(--ink);
  margin-bottom:2.5rem;
  max-width:22rem;
}
.doctor__list{
  list-style:disc;
  text-align:left;
  margin-left:1.5rem;
  font-size:.875rem;
  overflow:hidden;
}
.doctor__list li{ margin-bottom:.25rem; }

.line{
  height:1px;
  background:#e5e7eb;
  margin-top:2.5rem;
}

/* ============================== TESTIMONIOS =============================== */
.stars{ display:flex; justify-content:center; margin-bottom:2.5rem; }

.testimonio{
  display:flex; flex-direction:row; gap:.25rem;
  height:13rem;
  margin:0;
  padding:1rem;
  background:#fff;
  justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);
}
.testimonio__letter{
  width:50px; height:50px; flex:none;
  border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  font-size:1.5rem; color:#fff;
}
.testimonio p{ font-size:.875rem; }
.testimonio > div{ padding-left:.5rem; overflow:hidden; }

/* ============================ CAROUSEL (vanilla) ========================== */
.carousel{ position:relative; --per-view:1; }
.carousel__viewport{ overflow:hidden; }
.carousel__track{
  display:flex;
  will-change:transform;
  transition:transform .25s ease;
}
.carousel__track[data-no-anim]{ transition:none; }
.carousel__item{
  flex:0 0 calc(100% / var(--per-view));
  min-width:0;
  padding-inline:10px;
}

/* ============================== SABER MÁS ================================= */
.saber-mas{ padding-top:3rem; padding-bottom:6rem; }
.saber-mas__items{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5rem;
  margin-top:3rem;
}
@media (min-width:1024px){ .saber-mas__items{ flex-direction:row; } }
.saber-mas__items a{
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  transition:transform .3s ease;
}
.saber-mas__items a:hover{ transform:translateY(-4px); }
.saber-mas__items span{
  font-size:.875rem; color:var(--trans); text-align:center;
}

/* ================================= MAPA =================================== */
.map{ width:100%; height:450px; background:#e8e8e8; }
.map iframe{ display:block; width:100%; height:100%; border:0; }

/* ================================ FOOTER ================================== */
.site-footer{
  background:var(--purple-trans);
  padding-block:6rem;
  padding-inline:.5rem;
}
.site-footer h2{ font-size:2.25rem; color:#fff; text-align:center; font-weight:400; }

.footer-phone{
  display:flex; justify-content:center; align-items:center; gap:.75rem;
  margin:2.5rem auto 0;
}
.footer-phone span{
  color:#fff; font-weight:700; font-size:1.125rem; text-transform:uppercase;
}

.footer-cols{
  display:flex; flex-direction:column;
  max-width:488px;
  margin:3rem auto 0;
}
@media (min-width:1024px){ .footer-cols{ flex-direction:row; } }
.footer-cols__about{ width:100%; }
.footer-cols__about p{
  font-size:.875rem; color:#fff;
  margin-top:1.25rem; margin-bottom:2.5rem;
}
@media (min-width:1024px){
  .footer-cols__about,.footer-cols__contact{ width:50%; }
  .footer-cols__about p{ margin-bottom:0; }
  .footer-cols__contact{ padding-left:1.25rem; }
}
.footer-cols__contact a{
  display:flex; align-items:flex-start; gap:.75rem;
  margin-top:2.5rem;
}
.footer-cols__contact a:first-child{ margin-top:0; }
.footer-cols__contact span{ color:#fff; font-size:.875rem; }
.footer-aviso{ justify-content:center; }

.footer-meca{
  display:none;
}


/* ============================================================================
   PÁGINA: /somos
   ========================================================================== */

/* El hero de esta página usa una sola imagen (no tiene variante responsiva) */
.hero--somos{
  background-image:url('https://www.clinicatrans.org.mx/assets/imgs/somos/slider-quienes-somos.png');
}
@media (min-width:993px){
  .hero--somos{
    background-image:url('https://www.clinicatrans.org.mx/assets/imgs/somos/slider-quienes-somos.png');
  }
}

.hero-claims--somos{ margin-top:2.5rem; }
@media (min-width:1024px){ .hero-claims--somos{ margin-top:16rem; } }

.hero-title-wrap{ width:100%; display:flex; justify-content:center; }
@media (min-width:1024px){ .hero-title-wrap{ justify-content:flex-end; } }

.hero-title{
  color:#fff;
  font-weight:400;
  font-size:3.75rem;
  line-height:1;
  text-align:center;
  width:100%;
  margin-top:1.25rem;
}
@media (min-width:1024px){
  .hero-title{ font-size:6rem; text-align:left; width:30rem; }
}

/* ------------------------- Misión / Visión / Fundación -------------------- */
.mv{
  position:relative;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-bottom:6rem;
}
.mv__row{ display:flex; flex-direction:column; background: #2b224a;}
@media (min-width:1024px){ .mv__row{ flex-direction:row; background: #2b224a;} }

.mv__panel{
  width:100%;
  display:flex; justify-content:center; align-items:center;
  padding-inline:.5rem;
  padding-top:14rem;
  padding-bottom:2.5rem;
  background-repeat:no-repeat;
  background-size:cover;
}
@media (min-width:1024px){ .mv__panel{ width:50%; } }

.mv__panel--mision{  }

.mv__panel--vision{
  background-image:url('https://www.clinicatrans.org.mx/assets/imgs/somos/img-vision.png');
  padding-top:7rem;
  padding-bottom:7rem;
}
@media (min-width:1024px){
  .mv__panel--vision{ padding-top:14rem; padding-bottom:2.5rem; }
}

.mv__inner{ width:100%; padding-block:2.5rem; }
@media (min-width:1024px){ .mv__inner{ width:58.333%; } }
.mv__panel--vision .mv__inner{ padding-block:0; }
@media (min-width:1024px){ .mv__panel--vision .mv__inner{ padding-block:2.5rem; } }

.mv__inner h2{
  color:#fff; font-size:2.25rem; font-weight:400; text-align:center;
}
.mv__inner p{ color:#fff; margin-top:1.25rem; text-align:center; }
@media (min-width:1024px){
  .mv__inner h2,.mv__inner p{ text-align:left; }
}

/* Bloque "Fundación": superpuesto sobre los dos paneles */
.mv__fundacion{
  position:absolute; top:4rem;
  display:flex; flex-direction:column;
  width:100%;
  padding-inline:.5rem;
  pointer-events:none;
}
.mv__fundacion > div{ width:100%; margin-inline:auto; }
@media (min-width:1024px){ .mv__fundacion > div{ width:50%; } }
.mv__fundacion h2{
  color:#fff; font-size:2.25rem; font-weight:400; text-align:center;
}
.mv__fundacion p{ color:#fff; margin-top:1.25rem; text-align:center; }

/* ============================================================================
   COMPONENTES COMPARTIDOS — añadidos para /servicios, /laboratorios,
   /medicos y /asociaciones.
   ========================================================================== */

/* --- Hero con imagen por página: se pasa con style="--hero:url(...)" -------- */
/* Debe ir DESPUÉS de las reglas .hero para ganar en cascada. */
.hero--custom{
  background-image:var(--hero);
}
@media (min-width:993px){
  .hero--custom{ background-image:var(--hero); }
}

/* --- Contenedor de contenido interior (max-w-[758px] 2xl:max-w-[1080px]) --- */
.inner{
  width:100%;
  max-width:758px;
  margin-inline:auto;
  position:relative;
  z-index:10;
}
@media (min-width:1536px){ .inner{ max-width:1080px; } }

.section-inner{ padding-block:6rem; }
.up{ text-transform:uppercase; }

/* ----------------------------- ACORDEÓN ------------------------------------
   Sustituye a mat-expansion-panel. La altura se anima con JS (igual que
   Material) para poder transicionar desde/hacia contenido de altura variable.
   -------------------------------------------------------------------------- */
.acc__panel{
  background:transparent;
  margin-bottom:3rem;
}
.acc__header{
  display:flex; align-items:center;
  width:100%; height:62px;
  padding-left:8px; padding-right:0;
  border-bottom:2px solid #000;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.acc__header:hover{ background:rgba(0,0,0,.04); }
.acc__h3{ margin:0; font-weight:300; font-size:1.5rem; line-height:1.2; }
.acc__title{ flex:1 1 0; margin-right:16px; text-align:left; }
.acc__icon{ flex:none; display:flex; align-items:center; }
.acc__icon img{ transition:transform .225s cubic-bezier(.4,0,.2,1); }
.acc__header[aria-expanded="true"] .acc__icon img{ transform:rotate(45deg); }


.btn-sol-tu-cot {
        background: #3fc452;
    color: white;
    padding: 10px;
    margin-top: 15px;
    border-radius: 25px;
}

.acc__body{
  height: 0;
  overflow:hidden;
  transition:height .225s cubic-bezier(.4,0,.2,1);
}
.acc__body[data-no-anim]{ transition:none; }
.acc__inner{ padding:24px 16px; }

.acc__inner ul{ list-style:none; margin-top:2.5rem; margin-bottom: 35px;}
.acc__inner li{ margin-bottom:.25rem; }
/* /medicos usa viñeta interior en vez de sangría */
.acc__inner ul.lista{ list-style-position:inside; }
.acc__inner ul.lista ul{ margin-left:2.5rem; margin-top:0; }

/* --------------------- TABLAS DE PRECIOS (/laboratorios) ------------------- */
.tabla{ width:100%; border-collapse:collapse; }
.tabla tr{ transition:background-color .5s, color .5s; }
.tabla td{ padding:10px; font-family:'Lato',sans-serif; }
/* Fila de dos celdas = concepto + precio */
.tabla tr:has(td:nth-child(2):last-child){
  color:var(--purple-trans);
  font-weight:700;
  font-size:16px;
}

.tabla td:hover {
    color: white;
}


.tabla tr:has(td:nth-child(2):last-child) td:nth-child(2){ text-align:right; }
.tabla tr:hover{
  background-color:var(--purple-trans);
  color:#fff;
  font-weight:400;
}
.tabla .borde{ border-bottom:var(--purple-trans) 2px solid; }

.tabla .borde:hover{
    color:white!important;
}

/* ------------------------------- TABS (/medicos) --------------------------- */
.tabs__list{ display:flex; overflow:hidden; }
.tabs__tab{
  flex:1 1 auto; min-width:90px;
  height:48px; padding-inline:24px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  white-space:nowrap;
  font-size:.875rem;
  color:rgba(0,0,0,.6);
  cursor:pointer;
  transition:color .15s linear;
}
.tabs__tab:hover{ color:rgba(0,0,0,.87); }
.tabs__tab[aria-selected="true"]{ color:var(--trans); }
.tabs__tab::after{
  content:""; position:absolute; inset:auto 0 0 0;
  height:2px; background:var(--trans);
  opacity:0; transition:opacity .15s linear;
}
.tabs__tab[aria-selected="true"]::after{ opacity:1; }
.tabs__panel[hidden]{ display:none; }
.tabs__panel{ margin-top:3rem; }

/* -------------------- REJILLA DE LOGOS (/asociaciones) --------------------- */
.logos-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3rem;
}
.logos-grid > div{ display:flex; justify-content:center; align-items:center; }

/* ============================================================================
   COMPONENTES — /preguntas-frecuentes, /glosario, /ligas-de-interes,
   /aviso-de-privacidad
   ========================================================================== */

/* Utilidades de espaciado (el original las aplica suelta con Tailwind) */
.mt-2{ margin-top:.5rem; }
.mt-5{ margin-top:1.25rem; }
.mt-12{ margin-top:3rem; }
.mb-5{ margin-bottom:1.25rem; }

/* Contenedor ancho (max-w-screen-lg) para /ligas-de-interes y /aviso */
.wide{ width:100%; max-width:1024px; margin-inline:auto; }

/* ------- Bloques con línea inferior (.item border-b border-trans) --------- */
.qa-item{
  border-bottom:1px solid var(--trans);
  margin-top:3rem;
}
.qa-item h2{
  font-weight:300;
  font-size:1.5rem;
  color:var(--trans);
}
.qa-item p{
  font-weight:400;
  font-size:1rem;
  color:var(--ink);
}

/* --------------------- Lista de enlaces (/ligas-de-interes) --------------- */
.links-list li{
  border-bottom:1px solid var(--trans);
  margin-top:3rem;
}
.links-list a{
  display:block;
  font-weight:300;
  font-size:1.5rem;
  color:var(--trans);
  margin-bottom:1rem;
  transition:color .15s ease;
}
.links-list a:hover{ color:#3b82f6; }

/* ------------------------- Texto legal (/aviso-de-privacidad) ------------- */
.aviso p{ line-height:32px; }
.aviso strong{ display:block; margin-top:1.25rem; }
.aviso ul,
.aviso ol{ margin-left:1rem; }
.aviso li strong{ display:inline; margin-top:0; }