Events in Alicante with the Mediterranean as your backdrop

Weddings, private celebrations and corporate events at Alicante’s landmark restaurant, overlooking the sea. Mediterranean haute cuisine by Chef María José San Román – awarded with a Michelin Star, two Repsol Suns and a Sustainable Sun – comes together with a team that takes care of every detail. María José has also received the Gold Medal for Merit in Fine Arts and been chosen by the Spanish Royal Household to cook at official events.

/* ========================================================= CONFIGURACIÓN GENERAL ========================================================= */ .occasions-grid { --occasion-gap: 18px; --occasion-speed: 650ms; --occasion-card-height: 620px; --occasion-panel-padding-x: 28px; --occasion-panel-padding-bottom: 28px; --occasion-hover-title-color: #000000; position: relative; width: 100%; overflow: hidden !important; box-sizing: border-box; } .occasions-grid *, .occasions-grid *::before, .occasions-grid *::after { box-sizing: border-box; } /* ========================================================= FILA INTERNA DE ELEMENTOR ========================================================= */ .occasions-grid > .elementor-container, .occasions-grid > .elementor-container > .elementor-row { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; max-width: none !important; min-height: var(--occasion-card-height) !important; gap: var(--occasion-gap) !important; } /* ========================================================= TARJETAS ========================================================= */ .occasions-grid .occasion-card { position: relative !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: var(--occasion-card-height) !important; min-height: var(--occasion-card-height) !important; overflow: hidden !important; background: transparent !important; transition: flex-grow var(--occasion-speed) cubic-bezier(.22, .61, .36, 1); } .occasions-grid .occasion-card:hover { flex-grow: 1.55 !important; } .occasions-grid:has(.occasion-card:hover) .occasion-card:not(:hover) { flex-grow: .72 !important; } /* ========================================================= CONTENEDORES INTERNOS DE LA COLUMNA ========================================================= */ .occasions-grid .occasion-card > .elementor-column-wrap, .occasions-grid .occasion-card > .elementor-widget-wrap, .occasions-grid .occasion-card .elementor-column-wrap, .occasions-grid .occasion-card .elementor-widget-wrap { position: relative !important; width: 100% !important; height: var(--occasion-card-height) !important; min-height: var(--occasion-card-height) !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; } .occasions-grid .occasion-card .elementor-widget-wrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-end !important; } /* ========================================================= IMAGEN ========================================================= */ .occasions-grid .occasion-image { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; margin: 0 !important; overflow: hidden !important; } .occasions-grid .occasion-image .elementor-widget-container, .occasions-grid .occasion-image .elementor-image, .occasions-grid .occasion-image a, .occasions-grid .occasion-image picture { display: block !important; width: 100% !important; height: 100% !important; } .occasions-grid .occasion-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: scale(1.08); transition: transform 900ms cubic-bezier(.22, .61, .36, 1); user-select: none; pointer-events: none; -webkit-user-drag: none; } .occasions-grid .occasion-card:hover .occasion-image img { transform: scale(1); } /* ========================================================= DEGRADADO INICIAL ========================================================= */ .occasions-grid .occasion-card .elementor-widget-wrap::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 24%, rgba(0, 0, 0, 0) 56% ); opacity: 1; transition: opacity 400ms ease; pointer-events: none; } .occasions-grid .occasion-card:hover .elementor-widget-wrap::before { opacity: 0; } /* ========================================================= TÍTULO ========================================================= */ .occasions-grid .occasion-title { position: relative !important; z-index: 3 !important; width: 100% !important; margin: 0 !important; padding: 30px var(--occasion-panel-padding-x) 24px !important; background: transparent !important; transition: color 400ms ease, background-color 400ms ease, padding 400ms ease; } /* Estado normal: título blanco */ .occasions-grid .occasion-title, .occasions-grid .occasion-title *, .occasions-grid .occasion-title a { color: #ffffff !important; } /* Hover: panel blanco y título negro */ .occasions-grid .occasion-card:hover .occasion-title { padding: 26px var(--occasion-panel-padding-x) 10px !important; background: #ffffff !important; } .occasions-grid .occasion-card:hover .occasion-title, .occasions-grid .occasion-card:hover .occasion-title *, .occasions-grid .occasion-card:hover .occasion-title a { color: var(--occasion-hover-title-color) !important; } /* Elimina fondos internos del widget */ .occasions-grid .occasion-title .elementor-widget-container { margin: 0 !important; background: transparent !important; } /* Limpieza de márgenes */ .occasions-grid .occasion-title h1, .occasions-grid .occasion-title h2, .occasions-grid .occasion-title h3, .occasions-grid .occasion-title h4, .occasions-grid .occasion-title h5, .occasions-grid .occasion-title h6, .occasions-grid .occasion-title p { margin: 0 !important; } /* ========================================================= BOTÓN ========================================================= */ .occasions-grid .occasion-button { position: relative !important; z-index: 3 !important; width: 100% !important; max-height: 0; margin: 0 !important; padding: 0 var(--occasion-panel-padding-x) !important; overflow: hidden !important; background: #ffffff !important; opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: max-height 500ms cubic-bezier(.22, .61, .36, 1), padding 400ms ease, opacity 300ms ease, transform 450ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 500ms; } .occasions-grid .occasion-card:hover .occasion-button { max-height: 120px; padding: 4px var(--occasion-panel-padding-x) var(--occasion-panel-padding-bottom) !important; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: max-height 500ms cubic-bezier(.22, .61, .36, 1), padding 400ms ease, opacity 350ms ease 80ms, transform 450ms cubic-bezier(.22, .61, .36, 1), visibility 0s; } .occasions-grid .occasion-button .elementor-widget-container { margin: 0 !important; background: transparent !important; } /* Botón transparente y negro */ .occasions-grid .occasion-button .elementor-button { border: 0 !important; background: transparent !important; color: #000000 !important; box-shadow: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .occasions-grid { --occasion-gap: 14px; --occasion-card-height: 520px; --occasion-panel-padding-x: 22px; --occasion-panel-padding-bottom: 24px; } .occasions-grid .occasion-card:hover { flex-grow: 1.4 !important; } .occasions-grid:has(.occasion-card:hover) .occasion-card:not(:hover) { flex-grow: .8 !important; } .occasions-grid .occasion-title { padding: 26px var(--occasion-panel-padding-x) 20px !important; } .occasions-grid .occasion-card:hover .occasion-title { padding: 22px var(--occasion-panel-padding-x) 8px !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 767px) { .occasions-grid { --occasion-gap: 18px; --occasion-card-height: auto; --occasion-panel-padding-x: 20px; --occasion-panel-padding-bottom: 24px; overflow: visible !important; } .occasions-grid > .elementor-container, .occasions-grid > .elementor-container > .elementor-row { flex-direction: column !important; min-height: 0 !important; gap: var(--occasion-gap) !important; } .occasions-grid .occasion-card, .occasions-grid .occasion-card:hover, .occasions-grid:has(.occasion-card:hover) .occasion-card:not(:hover) { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; } .occasions-grid .occasion-card > .elementor-column-wrap, .occasions-grid .occasion-card > .elementor-widget-wrap, .occasions-grid .occasion-card .elementor-column-wrap, .occasions-grid .occasion-card .elementor-widget-wrap { height: auto !important; min-height: 0 !important; overflow: visible !important; } .occasions-grid .occasion-image { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; } .occasions-grid .occasion-image img, .occasions-grid .occasion-card:hover .occasion-image img { transform: none; } .occasions-grid .occasion-card .elementor-widget-wrap::before { display: none; } .occasions-grid .occasion-title, .occasions-grid .occasion-card:hover .occasion-title { padding: 22px var(--occasion-panel-padding-x) 10px !important; background: #ffffff !important; } .occasions-grid .occasion-title, .occasions-grid .occasion-title *, .occasions-grid .occasion-title a, .occasions-grid .occasion-card:hover .occasion-title, .occasions-grid .occasion-card:hover .occasion-title *, .occasions-grid .occasion-card:hover .occasion-title a { color: #000000 !important; } .occasions-grid .occasion-button, .occasions-grid .occasion-card:hover .occasion-button { max-height: 120px; padding: 0 var(--occasion-panel-padding-x) var(--occasion-panel-padding-bottom) !important; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } } /* ========================================================= MOVIMIENTO REDUCIDO ========================================================= */ @media (prefers-reduced-motion: reduce) { .occasions-grid .occasion-card, .occasions-grid .occasion-image img, .occasions-grid .occasion-title, .occasions-grid .occasion-button, .occasions-grid .occasion-card .elementor-widget-wrap::before { transition-duration: 1ms !important; } }

Every event begins with an idea

We bring yours to life

Tell us what you have in mind and we’ll shape it into an experience that feels entirely your own. At Monastrell, food,
setting and service come together effortlessly, leaving you free to enjoy the occasion. Whether you are planning an intimate celebration or a large gathering, our team will help you choose the space, format and menu that suit it best.

Our spaces

Monastrell can welcome up to 500 guests across four distinct spaces, each framed by the Mediterranean and with a character of its own.

/* ========================================================= CONFIGURACIÓN GENERAL ========================================================= */ .destinations-carousel { --destination-gap: 16px; --destination-speed: 650ms; /* Composición */ --destination-card-width: 27.5vw; --destination-side-peek: 4.5vw; /* Espaciado interior */ --destination-content-padding: 42px; --destination-image-gap: 40px; --destination-kicker-gap: 20px; --destination-title-gap: 24px; --destination-description-gap: 30px; --destination-card-bottom: 40px; /* Imagen */ --destination-image-ratio: 16 / 9; /* Colores */ --destination-carousel-background: #EEE1CF; --destination-card-background: #ffffff; --destination-card-border: #e5e2dc; /* Etiquetas */ --destination-capacity-background: #202521; --destination-capacity-color: #ffffff; position: relative; width: 100%; overflow: hidden !important; background: var(--destination-carousel-background); box-sizing: border-box; } /* ========================================================= VARIANTE: 1/4 BLANCO + 3/4 BEIGE ========================================================= */ .destinations-carousel.destinations-carousel--split-bg { background: linear-gradient( to bottom, #ffffff 0%, #ffffff 25%, var(--destination-carousel-background) 25%, var(--destination-carousel-background) 100% ); } .destinations-carousel *, .destinations-carousel *::before, .destinations-carousel *::after { box-sizing: border-box; } /* ========================================================= PISTA ========================================================= */ .destinations-carousel .destination-track { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; width: max-content !important; max-width: none !important; gap: var(--destination-gap) !important; cursor: grab; user-select: none; touch-action: pan-y; will-change: transform; transform: translate3d(0, 0, 0); } .destinations-carousel .destination-track-dragging { cursor: grabbing !important; } .destinations-carousel .destination-track-animated { transition: transform var(--destination-speed) cubic-bezier(.22, .61, .36, 1); } /* ========================================================= CARDS ========================================================= */ .destinations-carousel .destination-card { position: relative !important; display: flex !important; flex-direction: column !important; flex: 0 0 var(--destination-card-width) !important; width: var(--destination-card-width) !important; min-width: var(--destination-card-width) !important; max-width: none !important; align-self: stretch !important; padding: 0 0 var(--destination-card-bottom) !important; border: 1px solid var(--destination-card-border); background: var(--destination-card-background); } /* ========================================================= ESTRUCTURA INTERNA ========================================================= */ .destinations-carousel .destination-card, .destinations-carousel .destination-card > .elementor-column-wrap, .destinations-carousel .destination-card > .elementor-widget-wrap, .destinations-carousel .destination-card .elementor-column-wrap, .destinations-carousel .destination-card .elementor-widget-wrap { height: 100%; } .destinations-carousel .destination-card .elementor-widget-wrap { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; } .destinations-carousel .destination-card .e-con-inner { display: flex !important; flex-direction: column !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; width: 100% !important; height: 100% !important; } /* ========================================================= IMAGEN ========================================================= */ .destinations-carousel .destination-card .elementor-widget-image { flex: 0 0 auto !important; width: 100% !important; aspect-ratio: var(--destination-image-ratio); margin: 0 0 var(--destination-image-gap) !important; padding: 0 !important; overflow: hidden !important; } .destinations-carousel .destination-card .elementor-widget-image .elementor-widget-container, .destinations-carousel .destination-card .elementor-widget-image .elementor-image, .destinations-carousel .destination-card .elementor-widget-image a, .destinations-carousel .destination-card .elementor-widget-image picture { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .destinations-carousel .destination-card img { display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; object-position: center !important; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* ========================================================= ETIQUETA DE CAPACIDAD ========================================================= */ .destinations-carousel .destination-capacity-group { position: absolute !important; z-index: 50; top: 22px; left: 22px; display: inline-flex !important; align-items: center; width: auto !important; max-width: calc(100% - 44px); padding: 11px 14px !important; background: var(--destination-capacity-background); color: var(--destination-capacity-color); pointer-events: none; } /* ========================================================= CADA DATO ========================================================= */ .destinations-carousel .destination-capacity-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .04em; } /* ========================================================= DIVISOR ========================================================= */ .destinations-carousel .destination-capacity-divider { flex: 0 0 auto; width: 1px; height: 17px; margin: 0 12px; background: currentColor; opacity: .4; } /* ========================================================= ICONOS ========================================================= */ .destinations-carousel .capacity-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; } .destinations-carousel .capacity-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= NÚMERO ========================================================= */ .destinations-carousel .capacity-number { font-weight: 600; } /* ========================================================= CONTENIDO ========================================================= */ .destinations-carousel .destination-card-kicker, .destinations-carousel .destination-card-title, .destinations-carousel .destination-card-description, .destinations-carousel .destination-card-button { width: calc( 100% - ( var(--destination-content-padding) * 2 ) ) !important; margin-left: var(--destination-content-padding) !important; margin-right: var(--destination-content-padding) !important; } /* ========================================================= KICKER ========================================================= */ .destinations-carousel .destination-card-kicker { flex: 0 0 auto !important; margin-top: 0 !important; margin-bottom: var(--destination-kicker-gap) !important; padding: 0 !important; } /* ========================================================= TÍTULO ========================================================= */ .destinations-carousel .destination-card-title { flex: 0 0 auto !important; margin-top: 0 !important; margin-bottom: var(--destination-title-gap) !important; padding: 0 !important; } /* ========================================================= DESCRIPCIÓN ========================================================= */ .destinations-carousel .destination-card-description { flex: 0 0 auto !important; margin-top: 0 !important; margin-bottom: var(--destination-description-gap) !important; padding: 0 !important; } /* ========================================================= CTA ========================================================= */ .destinations-carousel .destination-card-button { position: relative; z-index: 20; flex: 0 0 auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; pointer-events: auto; } /* ========================================================= LIMPIAR MÁRGENES ========================================================= */ .destinations-carousel .destination-card-kicker .elementor-widget-container, .destinations-carousel .destination-card-title .elementor-widget-container, .destinations-carousel .destination-card-description .elementor-widget-container, .destinations-carousel .destination-card-button .elementor-widget-container { width: 100%; margin: 0 !important; padding: 0 !important; } .destinations-carousel .destination-card-kicker p, .destinations-carousel .destination-card-kicker div, .destinations-carousel .destination-card-title h1, .destinations-carousel .destination-card-title h2, .destinations-carousel .destination-card-title h3, .destinations-carousel .destination-card-title h4, .destinations-carousel .destination-card-title h5, .destinations-carousel .destination-card-title h6, .destinations-carousel .destination-card-description p, .destinations-carousel .destination-card-description div { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= ALINEACIÓN ========================================================= */ .destinations-carousel .destination-card-kicker, .destinations-carousel .destination-card-title, .destinations-carousel .destination-card-description { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } /* ========================================================= FLECHAS ========================================================= */ .destinations-generated-arrows { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; margin-top: 0; padding: 28px 0 70px; background: #EEE1CF; } .destinations-generated-arrow { display: grid; place-items: center; width: 48px; height: 44px; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #222; box-shadow: none !important; cursor: pointer; transition: transform .25s ease, opacity .25s ease; } .destinations-generated-arrow:hover, .destinations-generated-arrow:focus, .destinations-generated-arrow:active { border: 0 !important; background: transparent !important; color: #222; box-shadow: none !important; } .destinations-generated-arrow.destinations-prev:hover { transform: translateX(-4px); } .destinations-generated-arrow.destinations-next:hover { transform: translateX(4px); } .destinations-generated-arrow:active { opacity: .5; } .destinations-generated-arrow:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; } .destinations-generated-arrow svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .destinations-carousel { --destination-gap: 16px; --destination-card-width: 42vw; --destination-side-peek: 5vw; --destination-content-padding: 30px; --destination-image-gap: 30px; --destination-kicker-gap: 14px; --destination-title-gap: 20px; --destination-description-gap: 20px; --destination-card-bottom: 32px; --destination-image-ratio: 16 / 9; } .destinations-carousel .destination-capacity-group { top: 18px; left: 18px; max-width: calc(100% - 36px); padding: 9px 11px !important; } .destinations-carousel .destination-capacity-item { gap: 5px; font-size: 11px; } .destinations-carousel .destination-capacity-divider { height: 15px; margin: 0 9px; } .destinations-carousel .capacity-icon { width: 16px; height: 16px; } .destinations-generated-arrows { padding: 26px 0 60px; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 767px) { .destinations-carousel { --destination-gap: 14px; --destination-card-width: 84vw; --destination-side-peek: 8vw; --destination-content-padding: 22px; --destination-image-gap: 24px; --destination-kicker-gap: 10px; --destination-title-gap: 16px; --destination-description-gap: 18px; --destination-card-bottom: 26px; --destination-image-ratio: 16 / 9; } /* ===================================================== ETIQUETAS ===================================================== */ .destinations-carousel .destination-capacity-group { top: 14px; left: 14px; max-width: calc(100% - 28px); padding: 8px 9px !important; } .destinations-carousel .destination-capacity-item { gap: 4px; font-size: 10px; } .destinations-carousel .destination-capacity-divider { height: 14px; margin: 0 7px; } .destinations-carousel .capacity-icon { width: 15px; height: 15px; } /* ===================================================== FLECHAS ===================================================== */ .destinations-generated-arrows { gap: 20px; padding: 22px 0 48px; } .destinations-generated-arrow { width: 42px; height: 38px; } .destinations-generated-arrow svg { width: 31px; height: 31px; } } /* ========================================================= MOVIMIENTO REDUCIDO ========================================================= */ @media (prefers-reduced-motion: reduce) { .destinations-carousel .destination-track-animated { transition-duration: 1ms; } .destinations-generated-arrow { transition: none; } } (function () { "use strict"; function initializeDestinationCarousels() { document .querySelectorAll( ".destinations-carousel" ) .forEach( function (carousel) { if ( carousel.dataset .destinationCarouselReady === "true" ) { return; } /* ================================================= PISTA ================================================= */ let track = carousel.querySelector( ":scope > .elementor-container > .elementor-row" ); if (!track) { track = carousel.querySelector( ":scope > .elementor-container" ); } if (!track) { console.warn( "No se ha encontrado la pista del carrusel.", carousel ); return; } /* ================================================= CARDS ORIGINALES ================================================= */ const originalSlides = Array.from( track.children ) .filter( function (element) { return element .classList .contains( "destination-card" ); } ); if ( originalSlides.length /g, ">" ) .replace( /"/g, """ ) .replace( /'/g, "'" ); } /* ================================================= CAPACIDADES ================================================= */ originalSlides .forEach( function (card) { if ( card.querySelector( ".destination-capacity-group" ) ) { return; } const cocktail = ( card.getAttribute( "data-cocktail" ) || "" ).trim(); const banquet = ( card.getAttribute( "data-banquet" ) || "" ).trim(); /* * Si no hay valores, * no añadimos la etiqueta. */ if ( !cocktail && !banquet ) { return; } const capacity = document.createElement( "div" ); capacity.className = "destination-capacity-group"; let html = ""; /* ================================================= CÓCTEL ================================================= */ if (cocktail) { html += `
${escapeHTML(cocktail)}
`; } /* ================================================= DIVISOR ================================================= */ if ( cocktail && banquet ) { html += ` `; } /* ================================================= BANQUETE ================================================= */ if (banquet) { html += `
${escapeHTML(banquet)}
`; } capacity.innerHTML = html; card.appendChild( capacity ); } ); /* ================================================= ELEMENTOS A ALINEAR ================================================= */ const alignedSelectors = [ ".destination-card-kicker", ".destination-card-title", ".destination-card-description" ]; /* ================================================= UTILIDADES ================================================= */ function getAllSlides() { return Array.from( track.children ) .filter( function (element) { return element .classList .contains( "destination-card" ); } ); } function resetElementHeight( element ) { if (!element) { return; } element.style .removeProperty( "height" ); element.style .removeProperty( "min-height" ); } function resetCardHeight( card ) { if (!card) { return; } card.style .removeProperty( "height" ); card.style .removeProperty( "min-height" ); } function getNaturalHeight( element ) { if (!element) { return 0; } resetElementHeight( element ); const container = element.querySelector( ":scope > .elementor-widget-container" ) || element; return Math.max( element.scrollHeight, element .getBoundingClientRect() .height, container.scrollHeight, container .getBoundingClientRect() .height ); } /* ================================================= MEDIR FILAS ================================================= */ function measureRows() { const measurements = {}; alignedSelectors .forEach( function (selector) { originalSlides .forEach( function (slide) { resetElementHeight( slide.querySelector( selector ) ); } ); void carousel.offsetHeight; let maximumHeight = 0; originalSlides .forEach( function (slide) { const element = slide.querySelector( selector ); maximumHeight = Math.max( maximumHeight, getNaturalHeight( element ) ); } ); measurements[ selector ] = Math.ceil( maximumHeight ); } ); return measurements; } /* ================================================= APLICAR ALTURAS ================================================= */ function applyRowMeasurements( measurements ) { const allSlides = getAllSlides(); alignedSelectors .forEach( function (selector) { const height = measurements[ selector ]; allSlides .forEach( function (slide) { const element = slide.querySelector( selector ); if (!element) { return; } element.style .setProperty( "height", height + "px", "important" ); element.style .setProperty( "min-height", height + "px", "important" ); } ); } ); } /* ================================================= ALTURA TOTAL CARDS ================================================= */ function measureMaximumCardHeight() { let maximumHeight = 0; originalSlides .forEach( function (slide) { resetCardHeight( slide ); } ); void carousel.offsetHeight; originalSlides .forEach( function (slide) { maximumHeight = Math.max( maximumHeight, slide.scrollHeight, slide .getBoundingClientRect() .height ); } ); return Math.ceil( maximumHeight ); } function applyCardHeight( height ) { getAllSlides() .forEach( function (slide) { slide.style .setProperty( "height", height + "px", "important" ); slide.style .setProperty( "min-height", height + "px", "important" ); } ); } /* ================================================= CLONES ================================================= */ const cloneCount = originalSlides.length; function disableCloneInteractions( clone ) { clone .querySelectorAll( "a, button, input, select, textarea, [tabindex]" ) .forEach( function (element) { element.setAttribute( "tabindex", "-1" ); } ); } /* ================================================= CLONES ANTERIORES ================================================= */ originalSlides .slice() .reverse() .forEach( function (slide) { const clone = slide.cloneNode( true ); clone.classList.add( "destination-card-clone" ); clone.setAttribute( "aria-hidden", "true" ); disableCloneInteractions( clone ); track.prepend( clone ); } ); /* ================================================= CLONES POSTERIORES ================================================= */ originalSlides .forEach( function (slide) { const clone = slide.cloneNode( true ); clone.classList.add( "destination-card-clone" ); clone.setAttribute( "aria-hidden", "true" ); disableCloneInteractions( clone ); track.append( clone ); } ); /* ================================================= ESTADO ================================================= */ let currentIndex = cloneCount; let isAnimating = false; let isDragging = false; let startX = 0; let dragDistance = 0; let suppressClick = false; /* ================================================= MEDIDAS ================================================= */ function getGap() { const styles = window.getComputedStyle( track ); return ( parseFloat( styles.columnGap ) || parseFloat( styles.gap ) || 0 ); } function getSlideWidth() { const slide = getAllSlides()[0]; return slide ? slide .getBoundingClientRect() .width : 0; } function getStep() { return ( getSlideWidth() + getGap() ); } /* ================================================= SIDE PEEK ================================================= */ function getSidePeek() { const styles = window.getComputedStyle( carousel ); const value = styles .getPropertyValue( "--destination-side-peek" ) .trim(); const probe = document.createElement( "div" ); probe.style.position = "absolute"; probe.style.visibility = "hidden"; probe.style.pointerEvents = "none"; probe.style.width = value || "0px"; carousel.appendChild( probe ); const width = probe .getBoundingClientRect() .width; probe.remove(); return width; } /* ================================================= POSICIÓN ================================================= */ function getPosition() { return ( -( currentIndex * getStep() ) + getSidePeek() ); } /* ================================================= RENDER ================================================= */ function render( animate, extraOffset ) { extraOffset = extraOffset || 0; track.classList.toggle( "destination-track-animated", animate ); track.style.transform = "translate3d(" + ( getPosition() + extraOffset ) + "px, 0, 0)"; } /* ================================================= RECALCULAR ================================================= */ function refreshLayout() { getAllSlides() .forEach( function (slide) { resetCardHeight( slide ); alignedSelectors .forEach( function (selector) { resetElementHeight( slide.querySelector( selector ) ); } ); } ); void carousel.offsetHeight; const rowMeasurements = measureRows(); applyRowMeasurements( rowMeasurements ); window .requestAnimationFrame( function () { const cardHeight = measureMaximumCardHeight(); applyCardHeight( cardHeight ); render( false ); } ); } /* ================================================= NORMALIZAR LOOP ================================================= */ function normalizePosition() { const total = originalSlides.length; if ( currentIndex >= cloneCount + total ) { currentIndex -= total; render( false ); } if ( currentIndex < cloneCount ) { currentIndex += total; render( false ); } isAnimating = false; } /* ================================================= MOVER ================================================= */ function move( direction ) { if ( isAnimating || isDragging ) { return; } isAnimating = true; currentIndex += direction; render( true ); } /* ================================================= FLECHAS ================================================= */ const arrows = document.createElement( "div" ); arrows.className = "destinations-generated-arrows"; arrows.innerHTML = ` `; carousel .insertAdjacentElement( "afterend", arrows ); arrows .querySelector( ".destinations-prev" ) .addEventListener( "click", function () { move( -1 ); } ); arrows .querySelector( ".destinations-next" ) .addEventListener( "click", function () { move( 1 ); } ); /* ================================================= FIN TRANSICIÓN ================================================= */ track.addEventListener( "transitionend", function (event) { if ( event.target !== track || event.propertyName !== "transform" ) { return; } normalizePosition(); } ); /* ================================================= ARRASTRE ================================================= */ function pointerDown( event ) { if ( event.target.closest( "a, button, input, select, textarea, label" ) ) { return; } if ( event.pointerType === "mouse" && event.button !== 0 ) { return; } if ( isAnimating ) { return; } isDragging = true; suppressClick = false; startX = event.clientX; dragDistance = 0; track.classList.add( "destination-track-dragging" ); if ( track .setPointerCapture ) { track .setPointerCapture( event.pointerId ); } render( false ); } function pointerMove( event ) { if ( !isDragging ) { return; } dragDistance = event.clientX - startX; if ( Math.abs( dragDistance ) > 8 ) { suppressClick = true; } render( false, dragDistance ); } function pointerEnd( event ) { if ( !isDragging ) { return; } isDragging = false; track.classList.remove( "destination-track-dragging" ); if ( track .releasePointerCapture && track .hasPointerCapture && track .hasPointerCapture( event.pointerId ) ) { track .releasePointerCapture( event.pointerId ); } if ( Math.abs( dragDistance ) <= 8 ) { dragDistance = 0; suppressClick = false; render( false ); return; } const threshold = Math.min( 110, Math.max( 45, getStep() * .16 ) ); if ( dragDistance = threshold ) { currentIndex -= 1; } isAnimating = true; render( true ); dragDistance = 0; } track.addEventListener( "pointerdown", pointerDown ); track.addEventListener( "pointermove", pointerMove ); track.addEventListener( "pointerup", pointerEnd ); track.addEventListener( "pointercancel", pointerEnd ); track.addEventListener( "dragstart", function (event) { event.preventDefault(); } ); track.addEventListener( "click", function (event) { if ( !suppressClick ) { return; } event.preventDefault(); event.stopPropagation(); suppressClick = false; }, true ); /* ================================================= TECLADO ================================================= */ carousel.setAttribute( "tabindex", "0" ); carousel.setAttribute( "aria-label", "Carrusel de espacios" ); carousel.addEventListener( "keydown", function (event) { if ( event.key === "ArrowLeft" ) { event.preventDefault(); move( -1 ); } if ( event.key === "ArrowRight" ) { event.preventDefault(); move( 1 ); } } ); /* ================================================= RESIZE ================================================= */ let resizeTimer; window.addEventListener( "resize", function () { window.clearTimeout( resizeTimer ); resizeTimer = window.setTimeout( refreshLayout, 180 ); } ); /* ================================================= PRIMER RENDER ================================================= */ window .requestAnimationFrame( function () { window .requestAnimationFrame( refreshLayout ); } ); /* ================================================= IMÁGENES ================================================= */ carousel .querySelectorAll( "img" ) .forEach( function (image) { if ( !image.complete ) { image .addEventListener( "load", refreshLayout, { once: true } ); } } ); /* ================================================= FUENTES ================================================= */ if ( document.fonts && document.fonts.ready ) { document.fonts .ready .then( refreshLayout ); } } ); } /* ========================================================= INICIALIZADORES ========================================================= */ document.addEventListener( "DOMContentLoaded", initializeDestinationCarousels ); window.addEventListener( "load", initializeDestinationCarousels ); window.addEventListener( "elementor/frontend/init", initializeDestinationCarousels ); window.setTimeout( initializeDestinationCarousels, 600 ); })();

Request your personalized proposal and receive our event brochure
using the form below.

@font-face { font-display: block; font-family: Roboto; src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff") } @font-face { font-display: fallback; font-family: Roboto; font-weight: 600; src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff") } @font-face { font-display: fallback; font-family: Roboto; font-weight: 700; src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff") } #sib-container input:-ms-input-placeholder { text-align: left; font-family: Helvetica, sans-serif; color: #c0ccda; } #sib-container input::placeholder { text-align: left; font-family: Helvetica, sans-serif; color: #c0ccda; } #sib-container textarea::placeholder { text-align: left; font-family: Helvetica, sans-serif; color: #c0ccda; } #sib-container a { text-decoration: underline; color: #2BB2FC; } :root{ --gold:#978259; /* color del botón/bordes */ --line:#cdbb95; /* línea bajo inputs */ --text:#000; --muted:#777; } /* Contenedor */ #sib-container{ max-width:680px !important; background:#fff !important; border:1px solid var(--gold) !important; border-radius:4px !important; padding:24px 22px !important; } /* Grid del formulario (2 columnas) */ #sib-form{ display:grid !important; grid-template-columns:1fr 1fr; gap:22px 28px; align-items:start; } #sib-form > div{ padding:0 !important; margin:0 !important; } /* Colocación (desktop) sin tocar el HTML */ /* 1: Nombre (col 1) */ #sib-form > div:nth-of-type(1){ grid-column:1; } /* 2: Apellidos (col 2) */ #sib-form > div:nth-of-type(2){ grid-column:2; } /* 3: Teléfono (col 2, fila 2) */ #sib-form > div:nth-of-type(3){ grid-column:1; } /* 4: Email (col 1, fila 2) */ #sib-form > div:nth-of-type(4){ grid-column:2; } /* 5: Fecha (col 1) */ #sib-form > div:nth-of-type(5){ grid-column:1; } /* 6: Tipo de evento (col 2) */ #sib-form > div:nth-of-type(6){ grid-column:2; } /* 7: Restaurante (col 1) */ #sib-form > div:nth-of-type(7){ grid-column:1; } /* 8: Nº Personas (col 2) */ #sib-form > div:nth-of-type(8){ grid-column:2; } /* 9: Mensaje (full) */ #sib-form > div:nth-of-type(9){ grid-column:1 / -1; } /* 10: Texto legal (full) */ #sib-form > div:nth-of-type(10){ grid-column:1 / -1; } /* 11: Opt-in 1 (full) */ #sib-form > div:nth-of-type(11){ grid-column:1 / -1; } /* 12: Opt-in 2 (full) */ #sib-form > div:nth-of-type(12){ grid-column:1 / -1; } /* 13: Botón (col 1) */ #sib-form > div:nth-of-type(13){ grid-column:1; text-align:left !important; } /* Labels + asterisco */ #sib-container .entry__label{ font:400 16px/1.25 Helvetica,Arial,sans-serif !important; color:var(--text) !important; margin:0 0 8px !important; } #sib-container .entry__label[data-required="*"]::after{ content:" *"; color:#c10000; font-weight:700; } /* Inputs con solo línea inferior */ #sib-container .input{ width:100% !important; height:34px !important; padding:4px 4px !important; border:none !important; border-bottom:2px solid var(--line) !important; border-radius:0 !important; background:#fff !important; font:400 15px/1.2 Helvetica,Arial,sans-serif !important; color:var(--text) !important; } #sib-container .input::placeholder{ color:#b5b5b5 !important; } /* Textarea con fondo gris suave */ #sib-container textarea.input{ min-height:120px !important; height:auto !important; padding:10px 12px !important; border:1px solid var(--line) !important; border-radius:0 !important; background:#f5f5f5 !important; } /* Select: flecha nativa, misma línea inferior */ #sib-container select.input{ appearance:auto !important; -webkit-appearance:menulist !important; -moz-appearance:menulist !important; border-bottom:2px solid var(--line) !important; padding-right:10px !important; background-image:none !important; } /* Errores y especificaciones */ #sib-container .entry__error{ font:400 14px/1.35 Helvetica,Arial !important; color:#661d1d !important; background:#ffeded !important; border:1px solid #ff4949 !important; border-radius:3px !important; padding:8px !important; margin-top:8px !important; } #sib-container .entry__specification{ display:block !important; margin-top:6px !important; font:400 12px/1.2 Helvetica,Arial !important; color:#999 !important; } /* Texto legal */ .sib-text-form-block p{ margin:0 !important; color:#000 !important; font:400 14px/1.5 Helvetica,Arial !important; } /* Opt-ins */ .entry_mcq label{ display:flex; gap:10px; align-items:flex-start; } .entry_mcq p{ margin:0; font:400 14px/1.5 Helvetica,Arial; color:#000; } /* Botón dorado */ .sib-form-block__button{ font:700 16px/1 Helvetica,Arial !important; background:var(--gold) !important; color:#fff !important; border:0 !important; border-radius:8px !important; padding:12px 22px !important; cursor:pointer !important; pointer-events:auto !important; } /* Responsive: 1 columna */ @media (max-width:700px){ #sib-form{ grid-template-columns:1fr; } #sib-form > div{ grid-column:1 / -1 !important; } }
We have been unable to validate your form.
The form has been completed correctly.
Select 1 value Wedding Anniversary Birthday Corporate event Other Company or committee meeting Corporate or networking event Family celebration Communion or Baptism
Select 1 value Vaquería Mediterránea Monastrell Tribeca La Taberna del Gourmet I’m not sure. What would be recommended?

Basic information on data protection.- In accordance with the GDPR and the LOPDGDD, GAPEHOLD, SLU will process the data provided for the purpose of responding to queries and/or complaints submitted via this form and providing the requested information. Provided you give us your prior authorisation, we will send you information related to the services offered by GAPEHOLD, SLU. If you wish, you may exercise your rights of access, rectification, erasure and other rights recognised in the aforementioned regulations. For more information about how we process your data, please see our privacy policy.

window.REQUIRED_CODE_ERROR_MESSAGE = 'Elige un código de país'; window.LOCALE = 'es'; window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "La información que ha proporcionado no es válida. Compruebe el formato del campo e inténtelo de nuevo."; window.REQUIRED_ERROR_MESSAGE = "Este campo no puede quedarse vacío. "; window.GENERIC_INVALID_MESSAGE = "La información que ha proporcionado no es válida. Compruebe el formato del campo e inténtelo de nuevo."; window.INVALID_NUMBER = "La información que ha proporcionado no es válida. Compruebe el formato del campo e inténtelo de nuevo."; window.INVALID_DATE = "Introduce una fecha válida"; window.REQUIRED_MULTISELECT_MESSAGE = 'Selecciona al menos una opción'; window.translation = { common: { selectedList: '{quantity} lista seleccionada', selectedLists: '{quantity} listas seleccionadas', selectedOption: '{quantity} seleccionado', selectedOptions: '{quantity} seleccionados', } }; var AUTOHIDE = Boolean(0);

FREQUENTLY ASKED QUESTIONS

We host weddings, anniversaries, birthdays, family celebrations, corporate lunches and

Capacity depends on the space and event format. Our team will recommend the best option for your guest numbers and the needs of the occasion.

Yes. We design each menu around the type and format of the event, the season and your guests’ needs. We can
also accommodate allergies, intolerances and dietary preferences when notified in advance.

Of course. We can arrange a visit so you can see the different spaces and talk us through how you imagine your event.

Yes. Depending on the event, we can arrange furniture, styling, floral decoration, welcome drinks, bar service and other details. These will all be included in your tailored proposal.

The price depends on the space, format and number of guests. Smaller groups can choose a set menu while sharing a dining room; exclusive events reserve an entire space for your party. Tell us what you have in mind and we will prepare a tailored proposal.

Chef María José San Román has led Monastrell’s kitchen since 1996 and is CEO of Grupo María José San Román. Her cuisine has been awarded a Michelin Star, two Repsol Suns and a Sustainable Sun. She has also received the Gold Medal for Merit in Fine Arts. An ambassador for the Mediterranean diet, she has been chosen by the Spanish Royal Household to cook at official events.

Yes. A welcome event is often the first chapter of the wedding celebration. At Monastrell, we can host it as a relaxed cocktail reception overlooking Alicante’s harbour, with live cooking stations such as grilling, carving and oyster shucking – an ideal way to welcome guests arriving from further afield.

A relaxed cocktail reception with live stations works particularly well. It helps different groups mingle naturally, creates a sociable atmosphere and needs no formal seating plan. We can adapt the format for anything from an intimate gathering to a larger welcome celebration.

Yes. We can arrange extra virgin olive oil or vinegar tastings, as well as rice workshops, for pre-wedding celebrations, hen or stag parties and corporate events, all shaped by María José San Román’s Mediterranean approach.

The Cloister, on the ground floor, is home to Monastrell’s Mediterranean haute cuisine. Beside it, The Viewpoint can open fully to the Mediterranean or be enclosed and climate-controlled. The Royal Chamber, on the first floor, is our most private space. The Sky of Alicante, on the second floor, is a terrace with its own bar and views of the sea and Santa Bárbara Castle.

We recommend contacting us as soon as you have an approximate date, particularly for weddings or events with more than 20 guests, to give you the best choice of spaces.

Yes. We tailor each menu around any allergies, intolerances and dietary preferences communicated in advance.

Yes. Overlooking Alicante’s harbour, Monastrell regularly welcomes weddings with guests travelling from abroad and can host both the main celebration and a pre-wedding welcome event.

/* ========================================================= MOSTRAR SOLO LOS PRIMEROS 5 ELEMENTOS ========================================================= */ .acordeon-limitado .elementor-accordion-item:nth-child(n+6) { display: none; } .acordeon-limitado.acordeon-abierto .elementor-accordion-item { display: block; } /* ========================================================= BOTÓN ========================================================= */ .boton-ver-acordeon { --cta-color: #202521; --cta-line-height: 1px; --cta-line-gap: 7px; --cta-speed: 500ms; --cta-icon-space: 8px; display: flex; align-items: center; justify-content: center; gap: var(--cta-icon-space); width: fit-content; min-width: 0; margin: 20px auto 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--cta-color); font: inherit; cursor: pointer; text-decoration: none; box-shadow: none; overflow: visible; transition: color 300ms ease, opacity 300ms ease; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .boton-ver-acordeon:hover, .boton-ver-acordeon:focus, .boton-ver-acordeon:focus-visible, .boton-ver-acordeon:active { border: 0; border-radius: 0; background: transparent; color: var(--cta-color); text-decoration: none; box-shadow: none; } /* ========================================================= TEXTO Y SUBRAYADO ========================================================= */ .boton-ver-acordeon__contenido { position: relative; display: inline-flex; align-items: center; padding-bottom: var(--cta-line-gap); overflow: hidden; } .boton-ver-acordeon__texto { white-space: nowrap; } .boton-ver-acordeon__contenido::before, .boton-ver-acordeon__contenido::after { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: var(--cta-line-height); background: currentColor; opacity: 1; visibility: visible; pointer-events: none; will-change: transform; } /* Línea visible inicialmente */ .boton-ver-acordeon__contenido::before { transform: translate3d(0, 0, 0); } /* Línea preparada a la izquierda */ .boton-ver-acordeon__contenido::after { transform: translate3d(-105%, 0, 0); } /* ========================================================= ANIMACIÓN CON RATÓN ========================================================= */ @media (hover: hover) and (pointer: fine) { .boton-ver-acordeon__contenido::before, .boton-ver-acordeon__contenido::after { transition: transform var(--cta-speed) cubic-bezier(.76, 0, .24, 1); } .boton-ver-acordeon:hover .boton-ver-acordeon__contenido::before, .boton-ver-acordeon:focus-visible .boton-ver-acordeon__contenido::before { transform: translate3d(105%, 0, 0); } .boton-ver-acordeon:hover .boton-ver-acordeon__contenido::after, .boton-ver-acordeon:focus-visible .boton-ver-acordeon__contenido::after { transform: translate3d(0, 0, 0); } } /* ========================================================= ANIMACIÓN TÁCTIL ========================================================= */ @keyframes acordeon-touch-line-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(105%, 0, 0); } } @keyframes acordeon-touch-line-in { from { transform: translate3d(-105%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (hover: none), (pointer: coarse) { /* * Estado normal en móvil: * primera línea visible y segunda preparada. */ .boton-ver-acordeon .boton-ver-acordeon__contenido::before, .boton-ver-acordeon:hover .boton-ver-acordeon__contenido::before, .boton-ver-acordeon:focus .boton-ver-acordeon__contenido::before, .boton-ver-acordeon:active .boton-ver-acordeon__contenido::before { content: "" !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: translate3d(0, 0, 0); } .boton-ver-acordeon .boton-ver-acordeon__contenido::after, .boton-ver-acordeon:hover .boton-ver-acordeon__contenido::after, .boton-ver-acordeon:focus .boton-ver-acordeon__contenido::after, .boton-ver-acordeon:active .boton-ver-acordeon__contenido::after { content: "" !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: translate3d(-105%, 0, 0); } /* * Animación activada mediante JavaScript. */ .boton-ver-acordeon.acordeon-touch-animate .boton-ver-acordeon__contenido::before { animation: acordeon-touch-line-out var(--cta-speed) cubic-bezier(.76, 0, .24, 1) forwards !important; } .boton-ver-acordeon.acordeon-touch-animate .boton-ver-acordeon__contenido::after { animation: acordeon-touch-line-in var(--cta-speed) cubic-bezier(.76, 0, .24, 1) forwards !important; } .boton-ver-acordeon, .boton-ver-acordeon:hover, .boton-ver-acordeon:focus, .boton-ver-acordeon:focus-visible, .boton-ver-acordeon:active { opacity: 1 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--cta-color) !important; text-decoration: none !important; box-shadow: none !important; } } /* ========================================================= ICONO CHEVRON ========================================================= */ .boton-ver-acordeon__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 12px; height: 12px; overflow: visible; transition: transform 400ms cubic-bezier(.22, .61, .36, 1); } .boton-ver-acordeon__icon svg { display: block; width: 100%; height: 100%; overflow: visible; } /* ========================================================= MOVIMIENTO DEL ICONO CON RATÓN ========================================================= */ @media (hover: hover) and (pointer: fine) { .boton-ver-acordeon:hover .boton-ver-acordeon__icon, .boton-ver-acordeon:focus-visible .boton-ver-acordeon__icon { transform: translateY(3px); } .boton-ver-acordeon[aria-expanded="true"] .boton-ver-acordeon__icon { transform: rotate(180deg); } .boton-ver-acordeon[aria-expanded="true"]:hover .boton-ver-acordeon__icon, .boton-ver-acordeon[aria-expanded="true"]:focus-visible .boton-ver-acordeon__icon { transform: rotate(180deg) translateY(3px); } } /* ========================================================= MOVIMIENTO DEL ICONO EN MÓVIL ========================================================= */ @media (hover: none), (pointer: coarse) { .boton-ver-acordeon .boton-ver-acordeon__icon { transform: none; } .boton-ver-acordeon.acordeon-touch-animate .boton-ver-acordeon__icon { transform: translateY(3px); } .boton-ver-acordeon[aria-expanded="true"] .boton-ver-acordeon__icon { transform: rotate(180deg); } .boton-ver-acordeon[aria-expanded="true"] .boton-ver-acordeon__icon { transform: rotate(180deg); } .boton-ver-acordeon[aria-expanded="true"] .boton-ver-acordeon__icon { transform: rotate(180deg); } .boton-ver-acordeon[aria-expanded="true"].acordeon-touch-animate .boton-ver-acordeon__icon { transform: rotate(180deg) translateY(3px); } } /* ========================================================= FOCO ========================================================= */ .boton-ver-acordeon:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; } /* ========================================================= MOVIMIENTO REDUCIDO ========================================================= */ @media (prefers-reduced-motion: reduce) { .boton-ver-acordeon, .boton-ver-acordeon__contenido::before, .boton-ver-acordeon__contenido::after, .boton-ver-acordeon__icon { transition-duration: 1ms !important; animation-duration: 1ms !important; } } document.addEventListener( "DOMContentLoaded", function () { "use strict"; const animationTimers = new WeakMap(); /* ===================================================== DETECTAR DISPOSITIVO TÁCTIL ===================================================== */ function isTouchDevice() { return window.matchMedia( "(hover: none), (pointer: coarse)" ).matches; } /* ===================================================== ANIMACIÓN DEL BOTÓN ===================================================== */ function animateAccordionButton(button) { if ( !button || !isTouchDevice() ) { return; } const previousTimer = animationTimers.get(button); if (previousTimer) { window.clearTimeout( previousTimer ); } button.classList.remove( "acordeon-touch-animate" ); /* * Fuerza el reinicio de los keyframes * en cada pulsación. */ void button.offsetWidth; button.classList.add( "acordeon-touch-animate" ); const timer = window.setTimeout( function () { button.classList.remove( "acordeon-touch-animate" ); animationTimers.delete( button ); }, 540 ); animationTimers.set( button, timer ); } /* ===================================================== CREAR BOTONES DE LOS ACORDEONES ===================================================== */ document .querySelectorAll( ".acordeon-limitado" ) .forEach(function (acordeon) { const items = acordeon.querySelectorAll( ".elementor-accordion-item" ); if (items.length <= 5) { return; } if ( acordeon.nextElementSibling && acordeon.nextElementSibling .classList.contains( "boton-ver-acordeon" ) ) { return; } const boton = document.createElement( "button" ); boton.type = "button"; boton.className = "boton-ver-acordeon"; boton.setAttribute( "aria-expanded", "false" ); boton.innerHTML = ` VER MÁS `; acordeon.insertAdjacentElement( "afterend", boton ); const texto = boton.querySelector( ".boton-ver-acordeon__texto" ); /* ============================================= ANIMACIÓN AL TOCAR ============================================= */ boton.addEventListener( "pointerdown", function () { animateAccordionButton( boton ); }, { passive: true } ); /* ============================================= ABRIR Y CERRAR ============================================= */ boton.addEventListener( "click", function () { const abierto = acordeon.classList.toggle( "acordeon-abierto" ); boton.setAttribute( "aria-expanded", abierto ? "true" : "false" ); texto.textContent = abierto ? "VER MENOS" : "VER MÁS"; if (!abierto) { acordeon.scrollIntoView({ behavior: "smooth", block: "start" }); } } ); }); } );
/* ========================================================= CTA CON SUBRAYADO ANIMADO ========================================================= */ .cta-underline { --cta-color: #202521; --cta-line-height: 1px; --cta-line-gap: 7px; --cta-speed: 500ms; --cta-icon-space: 8px; } /* ========================================================= VARIANTE BLANCA ========================================================= */ .cta-underline.cta-underline-white { --cta-color: #ffffff; } /* ========================================================= BOTÓN DE ELEMENTOR ========================================================= */ .cta-underline .elementor-button { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 0 !important; padding: 0 var(--cta-icon-space) var(--cta-line-gap) 0 !important; border: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; background-color: transparent !important; color: var(--cta-color) !important; text-decoration: none !important; box-shadow: none !important; overflow: hidden; transition: color 300ms ease, opacity 300ms ease; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* ========================================================= ESTADOS GENERALES ========================================================= */ .cta-underline .elementor-button:hover, .cta-underline .elementor-button:focus, .cta-underline .elementor-button:focus-visible, .cta-underline .elementor-button:active, .cta-underline .elementor-button:visited { border: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; background-color: transparent !important; color: var(--cta-color) !important; text-decoration: none !important; box-shadow: none !important; } /* ========================================================= CONTENIDO INTERIOR ========================================================= */ .cta-underline .elementor-button-content-wrapper { position: relative; z-index: 2; display: inline-flex !important; align-items: center; justify-content: center; overflow: visible !important; } .cta-underline .elementor-button-text { position: relative; color: inherit !important; white-space: nowrap; } /* ========================================================= SUBRAYADO ========================================================= */ .cta-underline .elementor-button::before, .cta-underline .elementor-button::after { content: ""; position: absolute; bottom: 0; left: 0; width: calc(100% - var(--cta-icon-space)); height: var(--cta-line-height); background-color: currentColor; pointer-events: none; will-change: transform; } /* Línea visible inicialmente */ .cta-underline .elementor-button::before { transform: translate3d(0, 0, 0); } /* Segunda línea situada a la izquierda */ .cta-underline .elementor-button::after { transform: translate3d(-105%, 0, 0); } /* ========================================================= ANIMACIÓN EN ESCRITORIO ========================================================= */ @media (hover: hover) and (pointer: fine) { .cta-underline .elementor-button::before, .cta-underline .elementor-button::after { transition: transform var(--cta-speed) cubic-bezier(.76, 0, .24, 1); } .cta-underline .elementor-button:hover::before, .cta-underline .elementor-button:focus-visible::before { transform: translate3d(105%, 0, 0); } .cta-underline .elementor-button:hover::after, .cta-underline .elementor-button:focus-visible::after { transform: translate3d(0, 0, 0); } } /* ========================================================= ANIMACIÓN TÁCTIL ========================================================= */ @keyframes cta-touch-line-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(105%, 0, 0); } } @keyframes cta-touch-line-in { from { transform: translate3d(-105%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (hover: none), (pointer: coarse) { /* * En estado normal siempre queda una línea visible. */ .cta-underline .elementor-button::before { display: block !important; content: "" !important; transform: translate3d(0, 0, 0); } .cta-underline .elementor-button::after { display: block !important; content: "" !important; transform: translate3d(-105%, 0, 0); } /* * JavaScript añade temporalmente esta clase al tocar. */ .cta-underline .elementor-button.cta-touch-animate::before { animation: cta-touch-line-out var(--cta-speed) cubic-bezier(.76, 0, .24, 1) forwards; } .cta-underline .elementor-button.cta-touch-animate::after { animation: cta-touch-line-in var(--cta-speed) cubic-bezier(.76, 0, .24, 1) forwards; } /* * Se neutralizan los estados que Elementor * puede mantener después de tocar. */ .cta-underline .elementor-button, .cta-underline .elementor-button:hover, .cta-underline .elementor-button:focus, .cta-underline .elementor-button:focus-visible, .cta-underline .elementor-button:active, .cta-underline .elementor-button:visited { opacity: 1 !important; color: var(--cta-color) !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; } } /* ========================================================= ICONO ========================================================= */ .cta-underline .elementor-button-icon { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; color: inherit !important; overflow: visible !important; transition: transform 400ms cubic-bezier(.22, .61, .36, 1); } .cta-underline .elementor-button-icon svg, .cta-underline .elementor-button-icon i { display: block; color: inherit !important; overflow: visible !important; } .cta-underline .elementor-button-icon svg { fill: currentColor; } /* ========================================================= MOVIMIENTO DEL ICONO EN ESCRITORIO ========================================================= */ @media (hover: hover) and (pointer: fine) { .cta-underline .elementor-button:hover .elementor-button-icon, .cta-underline .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); } } /* ========================================================= MOVIMIENTO DEL ICONO EN MÓVIL ========================================================= */ @media (hover: none), (pointer: coarse) { .cta-underline .elementor-button.cta-touch-animate .elementor-button-icon { transform: translateX(4px); } } /* ========================================================= FOCO ========================================================= */ .cta-underline .elementor-button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; } /* ========================================================= MOVIMIENTO REDUCIDO ========================================================= */ @media (prefers-reduced-motion: reduce) { .cta-underline .elementor-button, .cta-underline .elementor-button::before, .cta-underline .elementor-button::after, .cta-underline .elementor-button-icon { transition-duration: 1ms !important; animation-duration: 1ms !important; } } (function () { "use strict"; function initializeTouchCtas() { document .querySelectorAll( ".cta-underline .elementor-button" ) .forEach(function (button) { if ( button.dataset.ctaTouchReady === "true" ) { return; } button.dataset.ctaTouchReady = "true"; let animationTimer = null; function restartTouchAnimation() { const isTouchDevice = window.matchMedia( "(hover: none), (pointer: coarse)" ).matches; if (!isTouchDevice) { return; } window.clearTimeout( animationTimer ); /* * Eliminamos la clase para poder reiniciar * la animación en cada toque. */ button.classList.remove( "cta-touch-animate" ); void button.offsetWidth; button.classList.add( "cta-touch-animate" ); animationTimer = window.setTimeout( function () { button.classList.remove( "cta-touch-animate" ); }, 540 ); } button.addEventListener( "pointerdown", restartTouchAnimation, { passive: true } ); button.addEventListener( "touchstart", restartTouchAnimation, { passive: true } ); }); } document.addEventListener( "DOMContentLoaded", initializeTouchCtas ); window.addEventListener( "load", initializeTouchCtas ); window.addEventListener( "elementor/frontend/init", initializeTouchCtas ); window.setTimeout( initializeTouchCtas, 500 ); })();