/*
======================================================
MCB Inspiration v1.0
======================================================
*/


/*====================================================
CONTENEDOR DE ACCIONES
====================================================*/

.mcb-inspiration{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;

    margin-top:26px;
    margin-bottom:20px;
}


/*====================================================
BOTÓN
====================================================*/

.mcb-inspiration-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:10px;

	min-height:48px;

	padding:12px 20px;

	border:2px solid #A41C2F;

	border-radius:12px;

	background:#FFFFFF;

	color:#A41C2F;

	font-size:15px;

	font-weight:600;

	line-height:1;

	cursor:pointer;

	transition:
		background .25s ease,
		color .25s ease,
		border-color .25s ease,
		box-shadow .25s ease,
		transform .25s ease;

}


/*====================================================
HOVER / FOCUS
====================================================*/

/*====================================================
ESTADOS DEL BOTÓN
====================================================*/

/*
Estado base.
Se repite con mayor especificidad para evitar estilos
globales heredados de Astra.
*/

.mcb-inspiration .mcb-inspiration-btn,
.mcb-inspiration .mcb-inspiration-btn:focus,
.mcb-inspiration .mcb-inspiration-btn:active{

	background:#FFFFFF;

	color:#A41C2F;

	border-color:#A41C2F;

	outline:none;

	box-shadow:0 6px 18px rgba(164,28,47,.14);

}


/*
Hover solo en dispositivos con cursor real.
Esto evita que en móvil el botón quede visualmente
pegado al estado hover.
*/

@media (hover:hover){

	.mcb-inspiration .mcb-inspiration-btn:hover{

		background:#A41C2F;

		color:#FFFFFF;

		border-color:#A41C2F;

		transform:
			translateY(-2px);

		box-shadow:
			0 6px 18px rgba(164,28,47,.18);

	}

}


/*
Focus accesible para navegación con teclado.
No cambia el fondo; solo marca el enfoque.
*/

.mcb-inspiration .mcb-inspiration-btn:focus-visible{

	background:#FFFFFF;

	color:#A41C2F;

	border-color:#A41C2F;

	outline:3px solid rgba(164,28,47,.25);

	outline-offset:3px;

}


/*
Estado activo: producto guardado como inspiración.
Este estado debe ganar sobre focus, active y hover.
*/

.mcb-inspiration .mcb-inspiration-btn.is-active,
.mcb-inspiration .mcb-inspiration-btn.is-active:focus,
.mcb-inspiration .mcb-inspiration-btn.is-active:active,
.mcb-inspiration .mcb-inspiration-btn.is-active:focus-visible{

	background:#A41C2F;

	color:#FFFFFF;

	border-color:#A41C2F;

	box-shadow:0 6px 18px rgba(164,28,47,.14);

}


@media (hover:hover){

	.mcb-inspiration .mcb-inspiration-btn.is-active:hover{

		background:#A41C2F;

		color:#FFFFFF;

		border-color:#A41C2F;

		transform:
			translateY(-2px);

		box-shadow:
			0 6px 18px rgba(164,28,47,.18);

	}

}


/*====================================================
ICONOS
====================================================*/

.mcb-inspiration-icon{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	width:22px;

	height:22px;

}


/*
Estado inicial:
se muestra corazón lineal.
*/

.mcb-inspiration-icon-empty{

	display:inline-flex;

}

.mcb-inspiration-icon-fill{

	display:none;

}


/*
Estado activo:
se muestra corazón sólido.
Esta clase se usará en la Etapa 3.
*/


.mcb-inspiration-btn.is-active .mcb-inspiration-icon-empty{

	display:none;

}

.mcb-inspiration-btn.is-active .mcb-inspiration-icon-fill{

	display:inline-flex;

}


/*====================================================
TEXTO
====================================================*/

.mcb-inspiration-label{

	display:inline-block;

}


/*====================================================
RESPONSIVE
====================================================*/

@media (max-width:544px){

    .mcb-inspiration{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .mcb-inspiration .mcb-inspiration-btn,
    .mcb-inspiration .mcb-inspiration-counter{
        width:100%;
        min-height:48px;
        margin:0;
    }

}

/*====================================================
CONTADOR PREMIUM PILL
====================================================*/

.mcb-inspiration .mcb-inspiration-counter{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:50px;
    margin:0;
    padding:12px 18px;

    border:1px solid rgba(164,28,47,.22);
    border-radius:999px;

    background:#FFFFFF;
    color:#A41C2F;
    
    text-decoration:none;
    cursor:pointer;

    font-size:15px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;

    box-shadow:
        0 6px 18px rgba(164,28,47,.14);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.mcb-inspiration .mcb-inspiration-counter:visited{
    color:#A41C2F;
}

.mcb-inspiration .mcb-inspiration-counter:hover,
.mcb-inspiration .mcb-inspiration-counter:focus,
.mcb-inspiration .mcb-inspiration-counter:active{
    color:#A41C2F;
    text-decoration:none;
}

/*====================================================
ICONO DEL CONTADOR
====================================================*/

.mcb-inspiration-counter-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;
    flex:0 0 20px;
}

.mcb-inspiration-counter-icon .mcb-icon{
    width:20px;
    height:20px;
}

/*====================================================
ETIQUETA DEL CONTADOR
====================================================*/

.mcb-inspiration-counter-label{
    display:inline-flex;
    align-items:center;
    line-height:1;
}

@media (hover:hover){

    .mcb-inspiration .mcb-inspiration-counter:hover{
        background:#FAF6F4;
        border-color:rgba(164,28,47,.38);

        transform:
            translateY(-2px);

        box-shadow:
            0 8px 22px rgba(164,28,47,.18);
    }

}

/*====================================================
PÁGINA MIS INSPIRACIONES
====================================================*/

.mcb-inspirations-page{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:48px 20px 64px;
}

.mcb-inspirations-page-header{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.mcb-inspirations-eyebrow{
    margin:0 0 10px;
    color:#A41C2F;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mcb-inspirations-page-header h1{
    margin:0 0 16px;
}

.mcb-inspirations-intro{
    margin:0;
    font-size:17px;
    line-height:1.6;
}

.mcb-inspirations-status{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;

    margin-top:24px;

    color:#A41C2F;
    font-size:15px;
}

.mcb-inspirations-content{
    margin-top:40px;
}

.mcb-inspirations-preparing{
    margin:0;
    padding:40px 20px;

    border:1px solid rgba(164,28,47,.14);
    border-radius:16px;

    background:#FAF6F4;
    text-align:center;
}

@media (max-width:544px){

    .mcb-inspirations-page{
        padding:32px 16px 48px;
    }

    .mcb-inspirations-intro{
        font-size:15px;
    }

    .mcb-inspirations-content{
        margin-top:30px;
    }

}

/*====================================================
CUADRÍCULA DE INSPIRACIONES
====================================================*/

.mcb-inspirations-grid{
    display:grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap:26px;
}

/*====================================================
TARJETA DE INSPIRACIÓN
====================================================*/

.mcb-inspiration-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    overflow:hidden;

    border:
        1px solid rgba(164,28,47,.14);
    border-radius:18px;

    background:#FFFFFF;

    box-shadow:
        0 8px 26px rgba(40,20,22,.08);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

@media (hover:hover){

    .mcb-inspiration-card:hover{
        border-color:
            rgba(164,28,47,.28);

        transform:
            translateY(-4px);

        box-shadow:
            0 14px 34px rgba(40,20,22,.12);
    }

}

/*====================================================
IMAGEN DE LA TARJETA
====================================================*/

.mcb-inspiration-card-media{
    position:relative;

    width:100%;
    aspect-ratio:4 / 5;

    overflow:hidden;
    background:#FAF6F4;
}

.mcb-inspiration-card-media > a{
    display:block;
    width:100%;
    height:100%;
}

.mcb-inspiration-card-media img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .35s ease;
}

@media (hover:hover){

    .mcb-inspiration-card:hover
    .mcb-inspiration-card-media img{
        transform:scale(1.025);
    }

}

.mcb-inspiration-card-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;
    padding:20px;

    color:#6F5B5F;
    text-align:center;
}

/*====================================================
CONTENIDO DE LA TARJETA
====================================================*/

.mcb-inspiration-card-body{
    display:flex;
    flex:1;
    flex-direction:column;

    padding:20px;
}

.mcb-inspiration-card-title{
    margin:0 0 20px;

    color:#2D2527;
    font-size:19px;
    font-weight:600;
    line-height:1.35;
}

.mcb-inspiration-card-title a,
.mcb-inspiration-card-title a:visited{
    color:inherit;
    text-decoration:none;
}

.mcb-inspiration-card-title a:hover,
.mcb-inspiration-card-title a:focus{
    color:#A41C2F;
}

/*====================================================
ACCIONES DE LA TARJETA
====================================================*/

.mcb-inspiration-card-actions{
    display:grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap:10px;

    margin-top:auto;
}


/*====================================================
BASE DE LAS ACCIONES
====================================================*/

.mcb-inspirations-page
.mcb-inspiration-card-appointment,

.mcb-inspirations-page
.mcb-inspiration-card-view,

.mcb-inspirations-page
.mcb-inspiration-card-share,

.mcb-inspirations-page
.mcb-inspiration-card-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:100%;
    min-height:44px;
    margin:0;
    padding:10px 14px;

    border-radius:10px;

    font-family:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1.15;
    text-align:center;
    text-decoration:none;

    appearance:none;
    cursor:pointer;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/*====================================================
SOLICITAR CITA — ACCIÓN PRINCIPAL
====================================================*/

.mcb-inspirations-page
.mcb-inspiration-card-appointment,
.mcb-inspirations-page
.mcb-inspiration-card-appointment:focus,
.mcb-inspirations-page
.mcb-inspiration-card-appointment:active{
    grid-column:1 / -1;

    border:1px solid #A41C2F;

    background:#A41C2F;
    color:#FFFFFF;

    box-shadow:
        0 6px 18px rgba(164,28,47,.16);

    outline:none;
}

/*====================================================
VER DISEÑO Y COMPARTIR
====================================================*/

.mcb-inspirations-page
.mcb-inspiration-card-view,

.mcb-inspirations-page
.mcb-inspiration-card-view:visited,

.mcb-inspirations-page
.mcb-inspiration-card-share{
    border:
        1px solid rgba(164,28,47,.38);

    background:#FFFFFF;
    color:#A41C2F;
}


/*====================================================
ICONO COMPARTIR
====================================================*/

.mcb-inspiration-card-appointment .mcb-icon,
.mcb-inspiration-card-share .mcb-icon{
    width:18px;
    height:18px;
}

/*====================================================
ELIMINAR
====================================================*/

.mcb-inspirations-page
.mcb-inspiration-card-remove{
    grid-column:1 / -1;

    min-height:38px;
    padding:8px 12px;

    border:0;

    background:transparent;
    color:#705E62;

    font-size:13px;
    font-weight:500;

    text-decoration:underline;
    text-underline-offset:3px;
}


/*====================================================
HOVER Y FOCUS
====================================================*/

@media (hover:hover){
    
     /*
     * Solicitar cita.
     */
    
    .mcb-inspirations-page
    .mcb-inspiration-card-appointment:hover,
    .mcb-inspirations-page
    .mcb-inspiration-card-appointment:focus-visible{
        border-color:#821626;
    
        background:#821626;
        color:#FFFFFF;
    
        transform:translateY(-1px);
    
        box-shadow:
            0 8px 21px rgba(164,28,47,.23);
    }
    
    /*
     * Ver diseño y Compartir.
     */

    .mcb-inspirations-page
    .mcb-inspiration-card-view:hover,

    .mcb-inspirations-page
    .mcb-inspiration-card-view:focus-visible,

    .mcb-inspirations-page
    .mcb-inspiration-card-share:hover,

    .mcb-inspirations-page
    .mcb-inspiration-card-share:focus-visible{
        border-color:#A41C2F;

        background:#FAF6F4;
        color:#A41C2F;

        transform:translateY(-1px);

        box-shadow:
            0 5px 14px rgba(164,28,47,.12);
    }


    .mcb-inspirations-page
    .mcb-inspiration-card-remove:hover,

    .mcb-inspirations-page
    .mcb-inspiration-card-remove:focus-visible{
        background:#FAF6F4;
        color:#A41C2F;
    }

}

/*====================================================
ESTADO VACÍO
====================================================*/

.mcb-inspirations-empty{
    max-width:720px;
    margin:0 auto;
    padding:48px 28px;

    border:
        1px solid rgba(164,28,47,.15);
    border-radius:18px;

    background:#FAF6F4;

    text-align:center;
}

.mcb-inspirations-empty h2{
    margin:0 0 14px;

    color:#2D2527;
    font-size:24px;
}

.mcb-inspirations-empty p{
    max-width:580px;
    margin:0 auto 24px;

    color:#5D5053;
    line-height:1.65;
}

.mcb-inspirations-page
.mcb-inspirations-empty-link,
.mcb-inspirations-page
.mcb-inspirations-empty-link:visited{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:12px 20px;

    border:1px solid #A41C2F;
    border-radius:10px;

    background:#A41C2F;
    color:#FFFFFF;

    font-size:15px;
    font-weight:600;
    line-height:1;
    text-decoration:none;
}

@media (hover:hover){

    .mcb-inspirations-page
    .mcb-inspirations-empty-link:hover,
    .mcb-inspirations-page
    .mcb-inspirations-empty-link:focus-visible{
        border-color:#821626;
        background:#821626;
        color:#FFFFFF;
    }

}

/*====================================================
RESPONSIVE DE LA COLECCIÓN
====================================================*/

@media (max-width:921px){

    .mcb-inspirations-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap:22px;
    }

}

@media (max-width:544px){

    .mcb-inspirations-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .mcb-inspiration-card-body{
        padding:18px;
    }

    .mcb-inspiration-card-actions{
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

    .mcb-inspirations-page
    .mcb-inspiration-card-remove{
        grid-column:1 / -1;
}
    
    .mcb-inspirations-empty{
        padding:36px 20px;
    }

    .mcb-inspirations-empty h2{
        font-size:21px;
    }

}

/*====================================================
ACCESO GLOBAL EN EL ENCABEZADO
====================================================*/

.mcb-inspiration-header{
    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;
}


/*====================================================
ENLACE
====================================================*/

.mcb-inspiration-header-link{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;
    margin:0;
    padding:0;

    border:0;
    border-radius:50%;

    background:transparent;
    color:#A41C2F;

    line-height:1;
    text-decoration:none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.mcb-inspiration-header-link:visited{
    color:#A41C2F;
}

.mcb-inspiration-header-link:hover,
.mcb-inspiration-header-link:focus,
.mcb-inspiration-header-link:active{
    color:#A41C2F;
    text-decoration:none;
}

.mcb-inspiration-header-link:focus-visible{
    outline:2px solid #A41C2F;
    outline-offset:3px;
}


/*====================================================
CORAZONES
====================================================*/

.mcb-inspiration-header-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;
}

.mcb-inspiration-header-icon .mcb-icon{
    width:24px;
    height:24px;
}

.mcb-inspiration-header-icon-empty{
    display:inline-flex;
}

.mcb-inspiration-header-icon-fill{
    display:none;
}


/*
 * Cuando existen inspiraciones:
 * ocultar el corazón lineal y mostrar el sólido.
 */
.mcb-inspiration-header-link.has-inspirations
.mcb-inspiration-header-icon-empty{
    display:none;
}

.mcb-inspiration-header-link.has-inspirations
.mcb-inspiration-header-icon-fill{
    display:inline-flex;
}


/*====================================================
CONTADOR EN SUPERÍNDICE
====================================================*/

.mcb-inspiration-header-count{
    position:absolute;
    top:0;
    right:-2px;

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:19px;
    height:19px;
    padding:0 5px;

    border:2px solid #FFFFFF;
    border-radius:999px;

    background:#A41C2F;
    color:#FFFFFF;

    font-size:11px;
    font-weight:700;
    line-height:1;

    box-shadow:
        0 2px 7px rgba(50,20,25,.18);

    pointer-events:none;
}


/*====================================================
HOVER EN DISPOSITIVOS COMPATIBLES
====================================================*/

@media (hover:hover){

    .mcb-inspiration-header-link:hover{
        background:#FAF6F4;
        transform:translateY(-1px);
    }

}


/*====================================================
TABLET Y MÓVIL
====================================================*/

@media (max-width:921px){

    .mcb-inspiration-header-link{
        width:36px;
        height:38px;
    }

    .mcb-inspiration-header-icon,
    .mcb-inspiration-header-icon .mcb-icon{
        width:22px;
        height:22px;
    }

    .mcb-inspiration-header-count{
        top:-1px;
        right:-4px;

        min-width:18px;
        height:18px;
        padding:0 4px;

        font-size:10px;
    }

}

/*====================================================
COMPARTIR TODA LA COLECCIÓN
====================================================*/

.mcb-inspirations-share-cta{
    display:flex;
    flex-direction:column;
    align-items:center;

    max-width:760px;
    margin:42px auto 0;
    padding:34px 30px;

    border:
        1px solid rgba(164,28,47,.16);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FAF6F4 100%
        );

    text-align:center;

    box-shadow:
        0 12px 34px rgba(55,24,29,.09);
}

.mcb-inspirations-share-cta[hidden]{
    display:none !important;
}


/*====================================================
TEXTOS
====================================================*/

.mcb-inspirations-share-eyebrow{
    margin:0 0 8px;

    color:#A41C2F;

    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mcb-inspirations-share-title{
    margin:0 0 10px;

    color:#2D2527;

    font-size:23px;
    font-weight:600;
    line-height:1.3;
}

.mcb-inspirations-share-description{
    max-width:560px;
    margin:0 0 22px;

    color:#5D5053;

    font-size:15px;
    line-height:1.6;
}


/*====================================================
BOTÓN PREMIUM
====================================================*/

.mcb-inspirations-page
.mcb-inspirations-share-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:50px;
    margin:0;
    padding:14px 24px;

    border:1px solid #A41C2F;
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #A41C2F,
            #821626
        );

    color:#FFFFFF;

    font-family:inherit;
    font-size:15px;
    font-weight:600;
    line-height:1;

    appearance:none;
    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(164,28,47,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

.mcb-inspirations-share-button .mcb-icon{
    width:19px;
    height:19px;
}


/*====================================================
HOVER Y FOCUS
====================================================*/

@media (hover:hover){

    .mcb-inspirations-page
    .mcb-inspirations-share-button:hover{
        color:#FFFFFF;

        transform:
            translateY(-2px);

        box-shadow:
            0 11px 28px rgba(164,28,47,.28);
    }

}

.mcb-inspirations-page
.mcb-inspirations-share-button:focus-visible{
    outline:2px solid #A41C2F;
    outline-offset:4px;
}


/*====================================================
RESPONSIVE
====================================================*/

@media (max-width:544px){

    .mcb-inspirations-share-cta{
        margin-top:30px;
        padding:28px 20px;
        border-radius:16px;
    }

    .mcb-inspirations-share-title{
        font-size:21px;
    }

    .mcb-inspirations-page
    .mcb-inspirations-share-button{
        width:100%;
        min-height:50px;
    }

}

/*====================================================
AJUSTE DEL BOTÓN COMPARTIR COLECCIÓN
Icono y texto centrados como una sola unidad
====================================================*/

.mcb-inspirations-page
.mcb-inspirations-share-button{
    justify-content:center !important;
    gap:8px;

    text-align:center;
}

/*
 * Neutraliza posibles márgenes o comportamiento
 * heredado de Astra sobre el SVG.
 */
.mcb-inspirations-page
.mcb-inspirations-share-button .mcb-icon{
    flex:0 0 19px;

    width:19px;
    height:19px;

    margin:0 !important;
}

/*
 * El texto conserva únicamente el ancho necesario
 * y puede dividirse en dos líneas sin desplazar
 * visualmente el icono.
 */
.mcb-inspirations-page
.mcb-inspirations-share-button
[data-mcb-share-collection-label]{
    flex:0 1 auto;

    width:auto;
    margin:0;

    text-align:center;
    line-height:1.18;
}


/*====================================================
AJUSTE MÓVIL
====================================================*/

@media (max-width:544px){

    .mcb-inspirations-page
    .mcb-inspirations-share-button{
        width:100%;

        min-height:50px;
        padding:12px 18px;
    }

    .mcb-inspirations-page
    .mcb-inspirations-share-button
    [data-mcb-share-collection-label]{
        /*
         * Controla el salto de línea sin permitir
         * que el texto ocupe todo el botón.
         */
        max-width:155px;
    }

}