/* =====================================================================
   publico/assets/paginas.css
   ---------------------------------------------------------------------
   LAS PÁGINAS INSTITUCIONALES: Nosotros, Servicios, Contacto, Cómo
   comprar, Preguntas frecuentes (publico/pagina.php).

   Las piezas de nucleo/bloques.php: cabecera con cajetín, tarjetas,
   cifras, equipo, pasos, llamado, mapa, fotos, canales y formulario.

   Todo sale de tema.css (Plano Vitela / Plano Azul): ningún color
   suelto, espacios en la escala de 8, radio de 4 a 8, y el movimiento
   del manual (140 ms al presionar, 200 ms en la interfaz, curvas
   fuertes, nunca ease-in). Un solo botón sólido por vista: el del
   llamado o el del formulario.

   Se carga solo en estas páginas ($hojasExtra) con ?v=SITIO_CSS_VERSION.
   ===================================================================== */

.pagina--rica{ padding-bottom:var(--s12); }

/* Separación entre secciones: 64 a 96 px según el ancho (lámina 05). */
.pagina--rica > .bloque-ancho,
.pagina--rica > .bloque{ margin:0 0 clamp(64px, 8vw, 96px); }
.pagina--rica > .bloque{ max-width:calc(70ch + 2 * var(--s4)); }

.seccion-h2{
  font-size:clamp(24px, 3vw, 32px); line-height:1.15; letter-spacing:.05em;
  color:var(--ink); margin:0 0 var(--s2);
}
.seccion-intro{ max-width:62ch; margin:0 0 var(--s4); }
.seccion-intro p{ margin:0 0 var(--s1); font-size:16px; line-height:1.65; color:var(--ink-dim); }
.seccion-intro p:last-child{ margin-bottom:0; }

.icono{ width:20px; height:20px; flex:none; }

/* El aviso que solo ve quien edita (vista de borrador). */
.aviso-editor{
  margin:var(--s2) 0 0; padding:10px 14px;
  border:1px dashed var(--accent); border-radius:var(--radius-sm);
  font-size:13px; line-height:1.5; color:var(--ink-dim); background:var(--bg-elev);
}
.aviso-editor b{ color:var(--accent-text); }


/* =====================================================================
   CABECERA: rótulo, título, bajada, anotación y cajetín
   ===================================================================== */
.pcab{
  display:grid; grid-template-columns:minmax(0, 1fr);
  gap:var(--s6); align-items:end;
  padding:var(--s6) 0 var(--s6);
  margin:0 0 clamp(48px, 7vw, 80px);
  border-bottom:1px solid var(--panel-border);
  position:relative;
}
.pcab.con-cajetin{ grid-template-columns:minmax(0, 1fr) 340px; }
/* La cota bajo la cabecera: un tramo grueso al inicio de la línea. */
.pcab::after{
  content:""; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background:var(--ink);
}
.pcab .miga{ margin-bottom:var(--s3); }
.pcab .eyebrow{ margin-bottom:var(--s2); }
.pcab-titulo{
  font-size:clamp(38px, 5.6vw, 68px); line-height:1.06; letter-spacing:.04em;
  color:var(--ink); margin:0 0 var(--s3); padding-top:.08em; max-width:16ch;
}
.pcab-bajada{ max-width:58ch; }
.pcab-bajada p{ margin:0 0 var(--s1); font-size:clamp(17px, 1.6vw, 19px); line-height:1.6; color:var(--ink-dim); }
.pcab-bajada p:last-child{ margin-bottom:0; }
.pcab-bajada a{ color:var(--accent-text); text-underline-offset:3px; }
.pcab-nota{ margin:var(--s2) 0 0; }

/* El cajetín: el recuadro de datos de un plano. Doble marco, celdas
   separadas por la línea fina, esquinas casi rectas. */
.pcab-cajetin{
  margin:0; display:grid; grid-template-columns:1fr 1fr;
  background:var(--bg-elev);
  border:1px solid var(--line);
  box-shadow:0 0 0 4px var(--bg-elev), 0 0 0 5.5px var(--ink);
  border-radius:2px;
  align-self:end;
}
.pcab-cajetin > div{
  padding:12px 16px 13px; min-width:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pcab-cajetin > div:nth-child(2n){ border-right:0; }
.pcab-cajetin > div:nth-last-child(-n+2):nth-child(odd),
.pcab-cajetin > div:last-child{ border-bottom:0; }
.pcab-cajetin dt{
  font-family:var(--font-display); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px;
}
.pcab-cajetin dd{ margin:0; font-size:15px; font-weight:600; color:var(--ink); line-height:1.35; }

.bloque-bajada p{ font-size:20px; line-height:1.6; color:var(--ink-dim); max-width:60ch; }

@media (max-width:900px){
  .pcab.con-cajetin{ grid-template-columns:minmax(0, 1fr); }
  .pcab-cajetin{ max-width:420px; margin:0 6px; }
}


/* =====================================================================
   TARJETAS
   ===================================================================== */
.tarjetas{ display:grid; gap:var(--s4) var(--s3); padding-top:14px; }
.tarjetas.cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tarjetas.cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tarjetas.cols-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.tarjeta{ padding:var(--s4) var(--s3) var(--s3); }
.tarjeta-titulo{ font-size:18px; line-height:1.25; letter-spacing:.05em; color:var(--ink); margin:0 0 12px; }
.tarjeta p{ margin:0 0 10px; font-size:15px; line-height:1.6; color:var(--ink-dim); }
.tarjeta p:last-child{ margin-bottom:0; }
.tarjeta a{ color:var(--accent-text); font-weight:600; text-underline-offset:3px; }

@media (max-width:1000px){ .tarjetas.cols-3, .tarjetas.cols-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){ .tarjetas.cols-2, .tarjetas.cols-3, .tarjetas.cols-4{ grid-template-columns:minmax(0, 1fr); } }


/* =====================================================================
   CIFRAS
   ===================================================================== */
.cifras-lamina{ padding:var(--s6) var(--s4) var(--s4); }
.cifras{ margin:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cifras.n-1{ grid-template-columns:1fr; }
.cifras.n-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.cifras.n-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.cifra{
  display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:8px;
  padding:0 var(--s3); border-left:1px solid var(--panel-border); min-width:0;
}
.cifra:first-child{ border-left:0; padding-left:0; }
.cifra dd{
  margin:0; font-size:clamp(26px, 2.9vw, 38px); line-height:1.08; letter-spacing:.03em;
  color:var(--ink); font-weight:600;
}
.cifra dt{ font-size:14px; line-height:1.45; color:var(--ink-dim); }

@media (max-width:760px){
  .cifras, .cifras.n-3{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:var(--s4); }
  .cifra:nth-child(odd){ border-left:0; padding-left:0; }
}


/* =====================================================================
   EQUIPO
   ===================================================================== */
.equipo-grupal{
  margin:0 0 var(--s4); border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--panel-border); background:var(--bg-elev-2);
}
.equipo-grupal img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }

.equipo{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--s3);
}
.persona{
  background:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md); padding:var(--s2) var(--s2) var(--s3);
}
.persona-foto{
  position:relative; aspect-ratio:1; margin:0 0 var(--s2);
  border-radius:var(--radius-sm); overflow:hidden;
  background-color:var(--bg-elev-2);
  display:grid; place-items:center;
}
.persona-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Esquinas de registro sobre el retrato: la foto también es una lámina. */
.persona-foto::before, .persona-foto::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
}
.persona-foto::before{ top:8px; left:8px;  border-top:2px solid var(--line); border-left:2px solid var(--line); }
.persona-foto::after { bottom:8px; right:8px; border-bottom:2px solid var(--line); border-right:2px solid var(--line); }
.persona-inicial{ font-size:56px; line-height:1; letter-spacing:.06em; color:var(--ink-faint); }
.persona-nombre{ font-size:17px; line-height:1.25; letter-spacing:.05em; color:var(--ink); margin:0 0 6px; }
.persona-cargo{
  margin:0 0 10px; font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text);
}
.persona-frase p{ margin:0 0 6px; font-size:14px; line-height:1.55; color:var(--ink-dim); overflow-wrap:anywhere; }
.persona-frase a{ color:var(--accent-text); font-weight:600; text-underline-offset:3px; }


/* =====================================================================
   PASOS
   La línea de puntos une los números: es una secuencia, y en el
   manual lo discontinuo significa justamente eso.
   ===================================================================== */
.pasos{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s3);
}
.pasos.n-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.pasos.n-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.pasos.n-5{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
.pasos.n-6{ grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:var(--s6); }
/* La línea termina en el último número, no en el borde: right es el
   ancho de la última columna menos medio número. */
.pasos::before{
  content:""; position:absolute; top:24px; left:24px;
  right:calc((100% - (var(--n, 4) - 1) * var(--s3)) / var(--n, 4) - 24px);
  border-top:1.5px dashed var(--line); opacity:.55;
}
.pasos.n-6::before{ display:none; }
.paso{ position:relative; min-width:0; }
.paso-n{
  position:relative; z-index:1;
  display:inline-grid; place-items:center; width:48px; height:48px;
  background:var(--bg-elev); color:var(--ink);
  border:1.5px solid var(--ink); border-radius:var(--radius-sm);
  font-size:16px; letter-spacing:.04em;
}
/* El último paso, relleno: es donde termina el proceso. En tinta y no
   en amarillo: el acento de la vista es el botón de la página. */
.paso:last-child .paso-n{ background:var(--ink); color:var(--bg-elev); }
.paso-cuerpo{ margin-top:var(--s2); }
.paso-titulo{ font-size:16px; line-height:1.35; font-weight:600; color:var(--ink); margin:0 0 6px; }
.paso-cuerpo p{ margin:0 0 6px; font-size:14.5px; line-height:1.6; color:var(--ink-dim); }
.paso-cuerpo a{ color:var(--accent-text); text-underline-offset:3px; }

@media (max-width:900px){
  .pasos, .pasos.n-2, .pasos.n-3, .pasos.n-5, .pasos.n-6{ grid-template-columns:minmax(0, 1fr); row-gap:var(--s3); }
  .pasos::before, .pasos.n-6::before{
    display:block; top:24px; bottom:24px; left:24px; right:auto; border-top:0;
    border-left:1.5px dashed var(--line);
  }
  .paso{ display:grid; grid-template-columns:48px minmax(0, 1fr); gap:var(--s2); }
  .paso-cuerpo{ margin-top:10px; }
}


/* =====================================================================
   LLAMADO
   ===================================================================== */
.llamado{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s6) clamp(24px, 4vw, 48px);
  background-color:var(--bg-elev);
  border:1px solid var(--panel-border); border-radius:var(--radius-md);
  box-shadow:0 16px 34px -20px var(--shadow);
}
.llamado::before, .llamado::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; }
.llamado::before{ top:-1px; left:-1px;  border-top:2px solid var(--line); border-left:2px solid var(--line); }
.llamado::after { bottom:-1px; right:-1px; border-bottom:2px solid var(--line); border-right:2px solid var(--line); }
.llamado-titulo{ font-size:clamp(24px, 3vw, 34px); line-height:1.12; letter-spacing:.05em; color:var(--ink); margin:0 0 10px; }
.llamado-texto p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-dim); max-width:52ch; }
.llamado-boton{ flex:none; }

.btn-sistema .icono{ width:18px; height:18px; transition:transform var(--dur-ui) var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .btn-sistema:hover .icono{ transform:translateX(3px); }
}

@media (max-width:760px){
  .llamado{ flex-direction:column; align-items:stretch; }
  .llamado-boton{ width:100%; }
}


/* =====================================================================
   MAPA
   ===================================================================== */
.mapa-fila{ display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:var(--s4); align-items:start; }
.mapa-figura{
  position:relative; display:block; aspect-ratio:16 / 9;
  border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--panel-border); background:var(--bg-elev-2);
  color:inherit; text-decoration:none;
  transition:border-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
a.mapa-figura:active{ transform:scale(0.99); }
.mapa-figura img{ display:block; width:100%; height:100%; object-fit:cover; }

/* El plano dibujado: calles con borde, la manzana marcada y el pin. */
.mapa-plano{ position:absolute; inset:0; background-color:var(--bg-elev-2); }
.mapa-calles{ position:absolute; inset:0; width:100%; height:100%; }
.mapa-calles path{ fill:none; stroke:var(--bg-elev); stroke-width:14; stroke-linecap:round; filter:drop-shadow(0 0 0.6px var(--line)); }
.mapa-manzana{ fill:var(--ink); opacity:.1; stroke:var(--ink); stroke-width:1.5; stroke-dasharray:4 3; }
.mapa-pin{
  position:absolute; left:50%; top:46%; transform:translate(-50%, -100%);
  display:grid; place-items:center; width:44px; height:44px; border-radius:50% 50% 50% 4px;
  rotate:-45deg;
  background:var(--ink); color:var(--bg-elev);
  box-shadow:0 10px 18px -8px var(--shadow);
}
.mapa-pin .icono{ rotate:45deg; width:22px; height:22px; }
.mapa-rotulo{
  position:absolute; left:16px; bottom:16px; max-width:calc(100% - 32px);
  font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:var(--bg-elev); color:var(--ink); padding:6px 10px;
  border:1px solid var(--panel-border); border-radius:2px;
}
.mapa-abrir{
  position:absolute; right:16px; top:16px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink);
  background:var(--bg-elev); padding:7px 12px;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  box-shadow:0 8px 16px -10px var(--shadow);
}
.mapa-abrir .icono{ width:16px; height:16px; transition:transform var(--dur-ui) var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  a.mapa-figura:hover{ border-color:var(--ink-dim); }
  a.mapa-figura:hover .mapa-abrir .icono{ transform:translateX(3px); }
}
.mapa-ficha{ padding:var(--s4) var(--s3) var(--s3); }
.mapa-direccion{ margin:0 0 var(--s2); font-size:17px; line-height:1.5; font-weight:600; color:var(--ink); }
.mapa-horario{ display:flex; gap:10px; align-items:flex-start; margin:0 0 var(--s2); font-size:15px; color:var(--ink-dim); }
.mapa-horario .icono{ margin-top:1px; }
.mapa-referencia p{ margin:0 0 var(--s2); font-size:14.5px; line-height:1.6; color:var(--ink-dim); }

@media (max-width:900px){ .mapa-fila{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:640px){
  .mapa-figura{ aspect-ratio:4 / 3; }
  .mapa-rotulo{ font-size:11px; left:12px; bottom:12px; max-width:calc(100% - 24px); }
  .mapa-abrir{ right:12px; top:12px; }
}


/* =====================================================================
   FOTOS DEL LOCAL
   ===================================================================== */
.fotos{ display:grid; gap:var(--s2); }
.fotos.n-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.fotos.n-3{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); grid-template-rows:repeat(2, minmax(0, 1fr)); }
.fotos.n-3 .foto:first-child{ grid-row:span 2; }
.foto{
  margin:0; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--panel-border); background:var(--bg-elev-2);
}
.foto img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16 / 9; }
.fotos.n-3 .foto:first-child img{ aspect-ratio:auto; }
@media (max-width:640px){
  .fotos.n-2, .fotos.n-3{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; }
  .fotos.n-3 .foto:first-child{ grid-row:auto; }
  .fotos.n-3 .foto:first-child img{ aspect-ratio:16 / 9; }
}


/* =====================================================================
   CANALES DE CONTACTO
   La tarjeta entera es el enlace: en el celular es más fácil tocar una
   tarjeta que buscar el número adentro.
   ===================================================================== */
.canales{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:var(--s2);
}
/* Con cinco canales, la visita ocupa la columna de la izquierda entera
   y los otros cuatro van en dos por dos: sin una tarjeta huérfana. */
.canales.n-5{ grid-template-columns:minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); }
.canales.n-5 > li:first-child{ grid-row:span 2; }
@media (max-width:900px){
  .canales.n-5{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .canales.n-5 > li:first-child{ grid-row:auto; grid-column:1 / -1; }
}
@media (max-width:560px){ .canales.n-5{ grid-template-columns:minmax(0, 1fr); } }
.canal{
  position:relative; height:100%;
  display:flex; flex-direction:column; gap:4px;
  padding:var(--s3); color:var(--ink); text-decoration:none;
  background:var(--bg-elev); border:1px solid var(--panel-border); border-radius:var(--radius-md);
  transition:border-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
a.canal:active{ transform:scale(0.98); }
.canal-icono{
  display:grid; place-items:center; width:44px; height:44px; margin:0 0 var(--s2);
  border-radius:var(--radius-sm); background:var(--bg-elev-2); color:var(--ink);
}
.canal-icono .icono{ width:22px; height:22px; }
.canal-rotulo{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.canal-valor{ font-size:17px; line-height:1.4; font-weight:600; overflow-wrap:break-word; }
.canal-sub{ font-size:13.5px; line-height:1.5; color:var(--ink-dim); }
.canal-accion{
  margin-top:auto; padding-top:var(--s2);
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--accent-text);
}
.canal-accion .icono{ width:16px; height:16px; transition:transform var(--dur-ui) var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  a.canal:hover{ border-color:var(--ink-dim); }
  a.canal:hover .canal-accion .icono{ transform:translateX(3px); }
}


/* =====================================================================
   FORMULARIO "ENVÍANOS UN MENSAJE"
   ===================================================================== */
.form-fila{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:var(--s6); align-items:start; }
.form-intro p{ margin:0 0 var(--s2); font-size:16px; line-height:1.65; color:var(--ink-dim); max-width:46ch; }
.form-intro a{ color:var(--accent-text); text-underline-offset:3px; }
.form-mensaje{ padding:var(--s4) var(--s3) var(--s3); }
.form-mensaje .campos-dos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 var(--s2); align-items:start; }
.form-mensaje .campo-f{ margin-bottom:var(--s2); }
.form-mensaje .campo-f input,
.form-mensaje .campo-f select,
.form-mensaje .campo-f textarea{
  min-height:44px; font-size:16px;   /* 16 px: iOS no hace zoom al enfocar */
  transition:border-color var(--dur-ui) ease;
}
.form-mensaje .campo-f textarea{ min-height:132px; }
.form-mensaje .con-error input,
.form-mensaje .con-error select,
.form-mensaje .con-error textarea{ border-color:var(--danger); }
.campo-error{ margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--danger); }
.form-mensaje .campo-check-f{ align-items:flex-start; margin:var(--s1) 0 0; }
.form-mensaje .campo-check-f input{ margin-top:1px; flex:none; }
.form-mensaje .campo-check-f label{ font-size:14px; line-height:1.5; color:var(--ink-dim); }
.form-mensaje .campo-check-f a{ color:var(--accent-text); }
.form-mensaje .campo-check-f.con-error label{ color:var(--danger); }
.form-general{
  margin:0 0 var(--s2); padding:10px 14px; font-size:14px; line-height:1.5;
  color:var(--danger); border:1px solid currentColor; border-left-width:3px; border-radius:var(--radius-sm);
}
.form-pie{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); margin-top:var(--s3); }
.form-pie .btn-sistema[disabled]{ opacity:.7; cursor:progress; }
.form-nota{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-faint); flex:1 1 220px; }
.form-nota a{ color:var(--ink-dim); text-underline-offset:3px; }

/* La trampa para robots: fuera de la pantalla, no display:none (algunos
   robots se saltan lo oculto con display). */
.campo-trampa{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Enviado. Un momento que se ve una vez: se permite una entrada suave. */
.form-listo{ padding:var(--s6) var(--s4) var(--s4); outline:none; animation:form-listo 260ms var(--ease-out) both; }
.form-listo p{ margin:0 0 var(--s2); font-size:16px; line-height:1.65; color:var(--ink-dim); }
.form-listo .anotacion{ margin:0; }
.form-listo-icono{
  display:grid; place-items:center; width:48px; height:48px; margin:0 0 var(--s2);
  border-radius:50%; border:1.5px solid var(--ok); color:var(--ok);
}
.form-listo-icono .icono{ width:24px; height:24px; }
@keyframes form-listo{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:900px){ .form-fila{ grid-template-columns:minmax(0, 1fr); gap:var(--s3); } }
@media (max-width:560px){ .form-mensaje .campos-dos{ grid-template-columns:minmax(0, 1fr); } }

@media (prefers-reduced-motion:reduce){
  .form-listo{ animation-name:form-listo-quieto; }
  @keyframes form-listo-quieto{ from{ opacity:0; } to{ opacity:1; } }
  .btn-sistema .icono, .canal-accion .icono, .mapa-abrir .icono{ transition:none; }
}