/* /contacto-v2 (rgg-sitio/24-revision-paginas.md: horario con horas, mapa, foto de la oficina, quién atiende y los canales; salen los precios).
   Se carga después de la parte cabeza (base.css, home-v4.css, paginas.css). Prefijo ct-: .canal y .dato ya existen en base.css y home-v4.css.
   Lo propio de esta página: la ficha de datos en la portada, el formulario con quién responde, la lista de trámites y la fila de redes */

.ico-red { fill: currentColor; stroke: none; }

/* Portada: a la derecha, los cuatro datos en una ficha translúcida sobre la foto */
.ct-ficha { margin: 0; padding: 8px 28px; border-radius: var(--r-bloque); background: rgba(15, 30, 56, .55); border: 1px solid rgba(184, 205, 232, .2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.ct-ficha div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 18px 0; }
.ct-ficha div + div { border-top: 1px solid rgba(184, 205, 232, .16); }
.ct-ficha dt { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-osc); }
.ct-ficha dt .ico { width: 18px; height: 18px; color: var(--azul-claro); }
.ct-ficha dd { margin: 0; font-size: 17px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.ct-ficha dd a { color: #fff; text-decoration: underline; text-decoration-color: rgba(122, 174, 232, .5); text-underline-offset: 4px; }
.ct-ficha dd a:hover { text-decoration-color: var(--azul-claro); }

/* Formulario: a la izquierda quién responde, a la derecha la caja */
.ct-form-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.ct-txt { margin-top: 14px; font-size: 18px; color: var(--texto-2); }
.ct-equipo { display: grid; gap: 14px; margin: 28px 0 22px; padding: 0; list-style: none; }
.ct-equipo li { display: flex; align-items: center; gap: 14px; }
.ct-equipo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borde); }
.ct-equipo b { display: block; font-size: 16px; color: var(--marino); }
.ct-equipo span { font-size: 14px; color: var(--texto-2); }
.ct-nota { display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--borde); font-size: 15px; color: var(--texto-2); }
.ct-nota .ico { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--azul); }
.form .opcional { font-weight: 500; color: var(--texto-2); }
.form textarea { min-height: 140px; }
.ct-ok, .aviso-form { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--r-boton); font-size: 15px; line-height: 1.5; }
.ct-ok { background: #ECFDF3; border: 1px solid #A7F3C6; color: #14532D; }
.aviso-form { background: #FEF2F2; border: 1px solid #FECACA; color: #7F1D1D; }
.ct-ok[hidden], .aviso-form[hidden], .aviso-form p[hidden] { display: none; }
.ct-ok .ico, .aviso-form .ico { flex-shrink: 0; margin-top: 2px; }
.ct-ok p, .aviso-form p { margin: 0; }
.aviso-form a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Trámites: una lista de filas, dos por renglón */
.ct-tramites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ct-tramites a { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-tarjeta); background: #fff; border: 1px solid var(--borde);
  transition: border-color .2s ease, box-shadow .2s ease; }
.ct-tramites a:hover { border-color: #C6D6EE; box-shadow: var(--sombra-suave); }
.ct-tramites a:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.ct-tramites .ico { flex-shrink: 0; width: 24px; height: 24px; color: var(--azul); }
.ct-tramites span { flex: 1; }
.ct-tramites b { display: block; font-size: 17px; color: var(--marino); }
.ct-tramites small { font-size: 14px; color: var(--texto-2); }
.ct-tramites .ct-flecha { width: 18px; height: 18px; color: var(--texto-2); transition: transform .2s ease, color .2s ease; }
.ct-tramites a:hover .ct-flecha { transform: translateX(3px); color: var(--azul); }

/* Oficina: texto y foto a la izquierda, el mapa a la derecha con el mismo alto */
.ct-oficina-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: stretch; }
.ct-oficina { display: flex; flex-direction: column; }
.ct-dir { margin-top: 14px; font-size: 20px; font-weight: 600; color: var(--marino); }
.ct-oficina p:not(.ct-dir) { margin-top: 10px; font-size: 17px; color: var(--texto-2); }
.ct-oficina .link-azul { margin-top: 16px; }
.ct-foto { width: 100%; aspect-ratio: 16 / 10; margin-top: 28px; object-fit: cover; object-position: 50% 40%; border-radius: var(--r-bloque); }
.ct-mapa { position: relative; min-height: 420px; border-radius: var(--r-bloque); overflow: hidden; background: var(--gris); border: 1px solid var(--borde); box-shadow: var(--sombra-suave); }
.ct-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Redes y reseñas: cuatro en fila, cada una con su color */
.ct-redes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ct-redes a { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 20px 22px;
  border-radius: var(--r-tarjeta); background: #fff; border: 1px solid var(--borde); transition: border-color .2s ease, box-shadow .2s ease; }
.ct-redes a:hover { border-color: #C6D6EE; box-shadow: var(--sombra-suave); }
.ct-redes a:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
/* La G de Google va sin .ico: el trazo de los íconos de línea la deformaba */
.ct-redes .ico, .ct-redes .ct-g { grid-row: span 2; width: 30px; height: 30px; }
.ct-redes .ct-g { width: 26px; height: 26px; margin-left: 2px; }
.ct-redes b { font-size: 16px; color: var(--marino); }
.ct-redes span { font-size: 14px; color: var(--texto-2); }
.ct-yt { color: #E62117; }
.ct-redes .ct-ig { fill: url(#ct-ig-degrade); }
.ct-fb { color: #1877F2; }

@media (max-width: 1023px) {
  .ct-form-grid, .ct-oficina-grid { grid-template-columns: 1fr; gap: 40px; }
  .ct-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-mapa { min-height: 360px; }
}
@media (max-width: 700px) {
  .ct-ficha { padding: 4px 20px; }
  .ct-ficha div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .ct-tramites, .ct-redes { grid-template-columns: 1fr; }
  .ct-mapa { min-height: 300px; }
}
.ct-ficha dd small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--texto-osc); }