/* ── Tipografías de marca ───────────────────────────────────────────── */ @font-face{font-family:"Stage Grotesk";src:url("../fonts/StageGrotesk-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Stage Grotesk";src:url("../fonts/StageGrotesk-Bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Cloudy Organic";src:url("../fonts/CloudyOrganic.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} :root{ --navy:#1b2a63; --blue:#5b6fd6; --blue-soft:#a9c2f5; --pale:#e1edfb; --lime:#cbe86b; --white:#fff; --ink:#1b2a63; --muted:#5a6a9a; --serif:"Stage Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --sans:"Stage Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --hl:"Cloudy Organic","Stage Grotesk",cursive; --pad:clamp(1.25rem,5vw,4rem); --sec:clamp(5rem,10vw,9rem); --hdr:118px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%} body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg{max-width:100%;display:block} .wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em; text-align:center} /* El bloque que acompaña al titular se centra con él para que no quede un titular centrado sobre un cuerpo de texto justificado a la izquierda. */ .eyebrow{text-align:center} .lead{margin-inline:auto;text-align:center} /* Cloudy Organic — highlight de marca. Uso deliberadamente escaso: resalta la carga emocional de un titular, nunca el titular entero. */ .hl{font-family:var(--hl);font-weight:400;letter-spacing:0; font-size:1.1em;line-height:.9;color:var(--blue)} .close .hl{color:var(--lime)} h1{font-size:clamp(2.6rem,7vw,5.2rem)} h2{font-size:clamp(2rem,4.6vw,3.5rem)} h3{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.2} .eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--blue);margin-bottom:1.1rem;text-align:center} .lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted);max-width:56ch} section{padding-block:var(--sec)} .alt{background:var(--pale)} /* header */ header{position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:100; background:rgba(255,255,255,.82);backdrop-filter:blur(14px); border-bottom:1px solid rgba(27,42,99,.08);transition:box-shadow .3s} header.scrolled{box-shadow:0 6px 30px rgba(27,42,99,.07)} .bar{max-width:1200px;margin:0 auto;padding-inline:var(--pad);height:100%; display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)} .brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none} /* 80% más grande que el tamaño original (38–52px) */ .brand img{height:clamp(68px,7.9vw,94px);width:auto} .brand small{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.15em; text-transform:uppercase;color:var(--blue);margin-top:2px} .bar nav{margin-left:auto;display:flex;gap:clamp(1rem,1.7vw,1.9rem);align-items:center;white-space:nowrap} .bar nav a:not(.btn){font-size:.86rem;color:var(--navy);text-decoration:none;opacity:.75;transition:opacity .2s} .bar nav a:not(.btn):hover{opacity:1} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.82rem 1.6rem;border-radius:100px;font-size:.88rem;font-weight:600; text-decoration:none;border:1.5px solid transparent;cursor:pointer; transition:transform .2s,background .2s,color .2s;white-space:nowrap} .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--navy);color:#fff} .btn-primary:hover{background:var(--blue)} .btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent} .btn-ghost:hover{background:var(--navy);color:#fff} .btn-lime{background:var(--lime);color:var(--navy)} .lang{display:flex;gap:.3rem;align-items:center;font-size:.74rem;font-weight:600; border:1px solid rgba(27,42,99,.18);border-radius:100px;padding:.22rem;flex-shrink:0} .lang a, .lang button{border:0;background:none;font:inherit;color:var(--muted);cursor:pointer; padding:.28rem .62rem;border-radius:100px;transition:.2s;text-decoration:none; display:inline-block;line-height:1.3} .lang a.on, .lang button.on{background:var(--navy);color:#fff} .menu-btn{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.4rem} .menu-btn span{display:block;width:22px;height:1.5px;background:var(--navy);margin:5px 0} /* hero */ .hero{padding-top:calc(var(--hdr) + clamp(2.5rem,6vw,5rem)); padding-bottom:clamp(3rem,6vw,5.5rem);background:var(--pale); position:relative;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem); align-items:center} .hero .copy{text-align:center} .hero h1{margin:.4rem 0 1.4rem;text-wrap:balance} .hero .cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.2rem;justify-content:center} /* El video vuelve a ser una pieza contenida, no un fondo a sangre */ .video{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden; box-shadow:0 30px 70px -30px rgba(27,42,99,.5);background:var(--navy);margin:0} .video video{width:100%;height:100%;object-fit:cover;display:block} .video figcaption{position:absolute;bottom:14px;left:0;right:0;text-align:center; font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8); text-shadow:0 1px 6px rgba(27,42,99,.6);pointer-events:none} .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none} .b1{width:190px;height:190px;background:var(--lime);top:-60px;right:12%} .b2{width:120px;height:120px;background:var(--blue-soft);bottom:-40px;left:8%} /* services */ .rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory; padding:.5rem .25rem 1.6rem;scrollbar-width:thin} .card{flex:0 0 clamp(258px,30vw,330px);scroll-snap-align:start;background:#fff; border-radius:18px;overflow:hidden;border:1px solid rgba(27,42,99,.09); transition:transform .3s,box-shadow .3s} .card:hover{transform:translateY(-6px);box-shadow:0 22px 46px -24px rgba(27,42,99,.4)} /* Mismo formato 4:3 de siempre; ahora con foto. --pos ajusta el encuadre de cada imagen para centrar a la persona. */ .card .ph{aspect-ratio:4/3;width:100%;display:block;object-fit:cover; object-position:var(--pos,50% 50%);background:var(--pale)} .card .body{padding:1.5rem 1.4rem 1.7rem} .card p{font-size:.92rem;color:var(--muted);margin-top:.55rem} .rail-nav{display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin-top:1rem} .rail-arrows{display:flex;gap:.5rem;justify-content:center} .rail-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(27,42,99,.2); background:#fff;cursor:pointer;color:var(--navy);font-size:1.1rem;transition:.2s} .rail-nav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)} /* partners */ /* ── Cinta de logos ───────────────────────────────────────────────────── La pista contiene dos tandas idénticas de logos. La animación la desplaza exactamente un 50%, es decir el largo de una tanda, así que al reiniciarse el segundo grupo queda donde estaba el primero y el bucle no tiene salto. */ .marquee{margin-top:3.2rem;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;align-items:center;width:max-content; gap:clamp(2.5rem,6vw,5rem);will-change:transform;animation:pcc-marquee 55s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee img{width:clamp(90px,10.2vw,123px);height:auto;object-fit:contain; flex-shrink:0;opacity:.62;transition:opacity .3s} .marquee img:hover{opacity:1} @keyframes pcc-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* Sin movimiento para quien lo pidió en su sistema: la cinta queda quieta */ @media(prefers-reduced-motion:reduce){ .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto} .marquee{-webkit-mask-image:none;mask-image:none} } .logos img:hover{opacity:1} /* pillars */ .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px;background:rgba(27,42,99,.12);margin-top:3.4rem; border:1px solid rgba(27,42,99,.12);border-radius:18px;overflow:hidden} .pillar{background:var(--pale);padding:2.3rem 1.9rem;transition:background .3s} .pillar:hover{background:#fff} .pillar .n{font-family:var(--serif);font-size:2.4rem;color:var(--blue-soft);line-height:1} .pillar h3{margin:.5rem 0 .7rem} .pillar p{font-size:.93rem;color:var(--muted)} /* close + contact */ .close{background:var(--navy);color:#fff;text-align:center} .close .eyebrow{color:var(--blue-soft)} .close h2{color:#fff;max-width:16ch;margin:0 auto 1.6rem} .close p{color:rgba(255,255,255,.72);max-width:60ch;margin:0 auto} .close .kicker{font-family:var(--hl);font-style:normal;line-height:1.15;font-size:clamp(1.2rem,2.2vw,1.7rem); color:var(--lime);margin:2.4rem auto 2.6rem;max-width:30ch} .contact{text-align:center} .contact .btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem} .contact .mail{margin-top:1.4rem;font-size:.9rem;color:var(--muted)} .contact .mail a{color:var(--blue)} /* footer */ footer{background:var(--navy);color:rgba(255,255,255,.75);padding-block:4.5rem 2.5rem;font-size:.9rem} footer a{color:rgba(255,255,255,.75);text-decoration:none} footer a:hover{color:var(--lime)} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem} .fgrid h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--blue-soft);margin-bottom:1rem;font-weight:600} .fgrid ul{list-style:none;display:grid;gap:.55rem} .ftag{font-family:var(--hl);font-style:normal;color:#fff;font-size:1.15rem;margin-top:.5rem} .fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:3rem;padding-top:1.5rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem; color:rgba(255,255,255,.5)} /* numbered list (why it matters) + steps (before/during/after) */ .remarks{margin-top:clamp(3rem,6vw,4.5rem);border-radius:22px; padding:clamp(2rem,4vw,3rem) clamp(1.2rem,3vw,2.4rem); /* Combinación clara y alegre: lima → azul claro, los dos acentos vivos de la marca. Los tonos van aclarados con blanco para acercarlos entre sí: así el salto de matiz entre el verde y el azul se disuelve y el degradado se lee suave. Primero la versión con hex, de respaldo para navegadores sin color-mix. */ background:linear-gradient(140deg,#e6f3bf,#d2e0f9 52%,var(--pale)); /* oklab interpola sin pasar por el gris verdoso que aparece a mitad de camino cuando se mezclan lima y azul en el espacio sRGB por defecto. */ background:linear-gradient(140deg in oklab, color-mix(in oklab, var(--lime) 55%, #fff), color-mix(in oklab, var(--blue-soft) 62%, #fff) 52%, var(--pale))} .remarks h3{font-size:1.15rem;color:var(--navy);margin-bottom:2rem} /* Los cinco puntos en una sola línea */ .remarks ul{list-style:none;padding:0;margin:0;display:grid;gap:clamp(.8rem,1.6vw,1.4rem); grid-template-columns:repeat(5,1fr)} /* Icono arriba, texto abajo */ .remarks li{display:flex;flex-direction:column;align-items:center;gap:.9rem; text-align:center;font-size:.82rem;line-height:1.5;color:var(--navy); background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8); border-radius:16px;padding:1.5rem 1rem;transition:background .25s,transform .25s} .remarks li:hover{background:rgba(255,255,255,.85);transform:translateY(-3px)} .remarks .ico{width:46px;height:46px;flex-shrink:0;border-radius:50%; background:#fff;display:grid;place-items:center} .remarks .ico svg{width:23px;height:23px;stroke:var(--blue);stroke-width:1.7; fill:none;stroke-linecap:round;stroke-linejoin:round} @media(max-width:900px){ .remarks ul{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .remarks ul{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .remarks li:hover{transform:none} } .hero .lead + .lead{margin-top:.9rem} /* reveal */ .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease} .rv.in{opacity:1;transform:none} .note{position:fixed;left:1rem;bottom:1rem;z-index:200;background:var(--navy);color:#fff; font-size:.72rem;padding:.6rem 1rem;border-radius:100px;opacity:.85} @media(max-width:900px){ .hero .wrap{grid-template-columns:1fr} .video{aspect-ratio:16/10;order:-1} .fgrid{grid-template-columns:1fr 1fr} } /* El nav completo deja de caber antes de lo previsto por el ancho de Stage Grotesk */ @media(max-width:1040px){ .bar nav{display:none} .menu-btn{display:block} .lang{margin-left:auto} } @media(max-width:720px){ .lang{margin-left:auto} .fgrid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv,.rv.in{opacity:1;transform:none;transition:none} .btn:hover,.card:hover{transform:none} } /* ── Logos ─────────────────────────────────────────────────────────────── */ /* El wordmark viene en navy; sobre el footer oscuro se invierte a blanco. */ .flogo{width:min(230px,70%);filter:brightness(0) invert(1);opacity:.95} /* Isotipo de caritas como acento; decorativo, por eso alt="" y aria-hidden. */ .faces{width:96px;margin:0 auto 1.6rem} /* ── Formulario de reservación ─────────────────────────────────────────── */ .form-hero{padding-top:calc(var(--hdr) + clamp(2.5rem,6vw,4.5rem)); padding-bottom:clamp(2rem,4vw,3rem);background:var(--pale)} .form-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.4rem 0 1.2rem} .form-wrap{max-width:760px;margin:0 auto;padding-inline:var(--pad)} form{padding-block:clamp(2.5rem,5vw,4rem)} fieldset{border:0;padding:0;margin:0 0 clamp(2.2rem,4vw,3.2rem)} legend{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--navy); padding:0 0 .3rem;border-bottom:1px solid rgba(27,42,99,.14);width:100%;margin-bottom:1.5rem} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem} .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem} .field.full{grid-column:1/-1} label,.qlabel{font-size:.88rem;font-weight:600;color:var(--navy)} .req{color:var(--blue)} input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],textarea{ font:inherit;font-size:.95rem;color:var(--ink);background:#fff; border:1px solid rgba(27,42,99,.22);border-radius:10px;padding:.75rem .9rem;width:100%; transition:border-color .2s,box-shadow .2s} input:focus,textarea:focus{outline:0;border-color:var(--blue); box-shadow:0 0 0 3px rgba(91,111,214,.18)} textarea{min-height:110px;resize:vertical} .hint{font-size:.8rem;color:var(--muted)} /* Preguntas Sí/No en línea */ .q{padding:1rem 0;border-bottom:1px solid rgba(27,42,99,.09); display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center} .q:last-of-type{border-bottom:0} .opts{display:flex;gap:.5rem} .opt{position:relative} .opt input{position:absolute;opacity:0;inset:0;cursor:pointer} .opt span{display:block;padding:.5rem 1.1rem;border:1px solid rgba(27,42,99,.22); border-radius:100px;font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s} .opt input:checked + span{background:var(--navy);color:#fff;border-color:var(--navy)} .opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(91,111,214,.3)} .conditional{display:none;margin-top:.8rem} .conditional.show{display:block} /* Niños repetibles */ .child{background:var(--pale);border-radius:14px;padding:1.3rem;margin-bottom:1rem;position:relative} .child[hidden]{display:none} .child h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue); margin-bottom:.9rem;font-weight:600} .rm{position:absolute;top:1rem;right:1rem;background:none;border:0;cursor:pointer; color:var(--muted);font-size:1.1rem;line-height:1;padding:.2rem} .rm:hover{color:var(--navy)} .add{margin-top:.3rem} /* Autorizaciones */ .check{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start; padding:1rem 0;border-bottom:1px solid rgba(27,42,99,.09)} .check:last-of-type{border-bottom:0} .check input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--navy);flex-shrink:0} .check p{font-size:.88rem;color:var(--muted);line-height:1.55} .notice{background:var(--pale);border-left:3px solid var(--blue);border-radius:0 10px 10px 0; padding:.9rem 1.1rem;font-size:.86rem;color:var(--navy);margin-top:1.2rem} .submit-row{margin-top:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap} @media(max-width:640px){ .grid2{grid-template-columns:1fr} .q{grid-template-columns:1fr} } .check p a{color:var(--blue);text-decoration:underline;text-underline-offset:2px} /* ── CTA de sección: centrados ──────────────────────────────────────────── */ .cta-center{display:flex;justify-content:center;margin-top:2.6rem} /* ── Menú móvil ─────────────────────────────────────────────────────────── */ .menu-btn span{transition:transform .3s,opacity .2s} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} #mobnav{position:fixed;top:var(--hdr);left:0;right:0;z-index:99;background:#fff; border-bottom:1px solid rgba(27,42,99,.1);box-shadow:0 18px 40px -20px rgba(27,42,99,.35); display:grid;gap:.2rem;padding:1.2rem var(--pad) 1.8rem; transform:translateY(-12px);opacity:0;visibility:hidden; transition:transform .28s ease,opacity .28s ease,visibility .28s} #mobnav.open{transform:none;opacity:1;visibility:visible} #mobnav a:not(.btn){padding:.85rem 0;color:var(--navy);text-decoration:none;font-size:1.05rem; border-bottom:1px solid rgba(27,42,99,.08)} #mobnav a:not(.btn):last-of-type{border-bottom:0} #mobnav .btn{margin-top:1rem;justify-content:center} @media(min-width:1041px){ #mobnav{display:none} } /* ── Botón de reproducción del microvideo ───────────────────────────────── */ button.play{border:0;cursor:pointer;padding:0} button.play:focus-visible{outline:3px solid var(--lime);outline-offset:4px} button.play:hover{transform:scale(1.06)} .play{transition:transform .25s} @media(prefers-reduced-motion:reduce){ .play,button.play:hover{transition:none;transform:none} } /* ── Página legal ───────────────────────────────────────────────────────── */ .legal{list-style:none;padding:0;margin-top:1.4rem;display:grid;gap:.9rem} .legal li{position:relative;padding-left:1.4rem;color:var(--muted);font-size:.95rem;line-height:1.7} .legal li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px; border-radius:50%;background:var(--blue-soft)} .legal.duties li{display:grid;gap:.2rem} .legal.duties strong{color:var(--navy);font-weight:600} .form-wrap h2{font-size:clamp(1.5rem,3vw,2.1rem);padding-bottom:.4rem; border-bottom:1px solid rgba(27,42,99,.14)} .form-wrap h3{font-size:1.05rem;color:var(--navy)} /* Titulares de card y pilar: el bloque completo se centra con el titular */ .card .body{text-align:center} .pillar{text-align:center} .pillar .n{text-align:center} .legal li{text-align:left} legend{text-align:center} /* ========================================================================== PUENTE CON ELEMENTOR Elementor envuelve cada widget en dos divs y da a sus botones e imágenes sus propias clases. Estas reglas hacen que el diseño ya existente se aplique sobre ese markup, en lugar de reproducir el diseño con los controles de Elementor. Así el cliente edita textos e imágenes desde el editor y el resultado visual no cambia. ========================================================================== */ /* Elementor fija display/ancho/padding por variables en cada contenedor. El diseño manda: se neutraliza lo que estorba. */ .e-con.wrap, .e-con.copy, .e-con.cta, .e-con.rail, .e-con.card, .e-con.pillars, .e-con.pillar, .e-con.remarks, .e-con.body, .e-con.remarks-items, .e-con.remarks-item, .e-con.nums { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0; --width: auto; } section.e-con { --width: 100%; } /* Los widgets no deben aportar márgenes propios: el espaciado lo da el layout */ .elementor-widget { margin: 0 } .elementor-widget-container > :first-child { margin-top: 0 } .elementor-widget-container > :last-child { margin-bottom: 0 } /* Titulares: heredan la alineación centrada del diseño */ .elementor-heading-title { text-align: inherit; font: inherit; color: inherit } h1.elementor-heading-title { font-size: clamp(2.6rem,7vw,5.2rem); line-height: 1.1; letter-spacing: -.02em } h2.elementor-heading-title { font-size: clamp(2rem,4.6vw,3.5rem); line-height: 1.1; letter-spacing: -.02em } h3.elementor-heading-title { font-size: clamp(1.15rem,1.9vw,1.45rem); line-height: 1.2 } /* El eyebrow y el lead se aplican al contenedor del widget; el texto hereda */ .eyebrow .elementor-heading-title { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit } .lead p { margin: 0 0 .9em } .lead p:last-child { margin-bottom: 0 } /* Botones: se estiliza la clase propia de Elementor con el diseño del sitio */ .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .82rem 1.6rem; border-radius: 100px; font-size: .88rem; font-weight: 600; font-family: var(--sans); text-decoration: none; border: 1.5px solid transparent; background: var(--navy); color: #fff; cursor: pointer; transition: transform .2s, background .2s, color .2s; } .elementor-button:hover { transform: translateY(-2px); background: var(--blue); color: #fff } .btn-ghost .elementor-button { border-color: var(--navy); color: var(--navy); background: transparent } .btn-ghost .elementor-button:hover { background: var(--navy); color: #fff } .close .btn-ghost .elementor-button { border-color: #fff; color: #fff } .btn-lime .elementor-button { background: var(--lime); color: var(--navy) } .btn-lime .elementor-button:hover { background: var(--lime); color: var(--navy) } .elementor-widget-button { display: flex; justify-content: center } @media(prefers-reduced-motion:reduce){ .elementor-button:hover { transform: none } } /* Imágenes de las cards: el recorte 4:3 del diseño, sobre el markup de Elementor */ .card .elementor-widget-image { line-height: 0 } .card .elementor-widget-image img { aspect-ratio: 4/3; width: 100%; display: block; object-fit: cover; background: var(--pale); } /* El encuadre de cada foto, que antes iba en un style inline */ .card-1 .elementor-widget-image img { object-position: 38% 50% } .card-2 .elementor-widget-image img { object-position: 50% 50% } .card-3 .elementor-widget-image img { object-position: 50% 42% } .card-4 .elementor-widget-image img { object-position: 50% 45% } .card-5 .elementor-widget-image img { object-position: 50% 45% } .card-6 .elementor-widget-image img { object-position: 50% 58% } /* El número de cada pilar */ .pillar .n .elementor-heading-title { font-family: var(--serif); font-size: 2.4rem; color: var(--blue-soft); line-height: 1 } /* Good to know: el panel usaba