/* ── Reset base ── */
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
body { margin: 0; padding: 0; }

/* ── Copiar al portapapeles ── */
.grph-copy {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.grph-copy::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.grph-copy:hover::after,
.grph-copy--copiado::after { opacity: 1; }

/* ── Reproductor de audio (invisible; solo aloja el player de YouTube) ── */
.audio-wrapper {
  background-color: transparent;
  max-height: 0;
  height: 0;
  overflow: hidden;
  position: relative;
  z-index: 4;
}

#controls_audio,
#cancionPlay {
  max-height: 0px;
}

/* ***************************************** */
/* SCROLLBAR */
/* ***************************************** */

:root{
	--scrollbar-width: 8px;
	--scrollbar-track-color: #404040;
	--scrollbar-thumb-color: #8c8c8c;
	--scrollbar-thumb-color-hover: #ffffff;
	--scrollbar-thumb-border-radius: 50px;
}
input {
  caret-color: auto; /* o un color visible */
}
body * {
	transition: none;
}
html{
	scroll-behavior: smooth;
	caret-color: transparent;
}
/* Estilo del contenedor que contendrá el scroll */
* { 
	scrollbar-width: var(--scrollbar-width);
}
/* Estilo de la barra de desplazamiento */
*::-webkit-scrollbar { 
	width: var(--scrollbar-width);
	height: var(--scrollbar-width);
}
/* Estilo del riel de la barra de desplazamiento */
*::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-color);
}
/* Estilo del pulgar de la barra de desplazamiento */
*::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
	border-radius: var(--scrollbar-thumb-border-radius);
}
/* Estilo del pulgar de la barra de desplazamiento cuando se pasa el ratón por encima */
*::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-color-hover);
}

/* ***************************************** */
/* GENERALES */
/* ***************************************** */
#add_calendar{
	cursor: pointer;
}
/* Intro: cubre la pantalla hasta que el JS la retira */
#introCTN{
	position: fixed;
	inset: 0;
	z-index: 4;
}
.hide{
	display: none;
}
.sello_animado{
	animation: giro 20s linear infinite;
}

@keyframes giro{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

.inConAudio,
.inSinAudio{
	cursor: pointer !important;
}
/* ***************************************** */
/* HEIGHT DE SECCIONES EN IW PLANTILLAS*/
/* ***************************************** */
.secc_mobile_height_config{
	min-height: calc(100vh - 30px) !important;
}
@media (max-height: 660px){
	.secc_mobile_height_config{
		min-height: 650px !important;
	}
}

/***********************************/
/* INTRO TOOLTIP */
/***********************************/
.intro_tooltip{
    position: relative !important;
    animation: salto 3s ease-in infinite !important;
}
.intro_tooltip:before{
   content:'';
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 9px 8px 0 8px;
   border-color: #000 transparent transparent transparent;
   transform: rotate(0deg);
   top: 100%;
   left:0;
   right: 0;
   margin: auto;
   position: absolute;
}
@keyframes salto {
  0% {
    transform: translateY(0); /* Posición inicial */
  }
  5% {
    transform: translateY(-25px); /* Salto hacia arriba */
  }
  10% {
    transform: translateY(-0px); /* Salto hacia arriba */
  }
  15% {
    transform: translateY(-10px); /* Rebote hacia abajo */
  }
  20% {
    transform: translateY(-0px); /* Salto hacia arriba */
  }
  25% {
    transform: translateY(-5px); /* Rebote hacia abajo */
  }
  30% {
    transform: translateY(0); /* Vuelve a la posición original */
  }
  100% {
    transform: translateY(0); /* Pausa en la posición inicial */
  }
}


/* ***************************************** */
/* YOUTUBE*/
/* ***************************************** */

/* 	INTRO */
#control_play,
#control_pause{
	position: fixed !important;
	bottom: 15px !important;
	width: 42px !important;
	background: #FFF !important;
	border-radius: 50px !important;
	transition: .3s linear !important;
	cursor: pointer !important;
	margin: auto !important;
	left: inherit !important;
	right: 10px !important;
	z-index: 5 !important;
	height: 42px !important;
	box-shadow: 0 0 10px rgb(39 13 36 / 10%);
	overflow: hidden;
	display: none;
}
#control_play.is-active,
#control_pause.is-active{
	display: block !important;
}

#control_pause:after{
	content:'';
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	margin: auto;
	transform: rotate(-45deg);
	background: #949494;
	width: 2px;
	height: 30px;
}


#controls_audio img {
	display: block !important;
	position: absolute !important;
	width: 80px !important;
	max-width: 80px;
	left: -20px;
	top: -18px;
	filter: grayscale(100%) !important;
}
.ctn-intro{
	cursor: pointer;
}


/* ================================================
   SLIDER (antes slider.css)
   ================================================ */

/* ================================================
   Graphica — Slider Global
   ================================================
   Estructura HTML requerida:
     <div class="grph-slider [modificadores]">
       <button class="grph-slider__prev"></button>
       <div class="grph-slider__track">
         <div class="grph-slider__slides">
           <div class="grph-slider__slide">...</div>
         </div>
       </div>
       <button class="grph-slider__next"></button>
     </div>

   Clases modificadoras (agregar al .grph-slider):
     .center-mode   → centra el slide activo, muestra vecinos
     .loop          → loop infinito (clona primer y último slide)

   Variable CSS para flecha (sobreescribir por plantilla):
     --grph-arrow: url("data:image/svg+xml,%3Csvg xmlns='ht…
================================================ */

.grph-slider {
    /* Dibujada aquí dentro y no como archivo: `../media/core/gflecha.png` no existe en
       comons, así que las flechas salían en blanco en cualquier plantilla que no
       redefiniera la variable. Un `data:` no puede dar 404. Quien quiera otra flecha
       redefine --grph-arrow en su propio estilos.css. */
    --grph-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.grph-slider__track {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.grph-slider__slides {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
    position: relative;
    z-index: 1;
}

.grph-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

/* ── Gap entre slides ── */
.grph-slider.gap-5  .grph-slider__slides { gap: 5px; }
.grph-slider.gap-10 .grph-slider__slides { gap: 10px; }
.grph-slider.gap-15 .grph-slider__slides { gap: 15px; }
.grph-slider.gap-20 .grph-slider__slides { gap: 20px; }
.grph-slider.gap-25 .grph-slider__slides { gap: 25px; }
.grph-slider.gap-30 .grph-slider__slides { gap: 30px; }

/* ── Center mode ── */
.grph-slider.center-mode { overflow: visible; }
.grph-slider.center-mode .grph-slider__track { overflow: visible; }
.grph-slider.center-mode .grph-slider__slide {
    flex: 0 0 90%;
    width: 90%;
}

/* ── Arrows ── */
.grph-slider__prev,
.grph-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.grph-slider__prev { left: 0; }
.grph-slider__next { right: 0; }

.grph-slider__prev::before,
.grph-slider__next::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    background: var(--grph-arrow) no-repeat center / contain;
}

.grph-slider__prev::before {
    transform: scaleX(-1);
}


/* ================================================
   MODAL / POPUP (antes pop.css)
   ================================================ */

/* ================================================
   Graphica — Modal / Popup Global
   ================================================
   Uso:
     Trigger: cualquier elemento con data-modal="id-del-modal"
     Modal:   <div class="grph-modal" id="...">
                <div class="grph-modal__overlay"></div>
                <div class="grph-modal__card">
                  <button class="grph-modal__close">×</button>
                  ...contenido...
                </div>
              </div>
================================================ */

@keyframes grph-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes grph-modal-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes grph-modal-slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes grph-modal-slide-down {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(40px); }
}

.grph-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.grph-modal.is-open {
    display: flex;
}

.grph-modal.is-open .grph-modal__overlay {
    animation: grph-modal-fade-in 0.3s ease forwards;
}

.grph-modal.is-open .grph-modal__card {
    animation: grph-modal-slide-up 0.3s ease forwards;
}

.grph-modal.is-closing .grph-modal__overlay {
    animation: grph-modal-fade-out 0.3s ease forwards;
}

.grph-modal.is-closing .grph-modal__card {
    animation: grph-modal-slide-down 0.3s ease forwards;
}

.grph-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.grph-modal__card {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 48px 30px 40px;
    max-width: 420px;
    width: 100%;
    z-index: 1;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.grph-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 4px 8px;
}

.grph-modal__close:hover {
    color: #333;
}

/* ── Lista de regalos: alterna listado / detalle (solo lo funcional) ── */
.regalos-modal__detalle { display: none; }
.grph-modal.is-detalle .regalos-modal__lista { display: none; }
.grph-modal.is-detalle .regalos-modal__detalle { display: block; }

/* Enviar confirmación → oculta el detalle y muestra el "gracias" */
.regalos-modal__gracias { display: none; }
.grph-modal.is-enviado .regalos-modal__conf { display: none; }
.grph-modal.is-enviado .regalos-modal__gracias { display: block; }