/* =====================================================================
   custom.css - Hoja de estilos personalizada de Piatella
   ---------------------------------------------------------------------
   Esta hoja se carga DESPUÉS de tailwind.css, por lo que sus reglas
   prevalecen sobre las utilidades de Tailwind. Aquí se centralizan
   todos los estilos a medida que vayan surgiendo en el proyecto.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tipografías
   --------------------------------------------------------------------- */
/* Las fuentes se cargan vía Google Fonts en <head> (header2.php).
   - Montserrat  -> logo / marca
   - Poppins     -> textos del footer y elementos a medida */

/* Poppins como fuente base de todo el sitio.
   Se hereda en párrafos, listas, enlaces, etiquetas, tablas, etc.,
   manteniendo los tamaños y estilos definidos por Tailwind.
   Los encabezados (h1-h6) y el logo se excluyen más abajo. */
body,
p, span, a, li, td, th, label, input, textarea, select, button,
blockquote, small, strong, em, b, i, u, caption, code, pre, div {
    font-family: var(--ms-font-text);
}

/* =====================================================================
   Texto base de la web (todo lo que NO es H1-H6): verde bosque
   oscuro #1b2b21 al 80 % de opacidad  ->  rgba(27, 43, 33, 0.8).
   custom.css se carga sin @layer, por lo que estas reglas ganan a
   las utilidades text-gray-* de Tailwind sin necesidad de !important.
   ===================================================================== */
body,
.text-gray-400, .text-gray-500, .text-gray-600,
.text-gray-700, .text-gray-800, .text-gray-900 {
    color: rgba(27, 43, 33, 0.8);
}

/* Encabezados: ahora también usan Poppins, igual que el resto del sitio. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ms-font-text);
}

/* El logo conserva Montserrat con prioridad máxima. */
.ms-logo,
.ms-logo * {
    font-family: var(--ms-font-logo) !important;
}

:root {
    /* Paleta corporativa */
    --ms-color-text:    rgba(27, 43, 33, 0.8);   /* texto base: verde bosque #1b2b21 al 80% */
    --ms-color-dark:    #1b2b21;   /* "Pia" del logo (verde corporativo) */
    --ms-color-light:   #1b2b21;   /* "tella" del logo (verde corporativo) */
    --ms-color-accent:  #1e2939;   /* hover / detalles */
    --ms-border:        #e5e7eb;   /* separadores */

    /* Colores utilitarios propios (antes en el @layer theme de tailwind.css) */
    --color-header:    #1b2b21;   /* circulares de iconos, cabeceras */
    --color-patologia: #1b2b21;   /* bloque de especialidades y pills */

    /* Tipografías */
    --ms-font-logo: 'Montserrat', sans-serif;
    --ms-font-text: 'Poppins', sans-serif;
}

/* ---------------------------------------------------------------------
   2. Logo tipográfico
   --------------------------------------------------------------------- */
.ms-logo {
    font-family: var(--ms-font-logo);
    line-height: 1;
    letter-spacing: -0.02em;
    user-select: none;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
}

/* Logo unificado: ambas partes en verde oscuro (#1b2b21) y peso
   grueso (800), como la parte "Pia". */
.ms-logo__part--bold {
    font-weight: 800;
    color: var(--ms-color-dark);
    margin-right: 0;
}

.ms-logo__part--light {
    font-weight: 800;
    color: var(--ms-color-light);
    margin-left: 0;
}

.ms-logo__part--accent {
    font-weight: 800;
    color: #1b2b21;
    margin-left: 0;
}

/* Tamaños responsive del logo */
.ms-logo--lg { font-size: 1.25rem; }    /* 20px - footer */
.ms-logo--md { font-size: 1.125rem; }   /* 18px */
.ms-logo--sm { font-size: 1rem; }       /* 16px */

/* ---------------------------------------------------------------------
   2.1. Header fijo del sitio
   ---------------------------------------------------------------------
   Sobrescribe la utilidad bg-white del header (header2.php) para usar
   el fondo crema #f9f7f2. La especificidad header.bg-white (0-1-1) gana
   a .bg-white de Tailwind (0-1-0) sin tocar el HTML.
   */
header.bg-white {
    background-color: #f9f7f2;
}

@media (max-width: 640px) {
    .ms-logo--lg { font-size: 1.125rem; }
}

/* ---------------------------------------------------------------------
   3. Footer
   --------------------------------------------------------------------- */
.ms-footer {
    background-color: #f9f7f2;
    border-top: 1px solid var(--ms-border);
    font-family: var(--ms-font-text);
    color: var(--ms-color-text);
    padding: 2rem 1.5rem;
}

/* Contenedor principal: una fila en desktop, columnas en móvil */
.ms-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Bloques individuales del footer */
.ms-footer__brand,
.ms-footer__legal,
.ms-footer__social {
    display: flex;
    align-items: center;
}

.ms-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.ms-footer__social {
    gap: 0.75rem;
}

/* Enlaces del footer */
.ms-footer__link {
    font-family: var(--ms-font-text);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ms-color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ms-footer__link:hover {
    color: var(--ms-color-accent);
    text-decoration: underline;
}

/* Iconos sociales */
.ms-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid var(--ms-border);
    color: var(--ms-color-text);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ms-footer__icon:hover {
    color: #ffffff;
    background-color: var(--ms-color-accent);
    border-color: var(--ms-color-accent);
}

.ms-footer__icon svg {
    width: 1rem;
    height: 1rem;
}

/* Copyright / texto legal secundario */
.ms-footer__copy {
    width: 100%;
    text-align: center;
    font-family: var(--ms-font-text);
    font-size: 0.8rem;
    color: var(--ms-color-text);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ms-border);
}

/* ---------------------------------------------------------------------
   4. Responsive del footer
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ms-footer__inner {
        flex-direction: column;
        text-align: center;
    }

    .ms-footer__legal {
        gap: 1rem;
    }
}

/* ---------------------------------------------------------------------
   5. Hero de la HOME
   ---------------------------------------------------------------------
   Basado en el diseño del diseñador: alineación izquierda, contraste
   de pesos (palabras clave gruesas + conectores finos) y fragmento
   destacado en color #1b2b21 (verde corporativo).
   */
.ms-hero {
    text-align: left;
    font-family: var(--ms-font-text);
}

.ms-hero__title {
    font-family: var(--ms-font-text);
    color: #1b2b21;     /* negro */
    font-weight: 800;                /* mismo grosor en todo el H1 */
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Fragmento destacado del H1: color verde (mismo grosor que el resto) */
.ms-hero__highlight {
    color: #1b2b21;
    font-weight: 800;
}

.ms-hero__lead {
    color: var(--ms-color-text);     /* #62748e */
    font-weight: 300;
}

/* Tamaños responsive del hero */
.ms-hero__title {
    font-size: 1.875rem;        /* 30px móvil */
}

.ms-hero__lead {
    font-size: 1rem;            /* 16px móvil */
}

@media (min-width: 768px) {
    .ms-hero__title { font-size: 2.5rem; }    /* 40px tablet */
    .ms-hero__lead   { font-size: 1.125rem; } /* 18px tablet */
}

@media (min-width: 1024px) {
    .ms-hero__title { font-size: 3.25rem; }   /* 52px desktop */
    .ms-hero__lead   { font-size: 1.25rem; }  /* 20px desktop */
}

/* ---------------------------------------------------------------------
   6. Colores de fondo (sobrescritura de Tailwind)
   ---------------------------------------------------------------------
   Tailwind define --color-gray-50 en oklch (equivalente a #f9fafb).
   Aquí lo sobrescribimos para que bg-gray-50 use nuestro color #f9f7f2.
   Como custom.css se carga después de tailwind.css, esta regla prevalece
   y afecta al body, hover de tarjetas, bloques destacados, etc.
   */
:root,
:host {
    --color-gray-50: #f9f7f2;
}

/* ---------------------------------------------------------------------
   7. Ficha de negocio (negocio.php)
   --------------------------------------------------------------------- */
.ms-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    font-family: var(--ms-font-text);
}

/* Variante cabecera de la ficha (negocio.php): banda verde oscura con
   textos blancos y botones verdes con icono y filo blancos para
   diferenciarse del fondo. */
.ms-card.ms-card--header {
    background-color: #1b2b21;
}

.ms-card--header .ms-card__category,
.ms-card--header .ms-card__title,
.ms-card--header .ms-card__subtitle,
.ms-card--header .ms-card__rating {
    color: #ffffff;
}

/* Botones sobre la banda verde: mismo verde oscuro, icono y filo blancos */
.ms-card--header .ms-btn--primary,
.ms-card--header .ms-btn--outline {
    background-color: #1b2b21;
    color: #ffffff;
    border-color: #ffffff;
}

/* Hover en la banda: se invierte a fondo blanco con letra y filo verdes,
   el mismo lenguaje que el resto de botones corporativos verdes */
.ms-card--header .ms-btn:hover {
    background-color: #ffffff !important;
    color: #1b2b21 !important;
    border-color: #1b2b21 !important;
}

/* Banner superior con la imagen */
.ms-card__banner {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

/* Cabecera: bloque de texto (izq) + botones (der) en dos columnas */
.ms-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
}

.ms-card__heading {
    flex: 1 1 320px;
    min-width: 0;
}

.ms-card__category {
    font-family: var(--ms-font-text);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1b2b21;
    margin: 0 0 0.5rem 0;
}

.ms-card__title {
    font-family: var(--ms-font-text);
    font-weight: 700;
    color: #1b2b21;
    font-size: 1.875rem;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
}

.ms-card__subtitle {
    font-family: var(--ms-font-text);
    font-weight: 400;
    color: var(--ms-color-text);
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
}

.ms-card__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ms-color-text);
    font-size: 0.95rem;
}

.ms-card__rating .stars {
    color: #f5b301;
}

.ms-card__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
}

/* Botones de acción (ofuscados) */
.ms-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ms-font-text);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.7rem 1.4rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ms-btn--primary {
    background-color: #1b2b21;
    color: #ffffff;
}

.ms-btn--primary:hover {
    background-color: #ffffff;
    color: #1b2b21;
    border-color: #1b2b21;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(27, 43, 33, 0.15);
}

/* Botón secundario en estilo outline (fondo blanco con borde) */
.ms-btn--outline {
    background-color: #ffffff;
    color: #1e2939;
    border-color: #cbd5e1;
}

.ms-btn--outline:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.ms-btn--secondary {
    background-color: #1e2939;
    color: #ffffff;
}

.ms-btn--secondary:hover {
    background-color: #111827;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Bloques de contenido (descripción, servicios, mapa, horarios) */
.ms-card__body {
    padding: 2rem;
}

/* Grid de dos columnas: 66% principal / 33% lateral */
.ms-card__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.ms-card__main {
    min-width: 0;
}

.ms-card__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ms-card__section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ms-border);
}

.ms-card__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ms-card__section-title {
    font-family: var(--ms-font-text);
    font-weight: 700;
    color: #000000;
    font-size: 1rem;            /* ~16px, más pequeño */
    text-transform: uppercase;  /* mayúsculas como en el diseño */
    letter-spacing: 0.03em;
    margin: 0 0 1rem 0;
}

.ms-card__text {
    color: rgba(27, 43, 33, 0.8);
    line-height: 1.7;
    font-size: 1rem;
}

/* Parrafos dentro de "Sobre la tienda" (la descripcion se formatea
   con formatearDescripcionTienda(): bloques <p> + listas) */
.ms-card__text p {
    margin: 0 0 0.75rem 0;
}

.ms-card__text p:last-child {
    margin-bottom: 0;
}

/* Listas escritas con guiones en la descripcion de la ficha:
   se convierten en <ul class="ms-check-list"> y se muestran con una
   linea vertical continua verde oscura a la izquierda, sin viñetas */
.ms-check-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0 0 0 1.2rem;
    border-left: 4px solid #1b2b21;
}

.ms-check-list:last-child {
    margin-bottom: 0;
}

.ms-check-list li {
    margin: 0 0 0.85rem 0;
    line-height: 1.55;
}

.ms-check-list li:last-child {
    margin-bottom: 0;
}

/* Servicios como pills/tags con color de fondo */
.ms-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ms-tags__pill {
    display: inline-block;
    font-family: var(--ms-font-text);
    font-size: 0.85rem;
    font-weight: 500;
    color: #1b2b21;
    background-color: #e6eee6;
    border: 1px solid var(--ms-border);
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    line-height: 1.4;
}

/* Módulos independientes del lateral (dirección, contacto, horario, fiscal) */
.ms-box {
    background-color: #f8f9fb;
    border: 1px solid var(--ms-border);
    border-radius: 0.5rem;
    padding: 1.1rem 1.25rem;
}

.ms-box__title {
    font-family: var(--ms-font-text);
    font-weight: 700;
    color: #1b2b21;
    font-size: 0.95rem;
    margin: 0 0 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ms-box__title i {
    color: #1b2b21;
}

.ms-box__text {
    color: rgba(27, 43, 33, 0.8);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 0.35rem 0;
}

.ms-box__text:last-child {
    margin-bottom: 0;
}

/* Mapa */
.ms-map {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--ms-border);
}

.ms-map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    display: block;
}

/* Galería de fotos debajo de horarios */
.ms-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.ms-gallery__img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 0.5rem;
    display: block;
    transition: transform 0.2s ease;
}

.ms-gallery__img:hover {
    transform: scale(1.03);
}

/* ---------------------------------------------------------------------
   8. Bloque "Cómo elaboramos la selección" (listados de negocios)
   ---------------------------------------------------------------------
   Caja envolvente con fondo verde muy claro (#e6eee6) y esquinas
   redondeadas. Se inserta entre la intro y el listado de negocios.
   */
.ms-selection {
    background-color: #e6eee6;
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    margin: 0 0 2rem 0;
}

/* Variante "About": bloque .ms-selection centrado y con ancho acotado,
   pensado para usarse en la página "Quiénes somos". */
.ms-selection--about {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.ms-selection__title {
    font-family: var(--ms-font-text);
    font-weight: 700;
    color: #1b2b21;
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 0.75rem 0;
}

.ms-selection__text {
    font-family: var(--ms-font-text);
    color: rgba(27, 43, 33, 0.8);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Variante apilada: una sola columna (una foto debajo de otra).
   Pensada para la galería en la columna lateral estrecha. */
.ms-gallery--stack {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.ms-gallery--stack .ms-gallery__img {
    height: auto;
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* ---------------------------------------------------------------------
   7.1. Módulos del lateral (negocio.php): Datos de contacto y Horario
   ---------------------------------------------------------------------
   Réplica del diseño de la captura de referencia:
   - Cada módulo es una CARD INDEPENDIENTE (fondo blanco, sombra suave,
     borde-radius) y se separa del siguiente con un gap vertical.
   - Cabecera con icono verde (#1b2b21) + título en negro, negrita.
   - Horario en dos columnas (día | horas) con línea separadora entre filas.
   */

.ms-info-card {
    background-color: #ffffff;
    border: 1px solid var(--ms-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
    font-family: var(--ms-font-text);
    overflow: hidden; /* recorta la banda del título en las esquinas redondeadas */
}

/* Cabecera del módulo: banda verde claro a todo el ancho de la tarjeta,
   con línea gris de separación bajo ella e icono verde oscuro. */
.ms-info-card__title {
    font-weight: 700;
    color: #1b2b21;
    font-size: 0.95rem;
    margin: -1.25rem -1.25rem 1rem -1.25rem; /* compensa el padding de la tarjeta */
    padding: 0.75rem 1.25rem;
    background-color: #e6eee6;
    border-bottom: 1px solid var(--ms-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ms-info-card__title i {
    color: #1b2b21;
    font-size: 1rem;
}

/* Filas de datos de contacto (dirección / teléfono / web) */
.ms-info-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ms-border);
}

.ms-info-card__row:last-child {
    border-bottom: none;
}

.ms-info-card__row i {
    color: #1b2b21;
    font-size: 0.9rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.ms-info-card__row-label {
    color: rgba(27, 43, 33, 0.8);
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.1rem;
}

.ms-info-card__row-value {
    color: rgba(27, 43, 33, 0.8);
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
}

.ms-info-card__row-value a {
    color: rgba(27, 43, 33, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ms-info-card__row-value a:hover {
    color: #1b2b21;
    text-decoration: underline;
}

/* Lista de horarios en dos columnas (día | tramo horario) con separador */
.ms-schedule {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-schedule__row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ms-border);
}

.ms-schedule__row:last-child {
    border-bottom: none;
}

.ms-schedule__day {
    color: rgba(27, 43, 33, 0.8);
    font-weight: 600;
    font-size: 0.88rem;
}

.ms-schedule__time {
    color: rgba(27, 43, 33, 0.8);
    font-size: 0.88rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Estado "cerrado" para un día sin atención */
.ms-schedule__time--closed {
    color: #94a3b8;
    font-style: italic;
}

/* Fallback: si el horario no se pudo parsear, se muestra como texto libre */
.ms-schedule__fallback {
    color: rgba(27, 43, 33, 0.8);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

/* Responsive de la ficha */
@media (max-width: 768px) {
    .ms-card__header {
        padding: 1.25rem;
    }

    .ms-card__title {
        font-size: 1.5rem;
    }

    .ms-card__buttons {
        width: 100%;
    }

    .ms-btn {
        flex: 1;
        justify-content: center;
    }

    .ms-card__body,
    .ms-card__grid {
        padding: 1.25rem;
        gap: 1.5rem;
    }

    /* En móvil, las dos columnas se apilan */
    .ms-card__grid {
        grid-template-columns: 1fr;
    }

    .ms-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-gallery__img {
        height: 140px;
    }

    /* La galería apilada (módulo lateral de Fotos) sigue en una sola
       columna en móvil, ignorando la regla general de 2 columnas. */
    .ms-gallery--stack {
        grid-template-columns: 1fr;
    }

    .ms-gallery--stack .ms-gallery__img {
        height: auto;
    }

    .ms-card__banner {
        height: 200px;
    }

    /* En móvil, la columna de horas del horario se mantiene a la derecha
       pero con menos separación para no apretar demasiado. */
    .ms-schedule {
        column-gap: 0.75rem;
        row-gap: 0.35rem;
    }
}

/* ---------------------------------------------------------------------
   9. Firma del autor (listados de negocios)
   ---------------------------------------------------------------------
   Bloque que aparece al final del listado, antes de "¿Por qué elegir...".
   Card blanca con sombra, foto circular + nombre/rol/bio/enlaces.
   */
.ms-author {
    background-color: #ffffff;
    border: 1px solid var(--ms-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
    margin: 0 0 3rem 0;
    font-family: var(--ms-font-text);
}

.ms-author__inner {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.ms-author__photo {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 9999px;
    object-fit: cover;
    border: 3px solid #F5EBE4;
}

.ms-author__body {
    min-width: 0;
    flex: 1;
}

.ms-author__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1b2b21;
    margin: 0 0 0.25rem 0;
}

.ms-author__name {
    font-size: 1.15rem;
    font-weight: 800;
    color: rgba(27, 43, 33, 0.8);
    line-height: 1.2;
    margin: 0 0 0.15rem 0;
}

.ms-author__role {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(27, 43, 33, 0.8);
    margin: 0 0 0.6rem 0;
}

.ms-author__bio {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(27, 43, 33, 0.8);
    margin: 0 0 0.75rem 0;
}

.ms-author__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.82rem;
}

.ms-author__links a {
    color: rgba(27, 43, 33, 0.8);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease;
}

.ms-author__links a:hover {
    color: #1b2b21;
    text-decoration: underline;
}

.ms-author__links i {
    color: #1b2b21;
    font-size: 0.9rem;
}

/* Responsive: en móvil la foto se queda arriba pero más pequeña */
@media (max-width: 640px) {
    .ms-author {
        padding: 1.25rem;
    }

    .ms-author__photo {
        width: 64px;
        height: 64px;
    }
}

/* ---------------------------------------------------------------------
   10. Hover unificado de botones
   ---------------------------------------------------------------------
   Todos los botones del proyecto cambian a fondo #F5EBE4 (marrón claro)
   al pasar el ratón por encima, independientemente de su color base.
   Esta regla se carga en custom.css (después de tailwind.css), por lo
   que prevalece sobre los hovers definidos en otras hojas.
   */
.mi-elemento:hover,
.mi-elemento-content:hover,
.ms-btn:hover,
.ms-btn--primary:hover,
.ms-btn--outline:hover,
.ms-btn--secondary:hover,
.btn-primary:hover,
.btn-outline:hover,
.cta-section .btn-outline:hover,
.search-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a[class*="btn"]:hover {
    background-color: #F5EBE4 !important;
    color: #1e2939 !important;
}

/* Mantener el efecto de elevación que tenían algunos botones (.mi-elemento),
   pero sin el fondo oscuro original. */
.mi-elemento:hover,
.mi-elemento-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------------------
   10.1. Hover de los botones verdes (base #1b2b21)
   ---------------------------------------------------------------------
   Los botones corporativos verdes NO siguen el hover unificado beige:
   al pasar el ratón pasan a fondo blanco, letra verde oscuro (#1b2b21)
   y un hilo fino verde oscuro como marco (border de 1px).
   Se declara después del bloque 10 y con selectores de mayor especificidad
   (button.mi-elemento:hover = 0-1-2) para ganar al "background-color ...
   !important" genérico de button:hover (0-1-1).
   */
/* Borde transparente en reposo para que el hilo verde del hover no
   desplace el botón (los .ms-btn ya lo llevan en su clase base). */
.mi-elemento,
.mi-elemento-content {
    border: 1px solid transparent;
}

.mi-elemento:hover,
.mi-elemento-content:hover,
.ms-btn--primary:hover,
button.mi-elemento:hover,
button.mi-elemento-content:hover,
button.ms-btn--primary:hover {
    background-color: #ffffff !important;
    color: #1b2b21 !important;
    border: 1px solid #1b2b21 !important;
}

/* ---------------------------------------------------------------------
   10.2. CTA invertido de la home ("Dar de alta tu tienda")
   ---------------------------------------------------------------------
   Esquema invertido respecto a los botones corporativos verdes:
   en reposo, fondo blanco con letra y hilo fino verde oscuro (#1b2b21);
   con el ratón encima, fondo verde oscuro y letra blanca.
   El nombre no contiene "btn" a propósito para que el hover beige
   unificado del bloque 10 (a[class*="btn"]:hover) no lo capture.
   */
.ms-cta-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #1b2b21;
    border: 1px solid #1b2b21;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, transform 0.3s ease,
                box-shadow 0.3s ease;
}

.ms-cta-alt:hover {
    background-color: #1b2b21;
    color: #ffffff;
    border-color: #1b2b21;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------------------
   11. Página "Quiénes somos" (nosotros.php)
   --------------------------------------------------------------------- */

/* Tarjeta de valor/beneficio (icono + título + texto) */
.ms-value {
    background-color: #ffffff;
    border: 1px solid var(--ms-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.ms-value:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.ms-value__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    background-color: #1b2b21;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-value__icon i {
    font-size: 1.25rem;
}

.ms-value__title {
    font-weight: 700;
    color: #1b2b21;
    font-size: 1.05rem;
    margin: 0 0 0.5rem 0;
}

.ms-value__text {
    color: rgba(27, 43, 33, 0.8);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Encabezado de sección reutilizable (H2 + subtítulo centrados) */
.ms-section-head {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 2.5rem;
}

.ms-section-head__title {
    font-weight: 800;
    color: #1b2b21;
    font-size: 1.875rem;
    line-height: 1.2;
    margin: 0 0 0.75rem 0;
}

.ms-section-head__text {
    color: var(--ms-color-text);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Bloque "Explora el directorio" (enlaces a ciudades/categoría) */
.ms-explore {
    background-color: #f8f9fb;
    border: 1px solid var(--ms-border);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
}

.ms-explore__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.ms-explore__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #ffffff;
    border: 1px solid var(--ms-border);
    border-radius: 0.5rem;
    padding: 0.7rem 1.2rem;
    color: #1e2939;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ms-explore__link:hover {
    background-color: #F5EBE4;
    border-color: #1b2b21;
    color: #1b2b21;
}

.ms-explore__link i {
    color: #1b2b21;
}

/* Responsive de la página Quiénes somos */
@media (max-width: 640px) {
    .ms-section-head__title {
        font-size: 1.5rem;
    }

    .ms-explore {
        padding: 1.5rem;
    }
}

/* ---------------------------------------------------------------------
   12. Ranking de criterios de selección (barras animadas)
   ---------------------------------------------------------------------
   Card contenedora + filas con % / etiqueta / barra de progreso.
   La animación de relleno se dispara vía IntersectionObserver al entrar
   en viewport (ver js/main.js).
   */
.ms-ranking {
    background-color: #ffffff;
    border: 1px solid var(--ms-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 2rem;
    max-width: 48rem;
    margin: 0 auto;
}

.ms-ranking__intro {
    color: rgba(27, 43, 33, 0.8);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 1.75rem 0;
}

.ms-ranking__intro strong {
    color: rgba(27, 43, 33, 0.8);
}

.ms-ranking__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ms-ranking__row {
    margin: 0;
    padding: 0;
}

/* Cabecera de cada criterio: % a la izquierda + etiqueta */
.ms-ranking__head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.ms-ranking__pct {
    font-weight: 800;
    color: #1b2b21;
    font-size: 1.05rem;
    min-width: 3rem;
    font-variant-numeric: tabular-nums;
}

.ms-ranking__label {
    color: rgba(27, 43, 33, 0.8);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Pista de la barra (fondo gris claro) */
.ms-ranking__track {
    background-color: #f1f5f9;
    border-radius: 9999px;
    height: 0.6rem;
    overflow: hidden;
}

/* Relleno de la barra (gradiente). Por defecto ancho 0;
   el JS le aplica el ancho final (en %) cuando entra en viewport. */
.ms-ranking__bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, #1b2b21 0%, #5D9244 100%);
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive: en móvil reduce el padding y el tamaño de fuentes */
@media (max-width: 640px) {
    .ms-ranking {
        padding: 1.5rem;
    }

    .ms-ranking__pct {
        font-size: 0.95rem;
        min-width: 2.5rem;
    }

    .ms-ranking__label {
        font-size: 0.88rem;
    }
}

/* =====================================================================
   Encabezados: color corporativo para todos los H1-H6 del sitio.
   Los titulares blancos sobre foto (overlays) llevan color inline
   y no se ven afectados.
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: #1b2b21;
}

/* =====================================================================
   13. Utilidades propias (migradas desde tailwind.css)
   ---------------------------------------------------------------------
   Todas las clases de proyecto que estaban incrustadas al final de
   tailwind.css. Sin @layer (igual que estaban alli), para no alterar
   la prioridad en cascada.
   ===================================================================== */

/* Enlace con nombre de negocio (subrayado punteado) */
.business-name-link {
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: text-decoration-style 0.3s ease;
}

.business-name-link:hover {
  text-decoration-style: solid;
}

/* Resto de utilidades del proyecto */
.bg-header {
    background-color: var(--color-header);
  }
  .bg-servicios {
    background-color: #e6eee6;
  }
  .text-icono {
    color: #1b2b21;
  }
  .text-patologia {
    color: var(--color-patologia);
  }
  .border-patologia {
    border-color: var(--color-patologia);
  }

  /* === Destacado de patologías comunes === */
  .destacado-patologias {
    background-color: #fff;
    border-left: 4px solid var(--color-patologia);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .destacado-patologias {
      flex-direction: row;
      align-items: center;
      gap: 1.25rem;
      padding: 1rem 1.5rem;
    }
  }

  .destacado-patologias__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
  }

  .destacado-patologias__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background-color: #1b2b21;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }

  .destacado-patologias__label {
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-patologia);
    line-height: 1;
  }

  .destacado-patologias__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .destacado-patologias__pill {
    font-size: 0.875rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid var(--color-patologia);
    background-color: #fff;
    color: var(--color-gray-800);
    white-space: nowrap;
    line-height: 1.3;
  }
  .mi-elemento {
  background-color: #1b2b21; /* Color base (el que tenías antes) */
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease; /* Transición suave para todos los cambios */
  cursor: pointer; /* Cursor de mano */
}

.mi-elemento:hover {
  background-color: #ffffff; /* Hover: fondo blanco */
  color: #1b2b21;           /* Hover: letra verde oscuro */
  border: 1px solid #1b2b21; /* Hover: hilo fino verde oscuro */
  transform: translateY(-2px); /* Efecto de elevación */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra */
}

.mi-elemento-content {
  background-color: #1b2b21;
  color: white;
  padding: 12px 24px; /* Cambiado de 8px 16px */
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex; /* Añadido */
  align-items: center; /* Centrado vertical perfecto */
  justify-content: center; /* Centrado horizontal */
  font-weight: 500; /* Coincide con font-medium */
  line-height: 1.5; /* Line-height consistente */
}

.mi-elemento-content:hover {
  background-color: #ffffff;
  color: #1b2b21;
  border: 1px solid #1b2b21;
  padding: 12px 24px; /* Cambiado de 8px 16px */
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex; /* Añadido */
  
  align-items: center; /* Centrado vertical perfecto */
  justify-content: center; /* Centrado horizontal */
  font-weight: 500; /* Coincide con font-medium */
  line-height: 1.5; /* Line-height consistente */
}
/* Formato tablas */
.tabla-container {
    width: 100%;
    overflow-x: auto;
    margin: 15px 0;
    /* Estos son clave para evitar el desbordamiento */
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch; /* Para scroll suave en iOS */
}

.estadisticas-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 800px; /* Aumenté el mínimo */
    font-family: Arial, sans-serif;
    margin: 0; /* Elimino margin de la tabla */
}

.estadisticas-table th, .estadisticas-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    white-space: nowrap; /* Evita que el texto se rompa por defecto */
    box-sizing: border-box;
}

.estadisticas-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.estadisticas-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.estadisticas-table tr:hover {
    background-color: #f5f5f5;
}

/* Para móvil, permitimos que el texto se ajuste en celdas específicas */
@media (max-width: 768px) {
    .estadisticas-table {
        min-width: 600px; /* Adjusted slightly to potentially allow more flexibility for smaller screens */
    }
    
    .estadisticas-table th, .estadisticas-table td {
        padding: 8px;
        font-size: 13px;
        white-space: normal; /* Allow text to wrap by default in small screens */
        max-width: none; /* Remove max-width restriction for general cells */
    }
    
    /* Specific styling for the first column to prevent it from becoming too narrow or overlapping */
    .estadisticas-table th:first-child,
    .estadisticas-table td:first-child {
        min-width: 150px; /* Increased min-width to ensure space for the labels */
        max-width: 60%; /* Allow it to take up to 60% of the available width */
        width: 60%; /* Give it a preferred width */
        white-space: normal; /* Ensure text can wrap in this column */
    }

    /* Specific styling for the second column (Valor) */
    .estadisticas-table th:last-child,
    .estadisticas-table td:last-child {
        min-width: 100px; /* Ensure a reasonable min-width for the value */
        width: 40%; /* Give it a preferred width */
        white-space: normal; /* Allow text to wrap */
        text-align: right; /* Values often look better aligned right */
    }
}
.faq-list {
    margin: 10px 0;
    padding-left: 20px;
    list-style-type: none;
    word-break: break-all;        /* Rompe palabras largas */
    overflow-wrap: break-word;    /* Alternativa más suave */
    word-wrap: break-word;        /* Compatibilidad */
}
.faq-list li {
    margin-bottom: 5px;
}
.faq-list li::before {
    content: "- ";
    margin-right: 8px;
}
.enlace_content {
  text-decoration: underline;
}
.categoriasinfoh3 {
  font-size: 1.25rem; /* Equivalente a text-xl en Tailwind por defecto */
  font-weight: bold;  /* Equivalente a font-bold */
  margin-bottom: 0.5rem; /* Equivalente a mb-2 en Tailwind por defecto */
  margin-top: 1rem;
}
.categoriasinfop {
  margin-bottom: 0.25rem;
  margin-bottom: 0.25rem; /* Equivalente a mb-2 en Tailwind por defecto */
  word-wrap: break-word; /* Permite que las palabras largas se rompan y pasen a la siguiente línea */
  word-break: break-word; /* Fuerza la ruptura de palabras en cualquier punto para evitar el desbordamiento */
  overflow-wrap: break-word; /* Similar a word-wrap, es una versión más reciente */
}
.categoriasinfoh2 {
    font-size: 1.875rem; /* equivalente a text-3xl */
    font-weight: bold;
    margin-bottom: 1.5rem; /* equivalente a mb-6 */
}

/* CSS reutilizable para todas las páginas */
.seccion-contenido-principal p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.seccion-contenido-principal p:last-child {
    margin-bottom: 0;
}

/* Opcional: mejorar espaciado de h3 en estas secciones */
.seccion-contenido-principal h3 {
font-size: 1.25rem;        /* text-xl */
line-height: 1.4;          /* text-xl--line-height */
font-weight: 700;          /* font-bold */
margin-bottom: 1.5rem;     /* mb-6 (0.25rem * 6) */
margin-top: 1rem;          /* mt-4 (0.25rem * 4) */
}

.seccion-contenido-principal h2 {
font-size: 1.4rem;        
line-height: 1.4;          /* text-xl--line-height */
font-weight: 700;          /* font-bold */
margin-bottom: 1.5rem;     /* mb-6 (0.25rem * 6) */
margin-top: 1rem;          /* mt-4 (0.25rem * 4) */
}

.seccion-contenido-principal a {
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: text-decoration-style 0.3s ease;
}
.etiqueta-naranja-resumen-negocio {display: inline-block;
            background-color: #1b2b21;
            color: #ffffff;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 999px;
            margin-bottom: 6px;
            letter-spacing: 0.2px;
            line-height: 1.4;}
.destacado-verde {background-color: #1b2b21;}
/* ==================== CSS PARA BANNERS 728x90px ==================== */
.banner-728x90 {
    width: 728px;
    height: 90px;
    margin: 20px auto;
    display: block;
    text-align: center;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.banner-728x90 a.banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    line-height: 0;
}
.banner-728x90 img {
    width: 728px;
    height: 90px;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}
.banner-728x90 img:hover {
    opacity: 0.9;
}
@media (max-width: 1023px) and (min-width: 768px) {
    .banner-728x90 { width: 100%; max-width: 728px; height: auto; }
    .banner-728x90 img { width: 100%; height: auto; }
}
@media (max-width: 767px) {
    .banner-728x90 { width: 100%; max-width: 728px; height: auto; margin: 15px auto; }
    .banner-728x90 img { width: 100%; height: auto; }
}
.banner-728x90 a.banner-link:focus {
    outline: 3px solid #4299e1;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .banner-728x90 img { transition: none; }
    .banner-728x90 img:hover { opacity: 1; }
}
@media print {
    .banner-728x90 { display: none; }
}

/* ---------------------------------------------------------------------
   13.1 Utilidades de Tailwind ausentes en la build compilada
   ---------------------------------------------------------------------
   El tailwind.css del proyecto es una build parcial (se generó desde
   un subconjunto de páginas) y carece de clases que el PHP sí usa:
   bordes del formulario de contacto, anillos de foco, col-span de
   los estados vacíos, pesos de fuente, etc. Se restauran aquí con
   los valores por defecto de Tailwind v4.
   --------------------------------------------------------------------- */

/* Bordes y fondos */
.border-gray-300   { border-color: #d1d5db; }
.border-red-400    { border-color: #f87171; }
.border-red-600    { border-color: #dc2626; }
.border-green-400  { border-color: #4ade80; }
.border-yellow-400 { border-color: #facc15; }
.border-l-4        { border-left-width: 4px; }
.bg-green-100      { background-color: #dcfce7; }
.bg-yellow-50      { background-color: #fefce8; }

/* Colores de texto */
.text-black      { color: #000; }
.text-red-700    { color: #b91c1c; }
.text-green-700  { color: #15803d; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }

/* Tipografía */
.font-normal    { font-weight: 400; }
.font-semibold  { font-weight: 600; }
.font-extrabold { font-weight: 800; }
.text-base      { font-size: 1rem; line-height: 1.5rem; }
.text-6xl       { font-size: 3.75rem; line-height: 1; }
.underline      { text-decoration-line: underline; }

/* Espaciado y tamaño */
.h-1      { height: 0.25rem; }
.h-4      { height: 1rem; }
.w-4      { width: 1rem; }
.mr-4     { margin-right: 1rem; }
.mt-3     { margin-top: 0.75rem; }
.mt-8     { margin-top: 2rem; }
.pl-5     { padding-left: 1.25rem; }
.pt-2     { padding-top: 0.5rem; }
.pt-4     { padding-top: 1rem; }
.px-8     { padding-left: 2rem; padding-right: 2rem; }
.py-12    { padding-top: 3rem; padding-bottom: 3rem; }
.max-w-7xl { max-width: 80rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Layout */
.inline-block   { display: inline-block; }
.flex-grow      { flex-grow: 1; }
.justify-start  { justify-content: flex-start; }
.list-disc      { list-style-type: disc; }
.col-span-3     { grid-column: span 3 / span 3; }
.col-span-4     { grid-column: span 4 / span 4; }
.col-span-6     { grid-column: span 6 / span 6; }

/* Estados interactivos */
.hover\:underline:hover     { text-decoration-line: underline; }
.hover\:text-red-800:hover  { color: #991b1c; }
.group:hover .group-hover\:text-red-700 { color: #b91c1c; }

/* Foco (formularios) */
.focus\:border-transparent:focus { border-color: transparent; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px currentColor; outline: none; }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px currentColor; outline: none; }
.focus\:ring-red-400:focus { box-shadow: 0 0 0 2px #f87171; outline: none; }
.focus\:ring-red-600:focus { box-shadow: 0 0 0 2px #dc2626; outline: none; }

/* Responsive */
@media (width >= 48rem) {
  .md\:p-8 { padding: 2rem; }
}