/* ======================================================
   VARIABLES (tema)
   ====================================================== */
:root{
  /* Marca */
  --brand:     #33B9BD;   /* turquesa principal */
  --accent:    #23538D;   /* azul acento */
  --danger:    #E0565B;

  /* Tipografía / colores base */
  --ink:       #0F243A;   /* texto principal */
  --ink-2:     #4A5D73;   /* texto secundario */
  --muted:     #64748b;

  /* Fondos y bordes */
  --bg:        #F7FAFC;   /* fondo de página */
  --card:      #FFFFFF;   /* tarjetas */
  --line:      #DCE6F2;

  /* Barra superior (nav) */
  --nav-bg:    #0b1e2d;   /* nav oscuro sin afectar --bg */

  /* HERO (landing) */
  --hero-h: 560px;
  --hero-grad-a: rgba(35,83,141,.75);
  --hero-grad-b: rgba(50,183,187,.65);
  --hero-glow-a: rgba(96,183,254,.35);
  --hero-glow-b: rgba(50,183,187,.28);
}

/* ======================================================
   RESETEO Y BASE
   ====================================================== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  padding-bottom:56px; /* espacio para el footer fijo */
  overflow-x:hidden;   /* evita scroll horizontal global */
  font-size:16px;      /* base tipográfica */
  line-height:1.5;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* Footer fijo global (no tapa contenido) */
#site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:var(--brand); color:#fff; text-align:center;
  padding:10px 12px; font-size:13px;
  border-top:1px solid rgba(255,255,255,.15);
}

/* Header genérico (por si existiera en otras plantillas) */
header, .topbar, .navbar, .site-header{
  background: linear-gradient(90deg, var(--brand), #1F4879) !important;
  color:#fff;
}
header a, .topbar a, .navbar a, .site-header a{ color:#fff !important; }
header a:hover, .topbar a:hover, .navbar a:hover, .site-header a:hover{ color:#E5FCFF !important; }

/* ======================================================
   NAV BAR (estilo píldora en links)
   ====================================================== */
.nav{
  background: linear-gradient(90deg, #0c2a4d 0%, #1572a1 100%);
  color:#fff;
  padding:12px 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.nav .brand{ font-weight:800; letter-spacing:.2px; }
.nav .nav-link{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#e9f2fb; font-weight:600;
  padding:8px 14px; border-radius:9999px; line-height:1;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
  margin:0 4px;
}
.nav .nav-link:hover,
.nav .nav-link:focus-visible{
  background: rgba(80,140,200,.28);
  color:#fff; outline:0;
}
.nav .nav-link.is-active,
.nav .nav-link[aria-current="page"]{
  background: rgba(80,140,200,.45);
  color:#fff;
}
@media (hover:hover){ .nav .nav-link:hover{ transform:translateY(-1px); } }

/* Badge de mensajes en nav */
.nav .link-badge{ position:relative; display:inline-flex; align-items:center; gap:6px; padding-right:24px; }
.nav .link-badge .icon{ font-size:15px; line-height:1; }
.nav .badge{
  position:absolute; top:-6px; right:-8px;
  min-width:18px; padding:2px 6px;
  background:#E0565B; color:#fff; border-radius:999px;
  font-size:12px; line-height:1; text-align:center; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* ======================================================
   LAYOUT Y COMPONENTES BASE
   ====================================================== */
.container{ width:95%; margin:18px auto; padding:0 14px; }
.card{
  background:var(--card);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(2,8,20,.06);
  padding:16px;
}
.small{ color:var(--muted); font-size:.92rem; font-weight:300; }

/* Botones (píldora unificada) */
.btn,
a.btn, button.btn, input[type="submit"].btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem;
  padding:12px 18px;
  min-height:44px;
  border:0;
  border-radius:9999px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  color:#fff !important;
  background: linear-gradient(180deg, #36c7cb 0%, #2fb0b4 100%);
  box-shadow:
    0 8px 18px rgba(51,185,189,.28),
    0 0 0 1px rgba(255,255,255,.10) inset;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-decoration:none !important;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(51,185,189,.34),
    0 0 0 1px rgba(255,255,255,.12) inset;
  filter: brightness(.98);
}
.btn:active{ transform: translateY(0); filter: brightness(.95); }
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.7),
    0 0 0 6px rgba(51,185,189,.45);
}
.btn.secondary{
  background: linear-gradient(180deg, #1f5b9b 0%, #194a7e 100%);
  color:#eaf3ff !important;
  box-shadow:
    0 8px 18px rgba(25,74,126,.28),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.btn.danger{
  background: linear-gradient(180deg, #ee6b70 0%, #e0565b 100%);
  box-shadow:
    0 8px 18px rgba(224,86,91,.28),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.btn.ghost{
  background: transparent;
  color: var(--brand) !important;
  border: 2px solid var(--brand);
  box-shadow:none;
}
.btn.ghost:hover{ background: rgba(51,185,189,.08); }
.btn:disabled,
button.btn[disabled],
input.btn[disabled]{
  opacity:.65; cursor:not-allowed; transform:none;
  box-shadow:none; filter:none;
}

/* Inputs */
.input, input.input, select.input, textarea.input{
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}

/* Formularios */
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="file"],
.form select,
.form textarea{
  width:100%; box-sizing:border-box;
  border:1px solid #cbd5e1; border-radius:12px;
  padding:10px 12px; background:#fff; outline:none;
}
.form input[type="text"], .form input[type="email"]{ height:38px; }
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form input[type="url"]:focus,
.form input[type="file"]:focus,
.form select:focus,
.form textarea:focus{
  border-color:#33B9BD; box-shadow:0 0 0 3px rgba(51,185,189,.15);
}
.form .grid input{ width:100%; }

/* Grid y filas */
.grid{ display:grid; gap:12px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.row{ display:flex; gap:10px; }
.between{ justify-content:space-between; align-items:center; }

/* Chips / tags */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip{ border:1px solid #4596F6; border-radius:999px; padding:5px 10px; background:#4596F6; cursor:pointer; }
.tag{ background:#e2e8f0; border-radius:999px; padding:4px 8px; margin-right:6px; font-size:.85rem; }

/* ======================================================
   TABS V2 (para vistas de perfil)
   ====================================================== */
.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:6px 0 12px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.tab-btn{
  appearance:none; border:0; background:transparent;
  color:var(--ink-2); font-weight:700; letter-spacing:.2px;
  padding:10px 14px; border-radius:10px; cursor:pointer;
  position:relative; transition: background .15s ease, color .15s ease, transform .12s ease;
}
.tab-btn:hover{ background:rgba(51,185,189,.08); color:var(--accent); }
.tab-btn:focus-visible{
  outline: none; box-shadow:0 0 0 3px rgba(51,185,189,.20);
}
.tab-btn[aria-selected="true"]{
  color:#0b1e2d; background:rgba(96,183,254,.10);
  box-shadow: inset 0 0 0 2px rgba(96,183,254,.35);
}
.tab-btn[aria-selected="true"]::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-8px; height:3px;
  border-radius:3px; background:linear-gradient(90deg,#60B7FE,#31B8BD);
}
.tab-panel{ display:block; }
.tab-panel[hidden]{ display:none; }

/* Flashes */
.flash{ padding:10px 12px; border-radius:10px; margin:8px 0; }
.flash.ok{ background:#ecfeff; border:1px solid #a5f3fc; }
.flash.err{ background:#fff1f2; border:1px solid #fecdd3; }

/* Tablas */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; table-layout:auto; }
table.table thead th{ background:#E9F2FF; color:#143054; border-bottom:1px solid var(--line); }
table.table td{ background:#fff; border-color:var(--line); }
th, td{ vertical-align:top; padding:5px; }
thead th{ text-align:left; }

/* Resultados: foto 100x100 (heredado; ya no se usa tabla pero lo dejamos por si acaso) */
.results-table .result-photo img{
  width:150px; height:150px; object-fit:cover; border-radius:12px;
}

/* ======================================================
   ESPECIALIDADES (picker)
   ====================================================== */
.is-hidden{ display:none !important; }
.spec-picker{ position:relative; max-width:720px; }
.spec-trigger{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; cursor:pointer;
}
.spec-menu{
  position:absolute; z-index:40; top:100%; left:0; right:0; margin-top:6px;
  background:#fff; border:1px solid #cbd5e1; border-radius:12px;
  box-shadow:0 10px 30px rgba(2,8,20,.12); max-height:420px; overflow:auto; padding:8px;
}
.spec-cat{ border-radius:10px; padding:8px; }
.spec-cat:hover{ background:#f8fafc; }
.spec-cat-h{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.spec-cat-ico{
  width:26px; height:26px; border-radius:6px; background:#e2e8f0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.spec-cat-desc{ color:var(--muted); font-size:.9rem; }
.spec-cat-list{ margin-top:8px; display:none; gap:6px; flex-wrap:wrap; }
.spec-cat.open .spec-cat-list{ display:flex; }
.spec-pill{
  border:1px solid #cbd5e1; border-radius:999px; padding:6px 10px; background:#fff; cursor:pointer; font-size:.92rem;
}
.spec-pill.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ======================================================
   HERO (Landing) — premium
   ====================================================== */
.hero{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  min-height:var(--hero-h); overflow:hidden; isolation:isolate;
}
.hero--landing{
  background:
    radial-gradient(1200px 600px at 10% -15%, var(--hero-glow-a), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, var(--hero-glow-b), transparent 60%),
    linear-gradient(135deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 60%),
    url('/directorio/public/img/landing-hero.jpg') center/cover no-repeat;
}
.hero__content{
  position:relative; z-index:2;
  display:grid; align-items:end; min-height:var(--hero-h);
  padding-top:24px; padding-bottom:24px;
}
.hero__pills{
  display:grid; width:min(1100px, 100% - 28px);
  grid-template-columns:repeat(3,1fr); gap:18px;
  margin-inline:auto; transform:translateY(22px);
}
.gglass{
  background: rgba(12,41,77,.78);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:18px; padding:18px 20px;
  box-shadow:0 12px 28px rgba(2,8,20,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.gglass h3{
  margin:0 0 6px; font-size:28px; line-height:1.1; font-weight:800; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.gglass p{
  margin:0; font-size:14px; line-height:1.35; color:#EAF3FF; text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.gglass:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(2,8,20,.26);
  background:rgba(12,41,77,.84);
}
.hero__fade{
  position:absolute; left:0; right:0; bottom:-1px; height:120px; z-index:1;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg) 70%);
}

/* ======================================================
   DESTACADOS (portada)
   ====================================================== */
.featured-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
@media (max-width:1100px){ .featured-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .featured-grid{ grid-template-columns:1fr; } }

.featured-card{
  display:flex; flex-direction:column;
  background:var(--card); border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
.featured-card:hover{
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.featured-photo{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.featured-photo img{
  width:100%; height:100%; object-fit:cover; object-position: top center;
}
.featured-badge{ position:absolute; top:8px; left:8px; }
.featured-body{ padding:12px; }
.featured-name{
  font-weight:700; line-height:1.2; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.featured-title{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:6px;
}
.featured-rating{ display:flex; align-items:center; gap:6px; }
.featured-stars{ font-size:14px; line-height:1; }

/* ======================================================
   PERFIL PRO (hero de perfil)
   ====================================================== */
.pro-hero{
  color:#fff;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(50,183,187,.25), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, rgba(96,183,254,.25), transparent 60%),
    linear-gradient(135deg,#23538D 0%,#32B7BB 60%,#60B7FE 100%);
  padding:24px; border-radius:16px;
}
.pro-hero__wrap{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:.95fr 1.05fr; gap:24px;
  position:relative; isolation:isolate;
}
.pro-side{ display:grid; align-content:start; gap:16px; }
.pro-photo{
  margin:0; border-radius:26px; overflow:hidden; background:#0b1e2e;
  border:1px solid #32B7BB; box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.pro-photo img{ width:100%; height:540px; object-fit:cover; object-position:center top; }
.pro-card{
  background:rgba(11,30,46,.75); border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:14px 16px; box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.pro-name{
  margin:0 0 4px; font-weight:900; letter-spacing:.3px;
  font-size:clamp(1.15rem,1.8vw,1.35rem); color:#e8f7ff;
}
.pro-line{ margin-top:6px; color:#cfe3ff; }
.pro-line.small{ font-size:.95rem; }
.pro-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pro-main{ display:grid; gap:18px; align-content:start; }
.pro-badge{
  display:inline-block; font-weight:800; letter-spacing:.02em; padding:10px 12px;
  border-radius:12px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  font-size:.9rem; color:#e2f7f8;
}
.pro-block{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:18px; box-shadow:0 12px 26px rgba(0,0,0,.18); padding:18px;
}
.pro-h2{
  margin:0 0 10px; font-size:1rem; font-weight:900; text-transform:uppercase;
  color:#a6ff66; text-shadow:0 1px 4px rgba(0,0,0,.45); display:flex; align-items:center; gap:10px;
}
.pro-text{ line-height:1.7; color:#f6fbff; font-size:1rem; white-space:pre-wrap; }
.pro-topics1{ display:grid; gap:14px; grid-template-columns:repeat(1, minmax(0,1fr)); margin-top:10px; }
.pro-topics{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:10px; }
.pro-topic{
  position:relative; background:linear-gradient(135deg, rgba(50,183,187,.22), rgba(96,183,254,.18));
  border:2px solid #32B7BB; border-radius:14px; padding:14px; display:flex; align-items:flex-start;
  box-shadow:0 8px 18px rgba(35,83,141,.26);
}
.pro-topic::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:8px; border-radius:12px 0 0 12px;
  background:#60B7FE; box-shadow:-2px 0 12px rgba(96,183,254,.55);
}
.pro-topic p{ margin:0; color:#fff; font-weight:600; }

/* ======================================================
   LINKS (edición de perfil)
   ====================================================== */
.links-block{ margin-top:12px; }
.links-block .section-title{ font-weight:600; margin-bottom:6px; }
.links-wrap{ display:flex; flex-direction:column; gap:.35rem; }
.link-row{ display:flex; align-items:center; gap:.5rem; }
.link-row .kind{ min-width:160px; width:auto; }
.link-row .url{ flex:1; }
.btn-add-link{ margin-top:6px; }
.links-block .helper{ display:block; margin-top:6px; }

.tab-desc{
  padding:10px;
  border-radius:8px;
  border:1px solid #BEE1FF;
  color:#23538D;
  background-color: #EFF8FF;
}

/* Etiquetas de campo */
.field-label{
  font-weight: 600;
  color: #33B9BD; /* azul institucional */
  margin-bottom: 4px;
}

/* Bloques de formación */
.edu-row{
  margin-bottom: 16px;
}

/* Bloques de servicio: espacio entre cada uno */
.service-row-stack{
  margin-bottom: 8px;
}

/* ======================================================
   BLOQUES DE FORMACIÓN EN RESULTADOS
   ====================================================== */

/* Bloque debajo del nombre en resultados de búsqueda */
.srch-profile-meta {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Nombre */
.srch-name{
  font-variant: small-caps;
  font-size: 18px;
  margin:0;
  border-bottom: 1px solid var(--brand);
}

/* Línea de licencias (SVC) */
.srch-license {
  margin-bottom: 2px;
  color:var(--accent);
  font-style:italic;
  font-weight: 500;
}

/* Lista de formaciones académicas */
.srch-edu {
  margin: 0;
  padding-left: 1.1rem;
}
.srch-edu li {
  margin: 1px 0;
  list-style-type: none;
  color:#999999;
}

/* ======================================================
   BUSCADOR DE PROFESIONALES (tarjeta turquesa)
   ====================================================== */
.card--search{
  background: #31B8BD;              /* turquesa institucional */
  color: #ffffff;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Título "Buscar profesionales" en turquesa más claro */
.card--search .search-title{
  color: #8BEFF4;                   /* turquesa clarito para resaltar */
  margin-top: 0;
  margin-bottom: 12px;
}

/* Etiquetas de los campos: texto blanco y ligeramente a la derecha */
.card--search .grid > div > div:first-child{
  padding-left: 10px;                /* alinea con el input */
  margin-bottom: 4px;
  font-size: .92rem;
  color: #ffffff;
  opacity: .9;
}

/* Inputs blancos dentro del buscador */
.card--search .input{
  background: #ffffff;
  color: #123047;                   /* azul oscuro legible */
  border: 1px solid rgba(255,255,255,.4);
}

/* Placeholders en gris suave para que no compitan con las etiquetas */
.card--search .input::placeholder{
  color: rgba(0,0,0,.35);
}

/* Botones blancos tipo “píldora”, como en edición de perfil */
.card--search .btn{
  background: #ffffff;
  color: #31B8BD !important;
  border: 2px solid #8BEFF4;
  border-radius: 999px;
  font-weight: 600;
}
.card--search .btn:hover{
  background: transparent;
  color: #ffffff !important;
}

/* Botón de selección de especialidades con el mismo estilo de botón blanco */
.card--search .spec-trigger{
  background: #ffffff;
  color: #31B8BD;
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-weight: 600;
}
.card--search .spec-trigger span:first-child{
  padding-right: 6px;
}

/* En escritorio: que el grid del buscador se acomode solo */
.card--search .grid{
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* En tablets y cel: todo en una sola columna y con aire entre campos */
@media (max-width: 768px){
  .card--search .grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .card--search .grid > div{
    min-width: 0;
  }
}

/* Unificar estilo de inputs en el buscador */
.card--search .input,
.card--search select.input,
.card--search textarea.input{
  border-radius: 999px;
  background: #ffffff;
  color: #123047;
  border: 2px solid #ffffff;
  padding: 10px 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
  font-size: 0.95rem;
}
.card--search select.input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.card--search .spec-trigger{
  border-radius: 999px;
  background: #ffffff;
  color: #123047;
  border: 2px solid #ffffff;
  padding: 10px 16px;
  font-size: 0.95rem;
}
.card--search .spec-trigger span:first-child{
  color: #64748b;
}
.card--search .input::placeholder{
  color: rgba(0,0,0,.38);
}

/* ======================================================
   LISTADO DE RESULTADOS EN CARDS
   ====================================================== */

/* Contenedor: dos columnas en escritorio */
.results-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

/* Card individual (ocupa ~50% del ancho dentro del grid) */
.result-card{
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(2,8,20,.06);
  padding:14px;
  border:1px solid var(--line);
}

/* Fila interna: foto – info – rating */
.result-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

/* Foto */
.result-photo{
  flex:0 0 130px;
  margin-right:4px;
}
.result-photo img{
  width:130px;
  height:130px;
  object-fit:cover;
  border-radius:12px;
}

/* Cuerpo de información (nombre, licencias, meta) */
.result-body{
  flex:1;
}

/* Bloque de rating separado (tercer bloque) */
.result-rating{
  flex:0 0 80px;
  text-align:right;
  font-size:.85rem;
}
.result-stars{
  display:block;
  font-size:1rem;
  line-height:1;
}
.result-score{
  display:block;
}
.result-reviews{
  display:block;
  color:var(--muted);
}

/* Meta: lugar, modalidad, etc. */
.result-meta{
  margin-top:6px;
  font-size:.9rem;
}
.result-meta-row{
  display:flex;
  gap:6px;
  margin-top:2px;
}
.result-meta-row strong{
  min-width:80px;
  color:var(--accent);
  font-weight:600;
}

/* Barra de ordenamiento */
.results-sort{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.results-sort-label{
  font-size:.9rem;
  color:var(--muted);
}
.results-sort .sort-btn{
  border:0;
  background:transparent;
  color:#0ea5b7;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.results-sort .sort-btn .arrow{
  font-size:.75rem;
}

/* ======================================================
   PLANES (sección existente, sin cambios)
   ====================================================== */
.plans-hero {
  text-align:center;
  margin: 24px auto 16px;
  max-width: 900px;
}
.plans-hero h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-1, #01324B);
  margin: 0;
}
.plans-hero .subtitle {
  font-size: 13px;
  color: var(--gray-600,#4a4a4a);
  margin-top: 6px;
}
.interval-toggle { display: inline-flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.interval-toggle .btn { min-width: 80px; font-size: 11px; line-height: 1.2; padding: 6px 10px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; margin: 24px auto 40px; }
.plan-card { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.05); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.plan-head { padding: 16px 16px 8px 16px; background: rgba(1,50,75,0.03); border-bottom: 1px solid rgba(0,0,0,.05); min-height: 110px; display: flex; flex-direction: column; justify-content: flex-start; }
.plan-name-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.plan-name { font-size: 16px; font-weight: 700; color: var(--brand-1,#01324B); margin: 0; }
.plan-ribbon { background: var(--brand-2,#31B8BD); color: #fff; font-size: 10px; font-weight:600; line-height:1.2; padding:4px 6px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0,0,0,.15); white-space: nowrap; }
.plan-desc { font-size: 12px; color: var(--gray-700,#333); line-height: 1.4; margin-top: 8px; white-space: pre-line; }
.plan-pricing { padding: 12px 16px 0 16px; font-size: 13px; line-height:1.4; color: var(--gray-700,#333); }
.prev-price-row { font-size: 12px; color:#555; text-decoration:none; margin-bottom:4px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.prev-price-row s { color:#555; }
.prev-badge { background:#d32f2f; color:#fff; font-size:10px; font-weight:600; padding:2px 4px; border-radius:4px; line-height:1.2; }
.current-price { font-size:24px; font-weight:700; color:#60B7FE; line-height:1.2; }
.per-label { font-size:12px; color:#60B7FE; font-weight:500; line-height:1.2; }
.billing-note { font-size:11px; color:#666; margin-top:4px; }
.plan-cta-wrap { padding: 12px 16px; }
.plan-cta-btn {
  width:100%; display:inline-block; text-align:center; border:0; cursor:pointer; text-decoration:none;
  color:#fff !important; font-size:13px; line-height:1.2; font-weight:600; border-radius:6px; padding:10px 12px;
  background: linear-gradient(180deg, #36c7cb 0%, #2fb0b4 100%);
  box-shadow: 0 8px 18px rgba(51,185,189,.28), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.plan-cta-btn:hover { transform: translateY(-1px); box-shadow:0 12px 28px rgba(51,185,189,.34), 0 0 0 1px rgba(255,255,255,.12) inset; filter: brightness(.98); }
.plan-cta-btn:active { transform: translateY(0); filter: brightness(.95); }
.plan-cta-btn.disabled, .plan-cta-btn[aria-disabled="true"] { background:#ccc; box-shadow:none; color:#666 !important; cursor:not-allowed; transform:none; filter:none; }
.plan-features { margin:0; padding: 0 16px 16px 16px; list-style:none; font-size:12px; line-height:1.4; flex-grow:1; }
.plan-features li { display:flex; align-items:flex-start; gap:8px; border-top:1px solid rgba(0,0,0,.05); padding:8px 0; min-height:32px; }
.icon-check { font-weight:700; color:#2e7d32; min-width:16px; font-size:13px; line-height:1.2; }
.icon-x { font-weight:700; color:#999; min-width:16px; font-size:13px; line-height:1.2; }
.feat-text { color:#111; }
.feat-text.muted { color:#999; text-decoration:line-through; }
.flash-inline { font-size:12px; font-weight:600; margin-top:8px; }
.flash-ok { color:#2e7d32; }
.flash-cancel { color:#d32f2f; }
.plans-topcard { max-width:1100px; margin:16px auto 0; background:#fff; border:1px solid rgba(0,0,0,.07); box-shadow:0 8px 20px rgba(0,0,0,.05); border-radius:12px; padding:16px; }
.plans-topcard-inner { display:flex; flex-wrap:wrap; row-gap:12px; column-gap:16px; justify-content:space-between; align-items:flex-start; }
.plans-top-left h2 { font-size:18px; font-weight:700; color:var(--brand-1,#01324B); margin:0; line-height:1.3; }
.plans-top-left .hint { font-size:12px; color:#444; line-height:1.4; margin-top:4px; }
.plans-top-right { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; }
.btn-interval {
  font-size:11px; line-height:1.2; padding:6px 10px; min-width:80px; border-radius:6px; text-align:center; font-weight:600;
  text-decoration:none; border:1px solid var(--brand-2,#31B8BD); color:var(--brand-2,#31B8BD); background:#fff;
}
.btn-interval.active { background:var(--brand-2,#31B8BD); color:#fff; }
.plan-card.highlight { border:2px solid #60B7FE; box-shadow:0 10px 24px rgba(96,183,254,.25); }
.plan-ribbon.blue { background:#60B7FE; color:#0b1e2d; font-weight:700; }
@media (min-width:768px){
  .plans-hero h1 { font-size: 32px; }
  .current-price { font-size:26px; }
}

/* === Thumbs galería (media.php) === */
.g-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;
}
.g-item{
  position:relative;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  background:#0b0b0b;
}
.g-thumb{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0b0b0b;
}
.g-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.g-tools{
  position:absolute;
  top:6px;
  right:6px;
}
.g-tools .x{
  line-height:1;
  padding:2px 6px;
  border-radius:8px;
  background:#ffffffcc;
  border:1px solid #e5e7eb;
  cursor:pointer;
}
.g-tools .x:hover{ background:#fff; }

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:1024px){
  .container{ max-width:960px; }
}

@media (max-width:768px){
  body{ font-size:16px; line-height:1.45; }
  .small{ font-size:.95rem; }
  .container{ padding:0 12px; }
  .card{ padding:14px; }

  .nav{ padding:10px; gap:8px; }
  .nav .brand{ flex:1 0 60%; }
  .nav .nav-link{ padding:6px 8px; }
  .nav .btn{ padding:8px 12px; }

  .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr !important; }
  .form .grid{ gap:10px; }

  .form input[type="text"],
  .form input[type="email"],
  .form input[type="number"],
  .form input[type="url"],
  .form input[type="file"],
  .form select,
  .form textarea,
  .input, input.input, select.input, textarea.input{
    font-size:16px; line-height:1.2; padding:12px; border-radius:12px; width:100%;
  }

  .btn{ width:100%; }
  .btn.ghost{ width:auto; }

  #site-footer{ font-size:12px; padding:8px; }

  .pro-hero__wrap{ grid-template-columns:1fr; }
  .pro-topics{ grid-template-columns:1fr; }
  .pro-photo img{ height:420px; }

  :root{ --hero-h: 400px; }
  .hero__pills{ grid-template-columns:1fr; gap:12px; transform:translateY(10px); }
  .gglass h3{ font-size:24px; }

  /* Tabs responsive */
  .tabs{ gap:6px; padding:6px; }
  .tab-btn{ padding:10px 12px; }

  /* Results: en tablet bajamos a 1 columna */
  .results-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  /* Cards: foto arriba, luego info y rating */
  .result-row{
    flex-direction:column;
  }
  .result-photo{
    margin-right:0;
    margin-bottom:8px;
    flex:0 0 auto;
  }
  .result-photo img{
    width:100%;
    height:auto;
  }
  .result-rating{
    text-align:left;
    margin-top:6px;
  }
}

@media (max-width:480px){
  .nav .brand img{ height:56px; }
  h1{ font-size:1.35rem; }
  h2{ font-size:1.2rem; }
  h3{ font-size:1.05rem; }
  .card{ padding:12px; }

  /* Resultados más legibles en cel */
  .result-card{
    font-size:0.95rem;
  }
  .srch-name{
    font-size:1.05rem;
  }
  .result-meta{
    font-size:0.95rem;
  }

  /* Buscador: botones a lo ancho */
  .card--search{
    padding:14px;
  }
  .card--search .grid{
    gap:10px;
  }
  .card--search .btn{
    width:100%;
  }
}
.card--search-semiologos {
  background-color: #23538D; /* o el azul que uses */
}
.search-adv-link {
  color: #fff;       /* opcional */
  text-decoration: underline;
  font-size: 0.9rem;
}