/*
 * Espacios de Salud — hoja de estilo propia.
 *
 * Tema tomado de dkv.es/particulares (valores medidos sobre los estilos
 * computados de la página real, no a ojo):
 *
 *   #095751  verde corporativo   titulares, botón primario
 *   #98a92a  lima                acentos, bloque de marca
 *   #adc070  lima claro          sobre fondo oscuro
 *   #dd3636  rojo                reservado a la llamada a la acción
 *   #6a625a  gris cálido         color de texto (el más usado de su web)
 *   #f3f4e7  crema               fondos de sección
 *   #f0efed  hueso               bandas alternas
 *
 * Tipografía Open Sans (la que carga su tema). Radios de 8px en tarjetas
 * y 6px en botones. Sombra 0 6px 18px rgba(0,0,0,.08). Ancho 1240px.
 *
 * Bootstrap 5 se carga por CDN desde el layout; aquí se redefinen sus
 * variables para que sus componentes (botones, formularios, acordeón,
 * carrusel, alertas) salgan con la identidad de DKV sin tocar el marcado.
 */

/* ==================================================================
   1. Tokens
   ================================================================== */

:root {
    --esalud-teal: #095751;
    --esalud-teal-osc: #064340;
    --esalud-lima: #98a92a;
    --esalud-lima-claro: #adc070;
    --esalud-rojo: #dd3636;
    --esalud-rojo-osc: #c02d2d;
    --esalud-texto: #6a625a;
    --esalud-texto-fuerte: #333333;
    --esalud-crema: #f3f4e7;
    --esalud-hueso: #f0efed;
    --esalud-borde: #e3e1dd;
    --esalud-sombra: 0 6px 18px rgba(0, 0, 0, .08);

    /* Bootstrap: se reescriben sus variables en lugar de pelearse con
       su especificidad a base de !important. */
    --bs-body-font-family: "Open Sans", Arial, Helvetica, sans-serif;
    --bs-body-color: var(--esalud-texto);
    --bs-body-bg: #fff;
    --bs-border-color: var(--esalud-borde);
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 10px;
    --bs-link-color: var(--esalud-teal);
    --bs-link-color-rgb: 9, 87, 81;
    --bs-link-hover-color: var(--esalud-teal-osc);
    --bs-link-hover-color-rgb: 6, 67, 64;
    --bs-primary: var(--esalud-teal);
    --bs-primary-rgb: 9, 87, 81;
    --bs-secondary-color: var(--esalud-texto);
    --bs-emphasis-color: var(--esalud-texto-fuerte);
    --bs-heading-color: var(--esalud-teal);
}

/* Contenedor a la medida de DKV */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1240px;
}

/* ==================================================================
   2. Tipografía
   ================================================================== */

body {
    font-family: var(--bs-body-font-family);
    color: var(--esalud-texto);
    background: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--esalud-teal);
    font-weight: 500;
}

h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 1.75rem; line-height: 1.2; }
h3, .h5 { font-weight: 600; }

.lead {
    font-weight: 400;
    color: var(--esalud-texto);
}

.text-body-secondary { color: var(--esalud-texto) !important; }
.text-body-tertiary { color: #a9a29a !important; }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ==================================================================
   3. Botones
   ================================================================== */

.btn {
    --bs-btn-border-radius: 6px;
    font-weight: 700;
    padding: .65rem 1.25rem;
}

.btn-sm { padding: .45rem .9rem; }

/* El verde corporativo es el botón de acción habitual. Se mantiene el
   nombre de clase de Bootstrap (.btn-success) para no tocar el marcado. */
.btn-success {
    --bs-btn-bg: var(--esalud-teal);
    --bs-btn-border-color: var(--esalud-teal);
    --bs-btn-hover-bg: var(--esalud-teal-osc);
    --bs-btn-hover-border-color: var(--esalud-teal-osc);
    --bs-btn-active-bg: var(--esalud-teal-osc);
    --bs-btn-active-border-color: var(--esalud-teal-osc);
    --bs-btn-disabled-bg: var(--esalud-teal);
    --bs-btn-disabled-border-color: var(--esalud-teal);
}

.btn-outline-success {
    --bs-btn-color: var(--esalud-teal);
    --bs-btn-border-color: var(--esalud-teal);
    --bs-btn-hover-bg: var(--esalud-teal);
    --bs-btn-hover-border-color: var(--esalud-teal);
    --bs-btn-active-bg: var(--esalud-teal-osc);
    --bs-btn-active-border-color: var(--esalud-teal-osc);
}

/* DKV reserva el rojo para la conversión. Disponible como .btn-cita
   para cuando se quiera destacar "Solicita una cita". */
.btn-cita {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--esalud-rojo);
    --bs-btn-border-color: var(--esalud-rojo);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--esalud-rojo-osc);
    --bs-btn-hover-border-color: var(--esalud-rojo-osc);
}

/* ==================================================================
   4. Formularios
   ================================================================== */

.form-control,
.form-select {
    border-color: var(--esalud-borde);
    border-radius: 6px;
    padding: .6rem .75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--esalud-lima);
    box-shadow: 0 0 0 .2rem rgba(152, 169, 42, .25);
}

.form-check-input:checked {
    background-color: var(--esalud-teal);
    border-color: var(--esalud-teal);
}

.form-check-input:focus {
    border-color: var(--esalud-lima);
    box-shadow: 0 0 0 .2rem rgba(152, 169, 42, .25);
}

.form-label { color: var(--esalud-texto-fuerte); font-weight: 600; font-size: .95rem; }
.form-text { color: var(--esalud-texto); }

/* ==================================================================
   5. Cabecera
   ================================================================== */

/*
   La cabecera de dkv.es es una banda lima #98a92a a todo el ancho, con el
   logotipo metido en un recuadro blanco pegado al borde izquierdo y los
   enlaces en #333 (no en blanco: sobre lima el blanco se queda en 2,6:1 de
   contraste y no pasa la AA; el #333 que usan ellos da 4,8:1).
*/
.esalud-cabecera {
    background: var(--esalud-lima);
    color: var(--esalud-texto-fuerte);
}

.esalud-cabecera > .container {
    min-height: 88px;
}

/* Recuadro blanco del logotipo, a sangre con el alto de la banda */
.esalud-marca {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    align-self: stretch;
    background: #fff;
    padding: 1.4rem 1.6rem;
    margin: 0 .5rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    color: var(--esalud-teal);
}

/* Teal + lima son los dos colores de su logotipo */
.esalud-marca span {
    color: var(--esalud-lima);
    letter-spacing: .04em;
}

.esalud-nav .nav-link {
    padding: .4rem .9rem;
    color: var(--esalud-texto-fuerte);
    font-size: .95rem;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.esalud-nav .nav-link:hover {
    color: var(--esalud-texto-fuerte);
    border-bottom-color: rgba(255, 255, 255, .55);
}

.esalud-nav .nav-link.activo {
    color: var(--esalud-texto-fuerte);
    font-weight: 700;
    border-bottom-color: var(--esalud-teal);
}

/* ==================================================================
   6. Bloques de contenido
   ================================================================== */

.esalud-titulo-provincia {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--esalud-teal);
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--esalud-borde);
}

.esalud-tarjeta {
    background: #fff;
    border: 1px solid var(--esalud-borde);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: var(--esalud-sombra);
}

.esalud-tarjeta h3 a,
.esalud-tarjeta .h5 a { text-decoration: none; }
.esalud-tarjeta h3 a:hover { text-decoration: underline; }

.esalud-cuerpo img { max-width: 100%; height: auto; }
.esalud-cuerpo a { color: var(--esalud-teal); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--esalud-texto); }
.breadcrumb-item a { color: var(--esalud-texto); }
.breadcrumb-item.active { color: var(--esalud-texto-fuerte); }

/* ==================================================================
   7. Mapa
   ================================================================== */

.esalud-mapa,
.esalud-mapa-vacio {
    width: 100%;
    height: 420px;
    border-radius: 8px;
    overflow: hidden;
}

.esalud-mapa-vacio {
    background: var(--esalud-crema);
    border: 1px dashed var(--esalud-lima-claro);
    color: var(--esalud-texto);
}

.esalud-mapa-vacio code {
    background: #fff;
    color: var(--esalud-teal);
    padding: .1em .35em;
    border-radius: 3px;
}

.mapa-info a { text-decoration: none; color: var(--esalud-teal); }

/* ==================================================================
   8. Portada: carrusel y buscador
   ================================================================== */

.esalud-slider .carousel-inner { border-radius: 8px; }
.esalud-slider .carousel-inner img { width: 100%; height: auto; }

.esalud-slider-botones {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .6rem;
}

.esalud-slider-botones button {
    flex: 1 1 auto;
    border: 1px solid var(--esalud-borde);
    background: var(--esalud-hueso);
    color: var(--esalud-texto-fuerte);
    font-size: .85rem;
    line-height: 1.2;
    padding: .55rem .8rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.esalud-slider-botones button.activo,
.esalud-slider-botones button:hover {
    background: var(--esalud-teal);
    border-color: var(--esalud-teal);
    color: #fff;
}

/*
   Buscador en lima #98a92a, el mismo verde de la cabecera.

   Sobre lima el texto va en #333 y no en blanco: el blanco se queda en
   2,6:1 de contraste y no pasa la AA. Es el mismo criterio que sigue DKV
   en su banda de cabecera y en su boton "Soy cliente" (lima con texto
   #333). Los desplegables van en blanco puro para que el formulario se
   lea, y el boton en teal, que es el contraste que ellos usan sobre lima.
*/
.esalud-buscador {
    background: var(--esalud-lima);
    color: var(--esalud-texto-fuerte);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--esalud-sombra);
}

.esalud-buscador h2,
.esalud-buscador .h5 { color: var(--esalud-texto-fuerte); }

.esalud-buscador a { color: var(--esalud-texto-fuerte); text-decoration: underline; }

.esalud-buscador a:hover { color: var(--esalud-teal-osc); }

.esalud-buscador .form-select {
    background-color: #fff;
    border-color: rgba(0, 0, 0, .15);
    color: var(--esalud-texto-fuerte);
}

.esalud-buscador .form-select:focus {
    border-color: var(--esalud-teal);
    box-shadow: 0 0 0 .2rem rgba(9, 87, 81, .3);
}

.esalud-buscador .form-select:disabled {
    background-color: rgba(255, 255, 255, .55);
    color: rgba(51, 51, 51, .55);
}

.esalud-buscador .btn-success {
    --bs-btn-bg: var(--esalud-teal);
    --bs-btn-border-color: var(--esalud-teal);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--esalud-teal-osc);
    --bs-btn-hover-border-color: var(--esalud-teal-osc);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--esalud-teal-osc);
    --bs-btn-active-border-color: var(--esalud-teal-osc);
}

.esalud-buscador hr { border-color: rgba(0, 0, 0, .18); opacity: 1; }

/* ==================================================================
   9. Promociones
   ==================================================================
   Patron de las tarjetas de producto de dkv.es: foto a sangre arriba,
   titulo en negrita, texto y "Más información" con galon al pie. Sin
   marco en reposo; al pasar por encima se tinta de crema y aparece el
   borde, que es como DKV marca la tarjeta activa.
   ================================================================== */

.esalud-promos { background: #fff; }

.esalud-promo {
    display: flex;
    flex-direction: column;
    background: transparent;
    /* Borde transparente en reposo: al aparecer en hover no mueve nada */
    border: 1px solid transparent;
    border-radius: 0;
    padding: 10px;
    transition: background-color .15s ease, border-color .15s ease;
}

.esalud-promo:hover,
.esalud-promo:focus-within {
    background: var(--esalud-crema);
    border-color: var(--esalud-lima-claro);
}

.esalud-promo img,
.esalud-promo-sinfoto {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 1.1rem;
}

.esalud-promo-sinfoto {
    background: linear-gradient(135deg, var(--esalud-lima-claro), var(--esalud-teal));
}

.esalud-promo-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.esalud-promo h3 {
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--esalud-texto-fuerte);
    margin-bottom: .6rem;
}

.esalud-promo p {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--esalud-texto);
    /* Empuja el enlace al pie para que queden alineados entre tarjetas */
    flex: 1;
    margin-bottom: 1.1rem;
}

.esalud-promo-mas {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-start;
    color: var(--esalud-teal);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.esalud-promo-mas:hover { color: var(--esalud-teal-osc); }
.esalud-promo-mas svg { transition: transform .15s ease; }
.esalud-promo:hover .esalud-promo-mas svg { transform: translateX(3px); }

/* ==================================================================
   10. Acordeón y carrusel de Bootstrap
   ================================================================== */

.accordion {
    --bs-accordion-border-color: var(--esalud-borde);
    --bs-accordion-border-radius: 8px;
    --bs-accordion-btn-color: var(--esalud-teal);
    --bs-accordion-active-color: var(--esalud-teal);
    --bs-accordion-active-bg: var(--esalud-crema);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(152, 169, 42, .25);
}

.accordion-button { font-weight: 600; }

.carousel-indicators [data-bs-target] {
    background-color: var(--esalud-teal);
    height: 4px;
    border-radius: 2px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(9, 87, 81, .75);
    border-radius: 50%;
    padding: 1rem;
    background-size: 45%;
}

/* ==================================================================
   11. Avisos
   ================================================================== */

.alert { border-radius: 8px; border-width: 1px; }

.alert-success {
    --bs-alert-color: var(--esalud-teal);
    --bs-alert-bg: var(--esalud-crema);
    --bs-alert-border-color: var(--esalud-lima-claro);
}

.alert-warning {
    --bs-alert-color: #7a5c00;
    --bs-alert-bg: #fdf6e3;
    --bs-alert-border-color: #efd9a0;
}

.alert-danger {
    --bs-alert-color: var(--esalud-rojo-osc);
    --bs-alert-bg: #fdeded;
    --bs-alert-border-color: #f3c2c2;
}

.invalid-feedback { color: var(--esalud-rojo-osc); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--esalud-rojo); }

/* ==================================================================
   12. Pie
   ================================================================== */

/* Como el pie de dkv.es: fondo claro, texto marrón grisáceo, enlaces
   legales separados por "|" en el centro y redes a la derecha. */
.esalud-pie {
    background: var(--esalud-hueso);
    color: var(--esalud-texto);
    padding: 1.25rem 0;
}

.esalud-pie a { color: var(--esalud-texto); text-decoration: none; }
.esalud-pie a:hover,
.esalud-pie a:focus-visible { color: var(--esalud-texto-fuerte); text-decoration: underline; }

.esalud-pie-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

/* En pantallas anchas, rejilla de tres columnas: la primera vacía
   equilibra el bloque de redes y los enlaces legales quedan centrados. */
@media (min-width: 1200px) {
    .esalud-pie-fila {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
    .esalud-pie-legal { grid-column: 2; }
    .esalud-pie-redes { grid-column: 3; justify-self: end; }
}

.esalud-pie-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .25rem;
    font-size: 1rem;
}

.esalud-pie-legal a + a::before {
    content: "|";
    display: inline-block;
    margin: 0 .5rem 0 1rem;
    color: var(--esalud-texto);
}

.esalud-pie-redes {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    white-space: nowrap;
}

.esalud-pie-redes svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    display: block;
}

@media (max-width: 1199.98px) {
    .esalud-pie-fila { justify-content: center; text-align: center; }
}

/* En móvil los enlaces se reparten en varias líneas y la barra quedaría
   colgando al principio de alguna; ahí se separan sólo con espacio. */
@media (max-width: 575.98px) {
    .esalud-pie-legal { column-gap: 1.25rem; }
    .esalud-pie-legal a + a::before { content: none; }
}

/* ==================================================================
   12b. Galería de fotos del centro
   ==================================================================
   Las fotos heredadas no tienen un tamaño común: van de 185 px de ancho a
   960x1280, y hay PNG de 2,4 MB. Antes iban con `w-100`, así que una
   pequeña se estiraba hasta quedar borrosa y una vertical se convertía en
   una imagen de más de 1600 px de alto que empujaba media página.

   El marco fija la proporción y cada foto se encaja DENTRO: se reduce la
   dimensión que sobre, la otra se ajusta sola y no se deforma nada. Lo que
   no llega al marco no se amplía — mejor pequeña y nítida que grande y
   pastosa. El fondo hueso hace que las bandas laterales parezcan
   intencionadas y no un hueco.
   ================================================================== */

/*
   Altura fija y ancho completo, NO `aspect-ratio` con `max-height`. Con las
   dos cosas juntas, en cuanto la altura topa en el maximo el navegador
   encoge el ANCHO para mantener la proporcion: el marco se quedaba en unos
   818 px (460 x 16/9) dentro de un contenedor de 1240, y los botones de
   avance quedaban fuera del recuadro gris porque esos se posicionan contra
   el carrusel, no contra el marco.
*/
.esalud-galeria-marco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(240px, 32vw, 460px);
    background: var(--esalud-hueso);
    overflow: hidden;
}

/*
   Solo se reduce, nunca se amplia.

   Con `max-width` y `max-height` al 100% y las dimensiones en `auto`, la
   foto que se pasa de ancho O de alto se encoge hasta caber, manteniendo su
   proporcion; la que cabe entera por los dos lados se queda a su tamaño
   real. Eso evita que las fotos pequeñas -- la mediana de las heredadas son
   285 px de ancho -- se estiren y salgan pixeladas.

   No lleva `object-fit`: no pinta nada aqui, porque la imagen no se estira a
   una caja, son sus propias dimensiones las que mandan. Del centrado se
   encarga el flex del marco.
*/
.esalud-galeria-marco img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}


/* ==================================================================
   13. Bloques a la espera de consentimiento
   ==================================================================
   Lo que se ve donde iría el vídeo o el mapa mientras el visitante no ha
   dado permiso. No es un hueco vacío ni un mensaje de error: explica qué
   falta, ofrece dar el permiso y deja siempre una vía alternativa para
   llegar al contenido, que es lo que pide la AEPD.
   ================================================================== */

.esalud-video {
    border-radius: 8px;
    overflow: hidden;
}

/* Proporción 16:9 sin depender de que haya cartel */
.esalud-video-aviso {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: 1.5rem;
    text-align: center;
    background-color: var(--esalud-teal);
    background-size: cover;
    background-position: center;
}

/* Velo oscuro: el cartel es una foto con mucho texto propio y el mensaje
   tiene que leerse encima sin pelearse con ella */
.esalud-video-aviso::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 67, 64, .84);
}

.esalud-video-caja {
    position: relative;
    max-width: 34rem;
    color: #fff;
}

.esalud-video-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #fff;
}

.esalud-video-texto {
    font-size: .95rem;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, .92);
}

.esalud-video-aviso .btn-success {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--esalud-teal);
    --bs-btn-hover-bg: var(--esalud-crema);
    --bs-btn-hover-border-color: var(--esalud-crema);
    --bs-btn-hover-color: var(--esalud-teal-osc);
}

/* El mapa reutiliza .esalud-mapa-vacio, que ya tiene el alto y el borde */
.esalud-mapa-puerta { width: 100%; }

/* Sellos de calidad (UNE 179001 e ISO 9001) bajo el mapa de la ficha.
   Los PNG originales son 201x100 en blanco y negro; se sirven a la mitad para
   que no compitan con el contenido, y en movil bajan a uno por linea solos,
   por el flex-wrap. */
.esalud-sellos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

.esalud-sellos img {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 75px;
}

/* Visita virtual.

   Mismas medidas que .esalud-galeria-marco a proposito: las dos secciones van
   una encima de otra en la ficha y con anchos distintos se ve descuadrado. Si
   algun dia cambia el alto de la galeria, cambiar tambien este.

   El iframe heredado traia width="100%" height="350" en los atributos; aqui no
   se usan, porque el marco lo construye la plantilla y las medidas las pone el
   CSS. El aviso de "sin cookies" tiene la misma altura para que aceptar no de
   un salto de maquetacion. */
.esalud-visita-puerta { width: 100%; }

.esalud-visita,
.esalud-visita-vacia {
    width: 100%;
    height: clamp(240px, 32vw, 460px);
    overflow: hidden;
}

.esalud-visita {
    background: var(--esalud-hueso);
}

.esalud-visita iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.esalud-visita-vacia {
    background: var(--esalud-crema);
    border: 1px dashed var(--esalud-lima-claro);
    color: var(--esalud-texto);
}


/* ==================================================================
   14. Adaptación a móvil
   ================================================================== */

@media (max-width: 767.98px) {
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.4rem; }
}

@media (max-width: 575.98px) {
    .esalud-mapa,
    .esalud-mapa-vacio { height: 280px; }
    .esalud-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .esalud-nav .nav-link { white-space: nowrap; padding-inline: .6rem; }
    .esalud-video-titulo { font-size: 1.1rem; }
    .esalud-video-texto { font-size: .875rem; margin-bottom: 1rem; }
    /* La galeria no lleva regla propia aqui: el clamp de su altura ya baja
       sola hasta 240 px. Poner `aspect-ratio` de nuevo reintroduciria el
       encogimiento de ancho que se arreglo arriba. */
}