/* ==========================================================
   PORTADA - Colegio Regional de Obstetras III Lima - Callao
   ----------------------------------------------------------
   Criterios aplicados (Refactoring UI, Wathan & Schoger):

   - UNA sola familia tipográfica (Inter). La jerarquía se
     construye con peso y color, no mezclando fuentes.
   - Escala de tamaños fija y sin decimales (p.105).
   - Dos pesos y tres colores de texto (p.40).
   - Nada de etiquetas decorativas sobre cada título (p.48).
   - Se enfatiza de-enfatizando: fondos solo donde agrupan,
     no alternados por adorno (p.46).
   - Sobre el vino se usan colores elegidos a mano del mismo
     tono, nunca blanco translúcido (p.42).
   - Menos bordes: separan el espacio y el fondo (p.238).
   ========================================================== */

:root {
    /* --- Identidad --- */
    --cro-vino: #660219;
    --cro-vino-osc: #4c0113;
    --cro-vino-claro: #8b0222;
    --cro-dorado: #b8912f;

    /* --- Tres colores de texto, ni uno más (p.40) --- */
    --cro-texto-1: hsl(345, 22%, 14%);  /* principal */
    --cro-texto-2: hsl(345, 8%, 40%);   /* secundario */
    --cro-texto-3: hsl(345, 6%, 56%);   /* terciario */

    /* Sobre fondo vino: elegidos a mano con el mismo tono,
       no blanco con opacidad (p.44) */
    --cro-sobre-vino-1: #ffffff;
    --cro-sobre-vino-2: hsl(345, 42%, 84%);
    --cro-sobre-vino-3: hsl(345, 30%, 68%);

    --cro-linea: hsl(345, 12%, 90%);
    --cro-fondo-alt: hsl(345, 20%, 97%);

    /* --- Escala de tamaños, a mano y sin decimales (p.105) --- */
    --cro-t-12: 12px;
    --cro-t-14: 14px;
    --cro-t-16: 16px;
    --cro-t-18: 18px;
    --cro-t-20: 20px;
    --cro-t-24: 24px;
    --cro-t-30: 30px;
    --cro-t-36: 36px;
    --cro-t-48: 48px;
    --cro-t-60: 60px;   /* solo el emblema "200" del pie */

    /* --- Espaciado: progresión, no valores sueltos (p.70) --- */
    --cro-e1: 4px;
    --cro-e2: 8px;
    --cro-e3: 12px;
    --cro-e4: 16px;
    --cro-e5: 24px;
    --cro-e6: 32px;
    --cro-e7: 48px;
    --cro-e8: 64px;
    --cro-e9: 96px;
}


/* ----------------------------------------------- */
/*   CORRECCIONES DE BASE                          */
/* ----------------------------------------------- */

/* El template no aplica border-box globalmente: el padding se
   sumaba al ancho y empujaba scroll horizontal. Se acota a los
   componentes propios para no alterar el cálculo del template. */
[class^="cro-"],
[class*=" cro-"],
[class^="cro-"]::before,
[class^="cro-"]::after {
    box-sizing: border-box;
}

/* El template usa .img-responsive (Bootstrap 3) sobre Bootstrap 4,
   donde esa clase no existe: los afiches se pintaban a tamaño real.
   Va con :where() para especificidad cero y no pisar reglas propias. */
:where(.cro-page) img {
    max-width: 100%;
    height: auto;
}

/* Owl construye una pista tan ancha como la suma de sus
   diapositivas (llegaba a 6976px). El recorte lo hace el
   contenedor; sin él se ensancha la página entera. */
.owl-carousel,
.owl-stage-outer {
    overflow: hidden;
    max-width: 100%;
}

.owl-carousel img,
.carousel-inner img {
    max-width: 100%;
    height: auto;
}

/* El menú y sus desplegables van por encima de todo el contenido.
   El template no fija ningún z-index propio en head.php, así que
   cualquier bloque posicionado que venga después en el documento
   podía taparlos: el submenú de "Trámites" caía por debajo del
   banner de la gala.

   Solo se declara z-index, nunca position: el navbar cambia de
   position (relative/fixed) según el scroll y tocarlo rompería
   ese comportamiento. */
.cro-page .rd-navbar,
.cro-page .rd-navbar-top-panel {
    z-index: 1000;
}

.cro-page .rd-navbar-dropdown,
.cro-page .rd-navbar-megamenu {
    z-index: 1001;
}

/* Las franjas a ancho completo llevan margin:0 -20px para
   compensar el padding del body en las demás páginas; aquí ese
   padding no existe y las haría sobresalir. */
.cro-page .fp-wrap,
.cro-page .fp-pie,
.cro-page .bicen-pie,
.cro-page .bg-wrap {
    margin-left: 0;
    margin-right: 0;
}


/* ----------------------------------------------- */
/*   TIPOGRAFÍA                                    */
/*   Una familia. Dos pesos: 400 y 600/700.        */
/* ----------------------------------------------- */

body.cro-page {
    padding: 0;
    font-family: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: var(--cro-t-16);
    font-weight: 400;
    line-height: 1.6;
    color: var(--cro-texto-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cro-page h1,
.cro-page h2,
.cro-page h3,
.cro-page h4,
.cro-page h5,
.cro-page h6 {
    font-family: inherit;
    color: var(--cro-texto-1);
    margin: 0;
}

/* Los títulos grandes van más apretados: a mayor tamaño, menor
   interlineado proporcional (p.122). Y con letter-spacing
   ligeramente negativo, que es lo que necesitan las fuentes de
   interfaz en tamaños grandes (p.132). */
.cro-page h2 {
    font-size: var(--cro-t-30);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.cro-page h3 {
    font-size: var(--cro-t-20);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.cro-page h4,
.cro-page h6 {
    font-size: var(--cro-t-16);
    font-weight: 600;
    line-height: 1.45;
}

.cro-page p {
    margin: 0 0 var(--cro-e4);
}

.cro-page p:last-child {
    margin-bottom: 0;
}

/* Longitud de línea de 45-75 caracteres (p.114). Se aplica al
   párrafo, no al contenedor: el bloque puede ser ancho aunque
   el texto no lo sea. */
.cro-medida {
    max-width: 34em;
}

.cro-medida-centro {
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .cro-page h2 { font-size: var(--cro-t-36); }
    .cro-page h3 { font-size: var(--cro-t-24); }
}


/* ----------------------------------------------- */
/*   ESTRUCTURA                                    */
/* ----------------------------------------------- */

.cro-seccion {
    padding: var(--cro-e9) 0;
}

.cro-seccion-corta {
    padding: var(--cro-e8) 0;
}

/* El fondo se usa cuando AGRUPA algo distinto del resto, no
   alternando por decoración. */
.cro-fondo-alt {
    background: var(--cro-fondo-alt);
}

.cro-fondo-vino {
    background: var(--cro-vino);
    color: var(--cro-sobre-vino-2);
}

.cro-fondo-vino h2,
.cro-fondo-vino h3 {
    color: var(--cro-sobre-vino-1);
}

.cro-contenedor {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Encabezado de sección: solo el título y, si hace falta, una
   bajada. Sin etiqueta superior ni filete: eran adorno repetido
   que aplanaba la jerarquía. */
/* Los encabezados van centrados: el título de sección solo y
   pegado al margen izquierdo dejaba la mitad derecha vacía y el
   bloque se veía descolgado. La bajada se centra con su medida
   de lectura intacta (34em), no estirada de lado a lado. */
.cro-encabezado {
    margin-bottom: var(--cro-e7);
    text-align: center;
}

.cro-encabezado p {
    margin-top: var(--cro-e3);
    margin-left: auto;
    margin-right: auto;
    font-size: var(--cro-t-18);
    line-height: 1.65;
    color: var(--cro-texto-2);
}

/* Dentro del encabezado, .cro-medida también se centra */
.cro-encabezado .cro-medida {
    margin-left: auto;
    margin-right: auto;
}

.cro-fondo-vino .cro-encabezado p {
    color: var(--cro-sobre-vino-2);
}


/* ----------------------------------------------- */
/*   HERO INSTITUCIONAL                            */
/*   Lo primero que se ve: quiénes somos y qué      */
/*   representamos. Va en claro para que el banner  */
/*   vino de la gala contraste debajo en lugar de   */
/*   competir.                                     */
/* ----------------------------------------------- */

.cro-hero {
    position: relative;
    padding: var(--cro-e9) 0 var(--cro-e8);
    background:
        radial-gradient(90% 120% at 85% 0%, hsl(345, 30%, 96%) 0%, hsl(345, 20%, 99%) 55%, #fff 100%);
    overflow: hidden;
}

/* Filete superior: el único adorno del bloque, y sirve
   para amarrarlo con el menú que queda encima. */
.cro-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cro-vino), var(--cro-dorado) 60%, var(--cro-vino));
}

/* Hero centrado en un eje: escudo, titular, bajada y botones
   comparten el mismo centro. Con el titular a la izquierda y el
   escudo a la derecha el bloque quedaba partido en dos pesos que
   no se equilibraban. */
.cro-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cro-hero-escudo {
    width: 132px;
    max-width: 100%;
    margin-bottom: var(--cro-e5);
}

.cro-hero-kicker {
    margin: 0 0 var(--cro-e4);
    font-size: var(--cro-t-12);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cro-vino);
}

/* El titular es el elemento con más peso de la página.
   Nada más compite con él en tamaño. */
.cro-hero h1 {
    margin: 0;
    font-size: var(--cro-t-36);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--cro-texto-1);
    max-width: 15em;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .cro-hero h1 { font-size: var(--cro-t-48); }
}

.cro-hero h1 em {
    font-style: normal;
    color: var(--cro-vino);
}

.cro-hero-bajada {
    margin: var(--cro-e5) auto 0;
    max-width: 34em;
    font-size: var(--cro-t-18);
    line-height: 1.65;
    color: var(--cro-texto-2);
}

.cro-hero-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cro-e3);
    margin-top: var(--cro-e6);
}

/* --- Banda de cifras --- */
.cro-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--cro-e5);
    margin-top: var(--cro-e8);
    padding-top: var(--cro-e6);
    border-top: 1px solid var(--cro-linea);
    list-style: none;
    padding-left: 0;
}

.cro-cifras { text-align: center; }

.cro-cifra-num {
    display: block;
    font-size: var(--cro-t-36);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--cro-vino);
    font-variant-numeric: tabular-nums;
}

.cro-cifra-txt {
    display: block;
    margin-top: var(--cro-e2);
    font-size: var(--cro-t-14);
    line-height: 1.5;
    color: var(--cro-texto-3);
}


/* ----------------------------------------------- */
/*   TRÁMITES                                      */
/*   Lo más importante de la portada: es lo único  */
/*   que se destaca de verdad.                     */
/* ----------------------------------------------- */

.cro-tramites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--cro-e4);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Sin borde alrededor: el fondo y la sombra ya delimitan la
   tarjeta. Un borde encima sería una línea de más (p.238). */
.cro-tramite {
    display: block;
    padding: var(--cro-e5) var(--cro-e5) var(--cro-e5) var(--cro-e6);
    background: #fff;
    border-radius: 6px;
    border-left: 3px solid var(--cro-vino);
    text-decoration: none !important;
    /* Sombra en dos partes, como la luz real: una sombra amplia
       y difusa para el ambiente, otra corta y marcada para el
       contacto (p.186). */
    box-shadow:
        0 1px 2px hsla(345, 30%, 12%, .08),
        0 4px 12px hsla(345, 30%, 12%, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cro-tramite:hover,
.cro-tramite:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px hsla(345, 30%, 12%, .10),
        0 12px 28px hsla(345, 30%, 12%, .12);
}

.cro-tramite-titulo {
    display: block;
    font-size: var(--cro-t-18);
    font-weight: 600;
    color: var(--cro-texto-1);
    line-height: 1.35;
}

/* Secundario por color, no por tamaño diminuto (p.39) */
.cro-tramite-desc {
    display: block;
    margin-top: var(--cro-e1);
    font-size: var(--cro-t-14);
    color: var(--cro-texto-3);
    line-height: 1.55;
}


/* ----------------------------------------------- */
/*   INSTITUCIÓN: presentación + consejo           */
/* ----------------------------------------------- */

.cro-institucion {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cro-e7);
    align-items: center;
}

@media (min-width: 992px) {
    .cro-institucion {
        grid-template-columns: 1fr 320px;
        gap: var(--cro-e9);
    }
}

.cro-institucion-escudo {
    justify-self: center;
}

.cro-consejo-foto {
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
    box-shadow:
        0 2px 4px hsla(345, 30%, 12%, .10),
        0 16px 40px hsla(345, 30%, 12%, .16);
}

.cro-consejo-foto img {
    display: block;
    width: 100%;
}

/* Epígrafe de la foto. El periodo de gestión va en el color
   secundario y en negrita; el resto queda en terciario. Dos
   niveles bastan para ordenar el pie de una imagen. */
.cro-epigrafe {
    margin-top: var(--cro-e4);
    font-size: var(--cro-t-14);
    line-height: 1.55;
    color: var(--cro-texto-3);
}

.cro-epigrafe b {
    color: var(--cro-texto-2);
    font-weight: 600;
}


/* ----------------------------------------------- */
/*   TABLA DE ATENCIÓN                             */
/* ----------------------------------------------- */

.cro-tabla-caja {
    overflow-x: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow:
        0 1px 2px hsla(345, 30%, 12%, .08),
        0 4px 12px hsla(345, 30%, 12%, .05);
}

.cro-tabla {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
    margin: 0;
}

/* Encabezado en terciario y pequeño: la fila de títulos no es lo
   importante de una tabla, lo son los datos (p.36). */
.cro-tabla thead th {
    padding: var(--cro-e3) var(--cro-e5);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cro-linea);
    font-size: var(--cro-t-12);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cro-texto-3);
    text-align: left;
}

.cro-tabla tbody td {
    padding: var(--cro-e4) var(--cro-e5);
    border-top: 1px solid var(--cro-linea);
    font-size: var(--cro-t-14);
    line-height: 1.55;
    vertical-align: top;
    color: var(--cro-texto-2);
}

.cro-tabla tbody tr:first-child td {
    border-top: 0;
}

.cro-tabla td:first-child {
    color: var(--cro-texto-1);
    font-weight: 600;
}

.cro-tabla-tel {
    white-space: nowrap;
    text-align: right;
}

/* El teléfono es el dato que se viene a buscar: va en el color
   principal y en negrita, no como enlace azul cualquiera (p.126). */
.cro-tabla-tel a {
    color: var(--cro-texto-1) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.cro-tabla-tel a:hover {
    color: var(--cro-vino) !important;
}

.cro-horario {
    margin-top: var(--cro-e5);
    font-size: var(--cro-t-14);
    color: var(--cro-texto-2);
}

.cro-horario b {
    color: var(--cro-texto-1);
    font-weight: 600;
}


/* ----------------------------------------------- */
/*   PROGRAMAS Y EVENTOS                           */
/* ----------------------------------------------- */

.cro-programas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--cro-e5);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Sin caja ni borde: la imagen delimita, el texto va debajo
   sobre el fondo de la página. Menos cajas, más aire. */
.cro-programa {
    display: block;
    text-decoration: none !important;
}

.cro-programa-img {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: var(--cro-vino);
    box-shadow: 0 1px 2px hsla(345, 30%, 12%, .10);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cro-programa:hover .cro-programa-img,
.cro-programa:focus-visible .cro-programa-img {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px hsla(345, 30%, 12%, .10),
        0 10px 24px hsla(345, 30%, 12%, .14);
}

.cro-programa-titulo {
    display: block;
    margin-top: var(--cro-e4);
    font-size: var(--cro-t-16);
    font-weight: 600;
    color: var(--cro-texto-1);
    line-height: 1.4;
}

.cro-programa-desc {
    display: block;
    margin-top: var(--cro-e1);
    font-size: var(--cro-t-14);
    color: var(--cro-texto-3);
}


/* ----------------------------------------------- */
/*   CENA DE GALA: bloque de venta                 */
/*   El precio y la acción mandan; todo lo demás    */
/*   es apoyo.                                     */
/* ----------------------------------------------- */

.cro-gala-venta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cro-e6);
    align-items: start;
}

@media (min-width: 768px) {
    .cro-gala-venta {
        grid-template-columns: 1fr auto;
        gap: var(--cro-e8);
        align-items: center;
    }
}

/* Ficha del evento: dato a la izquierda, valor a la derecha.
   Sin etiquetas del tipo "Fecha:" — el formato ya lo dice
   (Refactoring UI p.48). */
.cro-gala-ficha {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cro-gala-ficha li {
    display: flex;
    gap: var(--cro-e4);
    padding: var(--cro-e4) 0;
    border-top: 1px solid var(--cro-linea);
    font-size: var(--cro-t-16);
    line-height: 1.55;
}

.cro-gala-ficha li:first-child {
    border-top: 0;
    padding-top: 0;
}

.cro-gala-ficha b {
    flex: 0 0 108px;
    color: var(--cro-texto-3);
    font-size: var(--cro-t-14);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: 2px;
}

.cro-gala-ficha span {
    color: var(--cro-texto-1);
}

/* Tarjeta de compra. Es lo único de la sección con fondo
   propio: así el ojo va directo al precio y al botón. */
.cro-gala-compra {
    padding: var(--cro-e6);
    background: #fff;
    border-radius: 10px;
    border-top: 4px solid var(--cro-vino);
    box-shadow:
        0 2px 4px hsla(345, 30%, 12%, .10),
        0 16px 40px hsla(345, 30%, 12%, .14);
    text-align: center;
}

@media (min-width: 768px) {
    .cro-gala-compra {
        min-width: 300px;
    }
}

.cro-gala-precio {
    display: block;
    font-size: var(--cro-t-48);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--cro-texto-1);
    font-variant-numeric: tabular-nums;
}

.cro-gala-precio-nota {
    display: block;
    margin-top: var(--cro-e2);
    font-size: var(--cro-t-14);
    color: var(--cro-texto-3);
}

.cro-gala-compra .cro-boton {
    display: block;
    margin-top: var(--cro-e5);
    padding: 15px 24px;
    font-size: var(--cro-t-16);
}

.cro-gala-cupos {
    margin-top: var(--cro-e4);
    font-size: var(--cro-t-14);
    color: var(--cro-texto-2);
}

.cro-gala-cupos b {
    color: var(--cro-vino);
    font-weight: 600;
}


/* ----------------------------------------------- */
/*   HISTORIA (citas)                              */
/* ----------------------------------------------- */

.cro-cita {
    display: flex;
    align-items: center;
    gap: var(--cro-e7);
    max-width: 940px;
    margin: 0 auto;
    padding: 0 var(--cro-e5);
}

.cro-cita-retrato {
    flex: 0 0 auto;
    width: 152px;
    height: 152px;
    border-radius: 50%;
    object-fit: cover;
}

.cro-cita-texto {
    margin: 0;
    font-size: var(--cro-t-16);
    line-height: 1.75;
    color: var(--cro-sobre-vino-2);
    text-align: left;
    max-width: 34em;
}

.cro-cita-texto::before,
.cro-cita-texto::after {
    content: none;
}

/* Controles del carrusel sobre vino: color del mismo tono */
.cro-fondo-vino .owl-prev,
.cro-fondo-vino .owl-next {
    color: var(--cro-sobre-vino-3);
    transition: color .18s ease;
}

.cro-fondo-vino .owl-prev:hover,
.cro-fondo-vino .owl-next:hover {
    color: var(--cro-sobre-vino-1);
}

.cro-fondo-vino .owl-dot span {
    background: var(--cro-sobre-vino-3);
}

.cro-fondo-vino .owl-dot.active span,
.cro-fondo-vino .owl-dot:hover span {
    background: var(--cro-sobre-vino-1);
}


/* ----------------------------------------------- */
/*   BOTÓN                                         */
/* ----------------------------------------------- */

.cro-boton {
    display: inline-block;
    padding: 13px 26px;
    background: var(--cro-vino);
    color: #fff !important;
    border: 0;
    border-radius: 6px;
    font-size: var(--cro-t-14);
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 1px 2px hsla(345, 30%, 12%, .16);
    transition: background .18s ease, transform .18s ease;
}

.cro-boton:hover,
.cro-boton:focus-visible {
    background: var(--cro-vino-claro);
    color: #fff !important;
    transform: translateY(-1px);
}

.cro-boton-suave {
    background: transparent;
    color: var(--cro-vino) !important;
    box-shadow: inset 0 0 0 1px var(--cro-linea);
}

.cro-boton-suave:hover {
    background: var(--cro-fondo-alt);
    color: var(--cro-vino) !important;
}


/* ----------------------------------------------- */
/*   GALERÍA Y MAPA                                */
/* ----------------------------------------------- */

.cro-galeria .thumbnail-default img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.cro-mapa {
    line-height: 0;
}

.cro-mapa iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}


/* ----------------------------------------------- */
/*   RESPONSIVE                                    */
/* ----------------------------------------------- */

@media (max-width: 991px) {
    :root {
        --cro-e8: 48px;
        --cro-e9: 56px;
    }

    .cro-cita {
        flex-direction: column;
        gap: var(--cro-e5);
    }

    .cro-cita-texto {
        text-align: center;
    }

    .cro-cita-retrato {
        width: 112px;
        height: 112px;
    }

    .cro-mapa iframe {
        height: 320px;
    }
}

@media (max-width: 575px) {
    .cro-contenedor {
        padding: 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cro-tramite:hover,
    .cro-boton:hover,
    .cro-programa:hover .cro-programa-img {
        transform: none;
    }
}