/* ========================================================= FERPAL · sistema de estilo (capa global) Variables medidas sobre las maquetas de nov. 2020. ========================================================= */ :root{ --f-crema:#F9F8F3; --f-cielo:#B1C8E9; --f-azul:#5A97F6; --f-coral:#F78467; --f-coral-2:#F26A3D; --f-verde:#6D8B65; --f-texto:#454C54; --f-blanco:#FFFFFF; --f-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --f-serif:"Playfair Display",Georgia,"Times New Roman",serif; --f-radius:999px; --f-shadow:0 24px 48px -16px rgba(69,76,84,.25); } /* ---------- base ---------- */ body{ background:var(--f-crema) !important; color:var(--f-texto); font-family:var(--f-sans); } h1,h2,h3,h4,h5,h6, .elementor-heading-title{ font-family:var(--f-sans) !important; font-weight:400 !important; color:var(--f-texto); letter-spacing:-.01em; } h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.05} h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15} h3,.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.25} /* acento serif en cursiva: remates */ em,i:not([class]),.f-acento, h1 em,h2 em,h3 em,.elementor-heading-title em{ font-family:var(--f-serif) !important; font-style:italic; font-weight:400; } p,li{font-family:var(--f-sans);font-size:1.02rem;line-height:1.6} a{color:var(--f-azul)} /* ---------- botones ---------- */ .elementor-button, .wp-block-button__link, button.button,input[type=submit], .ast-button,.f-btn{ font-family:var(--f-sans) !important; font-weight:500 !important; background:var(--f-coral) !important; color:var(--f-blanco) !important; border:0 !important; border-radius:var(--f-radius) !important; padding:.85em 1.9em !important; box-shadow:none !important; text-transform:none !important; letter-spacing:0 !important; transition:background .2s ease,transform .2s ease; } .elementor-button:hover,.wp-block-button__link:hover,input[type=submit]:hover,.f-btn:hover{ background:var(--f-coral-2) !important;color:var(--f-blanco) !important;transform:translateY(-1px); } /* secundario: crema con texto coral */ .f-btn--sec,.elementor-button.f-btn--sec{ background:var(--f-crema) !important;color:var(--f-coral) !important; } /* ---------- imágenes con sombra desplazada ---------- */ .f-foto img,.elementor-widget-image.f-foto img{ box-shadow:var(--f-shadow); border-radius:0; } /* ---------- bloques de color ---------- */ .f-bg-cielo{background:var(--f-cielo) !important} .f-bg-azul{background:var(--f-azul) !important;color:var(--f-blanco)} .f-bg-azul h1,.f-bg-azul h2,.f-bg-azul h3,.f-bg-azul p,.f-bg-azul li,.f-bg-azul a,.f-bg-azul .elementor-heading-title{color:var(--f-blanco) !important} .f-bg-verde{background:var(--f-verde) !important;color:var(--f-blanco)} .f-bg-verde h1,.f-bg-verde h2,.f-bg-verde h3,.f-bg-verde p,.f-bg-verde li,.f-bg-verde a,.f-bg-verde .elementor-heading-title{color:var(--f-blanco) !important} .f-bg-crema{background:var(--f-crema) !important} /* kicker: mayúsculas pequeñas sobre el H1 */ .f-kicker{font-family:var(--f-sans);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:.6em} /* cita en serif cursiva (reseñas, frases de valor) */ .f-frase,blockquote{ font-family:var(--f-serif);font-style:italic;font-weight:400; font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.35;border:0;padding:0;margin:0 } /* ---------- formularios (Clientify / WPForms) ---------- */ .wpforms-form input[type=text],.wpforms-form input[type=email],.wpforms-form input[type=tel],.wpforms-form textarea,.wpforms-form select, .clientify-form input,.clientify-form textarea,.clientify-form select, form input[type=text],form input[type=email],form input[type=tel],form textarea{ font-family:var(--f-sans);background:var(--f-blanco);border:1px solid rgba(69,76,84,.18);border-radius:14px;color:var(--f-texto); } /* ---------- pedir cita flotante + whatsapp ---------- */ .f-cita-flotante{ position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:9998; width:104px;height:104px;border-radius:50%; background:var(--f-coral-2);color:#fff !important; display:flex;align-items:center;justify-content:center;text-align:center; font-family:var(--f-sans);font-size:.95rem;font-weight:500;text-decoration:none; box-shadow:0 0 0 18px rgba(242,106,61,.28),0 0 60px 30px rgba(242,106,61,.35); } .f-cita-flotante:hover{background:#e85d31} @media (max-width:782px){ .f-cita-flotante{width:72px;height:72px;font-size:.78rem;right:14px;top:auto;bottom:96px;transform:none;box-shadow:0 0 0 10px rgba(242,106,61,.28),0 0 34px 16px rgba(242,106,61,.35)} } /* ========================================================= CABECERA ========================================================= */ body.ferpal #masthead,body.ferpal .ast-above-header-wrap,body.ferpal #ast-scroll-top{display:none !important} .f-header{position:relative;z-index:9000;font-family:var(--f-sans)} .f-header__in{ max-width:1440px;margin:0 auto;padding:22px 28px; display:flex;align-items:center;gap:32px; } .f-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px} .f-nav a,.f-nav__ops{ font-family:var(--f-sans);font-size:1rem;font-weight:400;color:var(--f-texto);text-decoration:none; background:none;border:0;padding:0;cursor:pointer;line-height:1; } .f-nav a:hover,.f-nav__ops:hover{color:var(--f-coral)} .f-tel{margin-left:auto;font-size:.95rem;color:var(--f-texto);text-decoration:none;display:none} .f-brand{margin-left:auto;font-family:var(--f-serif);font-size:1.15rem;color:var(--f-texto);text-decoration:none;letter-spacing:.01em;white-space:nowrap} .f-brand:hover{color:var(--f-texto)} .f-burger{display:none;width:40px;height:40px;border:0;background:none;padding:0;cursor:pointer;flex-direction:column;justify-content:center;gap:6px} .f-burger span{display:block;height:2px;width:26px;background:var(--f-texto)} /* cabecera transparente sobre la portada de la home y de las landings con cabecera cielo */ body.home .f-header,body.f-portada .f-header,.f-header--sobre{position:absolute;top:0;left:0;right:0} body.admin-bar .f-header{top:32px} body.home .f-nav a,body.home .f-nav__ops,body.home .f-brand,body.home .f-tel,body.f-portada .f-nav a,body.f-portada .f-nav__ops,body.f-portada .f-brand,body.f-portada .f-tel, .f-header--sobre .f-nav a,.f-header--sobre .f-nav__ops,.f-header--sobre .f-brand{color:#fff} body.home .f-burger span,body.f-portada .f-burger span{background:#fff} /* megamenú verde */ .f-mega{ position:fixed;inset:0;z-index:9500;overflow:auto; background:var(--f-verde);color:#fff; width:min(100%,760px); padding:22px 28px 40px; box-shadow:40px 0 80px rgba(0,0,0,.15); } .f-mega[hidden]{display:none} .f-mega__top{display:flex;align-items:center;gap:26px;margin-bottom:28px} .f-mega__main{list-style:none;margin:0;padding:0;display:flex;gap:26px} .f-mega__main a,.f-mega__main span{color:#fff;text-decoration:none;font-size:1rem} .f-mega__main .is-current{border-bottom:2px solid #fff;padding-bottom:2px} .f-mega__close{margin-left:auto;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;padding:0 4px} .f-mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px} .f-mega__grupo{margin-bottom:22px} .f-mega__label{font-size:.78rem;opacity:.85;margin-bottom:8px;letter-spacing:.02em} .f-mega__grupo ul{list-style:none;margin:0;padding:0} .f-mega__grupo li{margin:0 0 6px} .f-mega__grupo a{color:#fff;text-decoration:none;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2} .f-mega__grupo a em{font-family:var(--f-serif);font-style:italic;color:var(--f-cielo);font-size:.78em;margin-left:.15em;white-space:nowrap} .f-mega__grupo a:hover{text-decoration:underline;text-underline-offset:4px} .f-mega__foot{margin-top:24px;display:flex;flex-wrap:wrap;gap:22px;font-size:.95rem} .f-mega__foot a{color:#fff;text-decoration:none;opacity:.9} body.f-mega-open{overflow:hidden} body.admin-bar .f-mega{top:32px} .f-mega-backdrop{position:fixed;inset:0;z-index:8900;background:rgba(69,76,84,.25);display:none} body.f-mega-open .f-mega-backdrop{display:block} @media (max-width:900px){ .f-header__in{padding:14px 90px 14px 16px;gap:14px} .f-mega__top{padding-right:0;gap:10px} .f-nav{display:none} .f-burger{display:flex} .f-tel{display:block;margin-left:auto} .f-brand{margin-left:0;font-size:1.05rem} .f-mega{width:100%;padding:16px} .f-mega__main{display:flex;flex-wrap:wrap;gap:8px clamp(8px,2.6vw,18px)} .f-mega__main a,.f-mega__main span{font-size:clamp(.75rem,3.4vw,1rem);white-space:nowrap} .f-mega__cols{grid-template-columns:1fr} .f-mega__grupo a{font-size:1.25rem} } /* ========================================================= PIE ========================================================= */ .f-intl{ background:var(--f-cielo);color:var(--f-texto);font-family:var(--f-sans); display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center; padding:14px 20px;font-size:.95rem; } .f-intl a{color:var(--f-texto);font-weight:500;text-decoration:underline;text-underline-offset:3px} .f-footer{background:var(--f-azul);color:#fff;font-family:var(--f-sans)} .f-footer__in{ max-width:1440px;margin:0 auto;padding:56px 28px 64px; display:grid;grid-template-columns:repeat(4,1fr);gap:40px; } .f-footer__logos{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px;margin-bottom:8px} .f-footer__logos img{width:auto;height:56px;max-width:170px;object-fit:contain;filter:brightness(0) invert(1);opacity:.95} .f-footer__logos img:nth-child(2){height:76px} .f-footer h4{ font-family:var(--f-sans) !important;font-size:.72rem !important;font-weight:400 !important; letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.85;margin:0 0 12px } .f-footer h4+h4{margin-top:22px} .f-footer__col a{display:block;color:#fff;text-decoration:none;font-size:1.05rem;line-height:1.35;margin:0 0 10px} .f-footer__col a:hover{text-decoration:underline;text-underline-offset:3px} .f-footer__col small{display:block;margin-top:16px;font-size:.78rem;opacity:.9} .f-footer__col small a{display:inline;font-size:inherit;margin:0} body.ferpal .site-footer,body.ferpal #colophon,body.ferpal .ast-footer-overlay{display:none !important} @media (max-width:900px){ .f-footer__in{grid-template-columns:1fr 1fr;gap:28px;padding:40px 20px 96px} .f-footer__logos{gap:16px 22px} .f-footer__logos img{height:46px;max-width:130px} .f-footer__logos img:nth-child(2){height:60px} } @media (max-width:520px){ /* 0.7.3: el pie sigue a dos columnas en el móvil (a una columna quedaba un bloque altísimo con la mitad derecha vacía) */ .f-footer__in{grid-template-columns:1fr 1fr;gap:22px 16px;padding:30px 18px 96px} .f-footer h4{font-size:.68rem !important;margin-bottom:8px} .f-footer__col a{font-size:.95rem;margin-bottom:7px} .f-footer__col small{margin-top:10px;font-size:.74rem} } /* ========================================================= PLANTILLA HOME ========================================================= */ body.page-template-template-ferpal-home #content,body.page-template-template-ferpal-home .ast-container{max-width:none !important;padding:0 !important;margin:0 !important} body.page-template-template-ferpal-home #primary,body.page-template-template-ferpal-home .site-main{margin:0;padding:0} .f-home{font-family:var(--f-sans);color:var(--f-texto);overflow:hidden} .f-wrap{max-width:1180px;margin:0 auto;padding:0 28px} .f-sec{padding:88px 0} @media (max-width:900px){.f-sec{padding:56px 0}.f-wrap{padding:0 20px}} /* hero */ .f-hero{background:var(--f-cielo);color:#fff;position:relative;padding:150px 0 90px;min-height:640px} .f-hero .f-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .f-hero .f-kicker{color:#fff} .f-hero h1{color:#fff !important;font-size:clamp(2.6rem,5.4vw,4.6rem);margin:0 0 .1em} .f-hero .f-h1-sub{font-family:var(--f-serif);font-style:italic;font-size:clamp(2.2rem,4.8vw,4.2rem);line-height:1.05;margin:0 0 .6em;color:#fff} .f-hero p{color:#fff;max-width:520px;font-size:1.02rem} .f-hero .f-btn{display:inline-block;margin-top:10px;text-decoration:none} .f-hero__media{position:relative;min-height:440px} .f-hero__foto{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(100%,460px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#8FA9CF;box-shadow:var(--f-shadow)} .f-hero__foto img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;transform:scale(1.02)} .f-hero__esfera{position:absolute;border-radius:50%;background:var(--f-coral);width:150px;height:150px;left:2%;bottom:-4%;box-shadow:inset -20px -24px 40px rgba(0,0,0,.12)} .f-hero__esfera--b{background:#F3F0E6;width:120px;height:120px;left:auto;right:6%;top:-8%;bottom:auto} @media (max-width:900px){ .f-hero{padding:110px 0 60px;min-height:0} .f-hero .f-wrap{grid-template-columns:1fr} .f-hero__media{min-height:300px;order:-1} .f-hero__foto{position:relative;top:0;transform:none;margin:0 auto;width:min(80%,320px)} .f-hero__esfera{width:110px;height:110px;left:0;bottom:0} .f-hero__esfera--b{width:70px;height:70px;right:0;top:0} } /* banda de cifras */ .f-cifras{background:var(--f-azul);color:#fff;padding:40px 0 30px} .f-cifras .f-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 24px;text-align:center} .f-cifras b{display:block;font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1} .f-cifras span{display:block;margin-top:6px;font-size:.95rem;opacity:.95} .f-cifras .f-cifras__pie{grid-column:1/-1;font-family:var(--f-serif);font-style:italic;opacity:.9;font-size:1rem;margin-top:4px} @media (max-width:700px){.f-cifras .f-wrap{grid-template-columns:1fr 1fr}} /* intro grande centrada */ .f-intro{text-align:center} .f-intro p{max-width:800px;margin:0 auto;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.45} .f-intro p em{font-family:var(--f-serif);font-style:italic} /* bloque operación (foto + texto) */ .f-op .f-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .f-op--inv .f-wrap>.f-op__media{order:2} .f-op__media img{width:100%;height:auto;display:block;box-shadow:var(--f-shadow);background:var(--f-cielo);aspect-ratio:4/5;object-fit:cover} .f-op h2{margin:0 0 .5em} .f-op p{max-width:440px} .f-op__mini{display:flex;gap:10px;margin:18px 0 22px} .f-op__mini img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.15)} .f-op .f-btn{display:inline-block;text-decoration:none} @media (max-width:900px){.f-op .f-wrap{grid-template-columns:1fr;gap:28px}.f-op--inv .f-wrap>.f-op__media{order:0}} /* listas corporal / facial */ .f-listas .f-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .f-listas__media img{width:100%;height:auto;display:block;box-shadow:var(--f-shadow);aspect-ratio:4/5;object-fit:cover} .f-listas h2{margin:0 0 .5em} .f-listas h2+ul{margin:0 0 38px} .f-listas ul{list-style:none;padding:0;margin:0} .f-listas li{margin:0 0 6px;font-size:1.05rem} .f-listas li a{color:var(--f-texto);text-decoration:none} .f-listas li a:hover{color:var(--f-coral)} .f-listas li em{font-family:var(--f-serif);font-style:italic;font-size:.9em;opacity:.9;margin-left:.2em} @media (max-width:900px){.f-listas .f-wrap{grid-template-columns:1fr;gap:28px}} /* el doctor (azul) */ .f-doctor{background:var(--f-azul);color:#fff} .f-doctor .f-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center} .f-doctor img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--f-shadow)} .f-doctor h2,.f-doctor h3,.f-doctor p{color:#fff} .f-doctor h2{margin:0 0 .4em} .f-doctor h3{font-size:1.15rem;margin:0 0 1em;opacity:.95} .f-doctor .f-btn{display:inline-block;margin-top:8px;text-decoration:none} @media (max-width:900px){.f-doctor .f-wrap{grid-template-columns:1fr;gap:28px}} /* antes y después */ .f-ayd{text-align:center} .f-ayd__img{max-width:460px;margin:0 auto 34px;box-shadow:0 0 60px rgba(177,200,233,.9)} .f-ayd__img img{width:100%;height:auto;display:block} .f-ayd h2{margin:0 0 .6em} .f-ayd__tabs{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none;border-bottom:1px solid rgba(69,76,84,.15);max-width:640px;margin-left:auto;margin-right:auto} .f-ayd__tabs a{display:block;padding:0 0 10px;color:var(--f-texto);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px} .f-ayd__tabs a:hover,.f-ayd__tabs .is-on a{border-color:var(--f-coral)} .f-ayd p{max-width:520px;margin:0 auto 24px} .f-ayd .f-btn{display:inline-block;text-decoration:none} /* reseñas (verde) */ .f-resenas{background:var(--f-verde);color:#fff;text-align:center} .f-resenas h2{color:#fff;margin:0 0 .3em} .f-resenas .ti-widget{--ti-text-color:#fff} .f-resenas .ti-widget,.f-resenas .ti-widget *{color:#fff !important} .f-resenas .ti-review-text,.f-resenas .ti-review-content{font-family:var(--f-serif) !important;font-style:italic !important;font-size:1.25rem !important;line-height:1.4 !important} /* prensa */ .f-prensa{text-align:center} .f-prensa h2{font-size:1rem !important;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin:0 0 26px} .f-prensa__logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;align-items:center} .f-prensa__logos img{height:44px;width:auto;opacity:.75;filter:grayscale(1)} /* instagram */ .f-ig{text-align:center;background:var(--f-crema)} .f-ig h2{margin:0 0 .6em} .f-ig .f-btn{display:inline-block;text-decoration:none} /* cita */ .f-cita{background:var(--f-cielo)} .f-cita .f-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .f-cita h2{margin:0 0 .4em} .f-cita__form{background:#fff;border-radius:22px;padding:22px;box-shadow:var(--f-shadow);min-height:420px} .f-cita__datos a{display:block;color:var(--f-texto);text-decoration:none;font-size:1.1rem;margin:0 0 8px} @media (max-width:900px){.f-cita .f-wrap{grid-template-columns:1fr;gap:28px}} /* por qué / ética / proceso */ .f-porque h2{margin:0 0 .8em} .f-porque h2+.f-grid3,.f-porque .f-pasos{margin-bottom:64px} .f-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px} .f-grid3 h3{font-size:1.15rem;margin:0 0 .4em} .f-grid3 p{font-size:.98rem;margin:0} .f-pasos{list-style:none;padding:0;margin:0;counter-reset:paso;display:grid;grid-template-columns:repeat(5,1fr);gap:24px} .f-pasos li{position:relative;padding-top:52px} .f-pasos li::before{counter-increment:paso;content:counter(paso);position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;background:var(--f-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem} .f-pasos h3{font-size:1.05rem;margin:0 0 .4em} .f-pasos p{font-size:.95rem;margin:0} @media (max-width:900px){.f-grid3{grid-template-columns:1fr}.f-pasos{grid-template-columns:1fr 1fr}} @media (max-width:520px){.f-pasos{grid-template-columns:1fr}} /* ========================================================= CHAT DE WHATSAPP (mismo comportamiento que el diseño anterior) ========================================================= */ .f-wa{position:fixed;right:20px;bottom:20px;z-index:9998;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;border:0;border-radius:50px;padding:12px 20px;font-family:var(--f-sans);font-size:1rem;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.25)} .f-wa:hover{background:#1ebd5a} .f-wa-chat{position:fixed;right:20px;bottom:84px;z-index:9999;width:min(320px,calc(100vw - 40px));background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden;font-family:var(--f-sans)} .f-wa-chat[hidden]{display:none} .f-wa-chat__head{background:#075E54;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:500} .f-wa-chat__close{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer} .f-wa-chat__body{padding:16px;background:#ECE5DD} .f-wa-chat__body p{background:#fff;border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:.95rem;line-height:1.45} .f-wa-chat__body .f-btn{display:block;text-align:center;text-decoration:none;background:#25D366 !important} .f-wa-chat__body .f-btn+.f-btn{margin-top:10px} @media (max-width:782px){.f-wa{padding:10px 14px;font-size:.9rem;right:14px;bottom:16px}.f-wa-chat{bottom:74px;right:14px}} /* vídeos */ .f-videos{text-align:center} .f-videos h2{margin:0 0 .8em} .f-videos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 28px} .f-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:var(--f-shadow)} .f-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .f-videos .f-btn{display:inline-block;text-decoration:none} @media (max-width:900px){.f-videos__grid{grid-template-columns:1fr}} /* ========================================================= PORTADA 1:1 (todo el contenido de la home anterior) ========================================================= */ .f-ops--head{padding-bottom:0;text-align:center} .f-ops--head h2{margin:0;font-size:clamp(2rem,4vw,3.2rem)} .f-ops h2{margin:0 0 .8em} .f-ops h2 a{color:inherit;text-decoration:none} .f-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .f-cards--4col{grid-template-columns:repeat(4,1fr)} .f-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--f-shadow);display:flex;flex-direction:column} .f-card__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--f-cielo)} .f-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .f-card:hover .f-card__img img{transform:scale(1.04)} .f-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} .f-card__body h3{font-size:1.2rem;margin:0 0 .5em} .f-card__body h3 a{color:inherit;text-decoration:none} .f-card__body p{font-size:.96rem;margin:0 0 1em} .f-card__body .f-btn{margin-top:auto;align-self:flex-start} .f-btn--mini{padding:9px 18px;font-size:.9rem} .f-btn--mini+.f-btn--mini{margin-left:8px} .f-group{grid-column:1/-1;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.8rem,3vw,2.4rem);margin:26px 0 0;color:var(--f-verde)} .f-item h3{font-size:1.15rem;margin:0 0 .4em} .f-item p{font-size:.98rem;margin:0 0 .8em} .f-item .f-btn{display:inline-block;text-decoration:none} .f-lead{max-width:860px;margin:0 0 44px} .f-lead p{font-size:1.12rem;line-height:1.55} .f-lead .f-btn{display:inline-block;text-decoration:none} .f-cierre{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:56px;align-items:center;margin-top:64px} .f-cierre .f-fig{grid-column:1;grid-row:1/span 4;margin:0} .f-cierre .f-fig img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:var(--f-shadow)} .f-cierre>p,.f-cierre>.f-btn{grid-column:2} .f-cierre>.f-btn{display:inline-block;justify-self:start;text-decoration:none} .f-fig{margin:0} .f-fig img{width:100%;height:auto;display:block;border-radius:14px} .f-casos h2{margin:0 0 .8em} .f-casos__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 36px} .f-casos p{max-width:860px} .f-casos .f-btn{display:inline-block;text-decoration:none;margin-top:8px} .f-doctor--gen .f-wrap{align-items:start} .f-doctor--gen h3{font-size:1.15rem} .f-btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 8px} .f-btns .f-btn{margin:0;padding:9px 18px;font-size:.9rem} .f-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px} .f-doctor .f-logos img{width:auto;height:56px;aspect-ratio:auto;object-fit:contain;background:#fff;border-radius:10px;padding:8px 12px;box-shadow:none} .f-ayd--gen .f-lead{margin:0 auto 24px;text-align:left} .f-ayd--gen .f-lead p{max-width:none;margin:0 0 1em} .f-videos__grid--1{grid-template-columns:1fr;max-width:720px;margin:0 auto 28px} @media (max-width:900px){ .f-cards{grid-template-columns:1fr 1fr;gap:18px} .f-casos__grid{grid-template-columns:repeat(3,1fr)} .f-cierre{grid-template-columns:1fr;row-gap:16px;margin-top:40px} .f-cierre .f-fig{grid-column:1;grid-row:auto;max-width:460px} .f-cierre>p,.f-cierre>.f-btn{grid-column:1} } @media (max-width:600px){ .f-cards{grid-template-columns:1fr} .f-casos__grid{grid-template-columns:1fr 1fr;gap:10px} } .f-fotos2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;align-items:start} .f-fotos2>p{grid-column:1/-1;max-width:860px;font-size:1.08rem} .f-fotos2 .f-fig img{border-radius:22px;box-shadow:var(--f-shadow);aspect-ratio:6/5;object-fit:cover} .f-doctor .f-logos img{background:none;padding:0;border-radius:0;height:48px} .f-btns .f-btn[href^="http"]{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)} .f-btns .f-btn[href^="http"]:hover{background:rgba(255,255,255,.12)} .f-card__img img{object-position:center 30%} @media (max-width:600px){.f-fotos2{grid-template-columns:1fr}} .f-doctor .f-logos img{filter:brightness(0) invert(1);opacity:.95} .f-doctor .f-btns .f-btn--sec[href^="http"]{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.6)} /* botón "subir" de Essential Addons: se solapa con el chat; el tema ya no lo necesita */ .eael-ext-scroll-to-top-button{display:none!important} /* ========================================================= LANDINGS EN CÓDIGO (plantilla Ferpal · Landing) ========================================================= */ body.f-landing .f-header{position:relative;background:var(--f-crema)} .f-land{padding:32px 0 80px} .f-land__wrap{max-width:1180px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start} .f-land__aside{position:sticky;top:96px} .f-land__wrap--solo{grid-template-columns:minmax(0,1fr);max-width:980px} .f-land__wrap--solo .f-land__aside{display:none} .f-land__body{min-width:0;font-size:1.05rem;line-height:1.6} .f-land__body>section{margin:0 0 56px} .f-land__body h1{font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.08;margin:.2em 0 .5em} .f-land__body h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:1.4em 0 .5em;scroll-margin-top:110px} .f-land__body h3{font-size:1.25rem;margin:1.2em 0 .4em} .f-land__body h4{font-size:1.08rem;margin:1em 0 .3em} .f-land__body p{margin:0 0 1em} .f-land__body ul,.f-land__body ol{margin:0 0 1.2em;padding-left:1.3em} .f-land__body li{margin:0 0 .4em} .f-land__body img{max-width:100%;height:auto} .f-land__body .f-fig{margin:0 0 1.4em} .f-land__body .f-fig img{width:100%;border-radius:18px;box-shadow:var(--f-shadow)} .f-land__body .f-fig figcaption{font-size:.9rem;opacity:.75;margin-top:.5em;text-align:center} .f-land__body .f-l-btn{margin:.4em 0 1.4em} .f-land__body .f-l-btn .f-btn{display:inline-block;text-decoration:none} .f-land__body .f-lista{list-style:none;padding:0} .f-land__body .f-lista li{position:relative;padding-left:1.4em} .f-land__body .f-lista li::before{content:"";position:absolute;left:0;top:.55em;width:.6em;height:.6em;border-radius:50%;background:var(--f-coral)} .f-land__body section[id]{scroll-margin-top:100px} .f-crumbs{font-size:.88rem;margin:0 0 1em;opacity:.8} .f-crumbs a{color:var(--f-texto)} .f-crumbs__sep{margin:0 .4em} .f-rating{color:var(--f-coral);letter-spacing:.1em;font-size:1.2rem;margin:0 0 .6em} /* columnas paralelas heredadas del diseño anterior */ .f-cols{display:grid;gap:32px;margin:0 0 1.4em} .f-cols-2{grid-template-columns:1fr 1fr} .f-cols-3{grid-template-columns:repeat(3,1fr)} .f-cols-4{grid-template-columns:repeat(4,1fr)} .f-col{min-width:0} /* 28-09: reserva el hueco de las fotos de .f-cols--fotos ANTES de cargar (lazy-load), tambien en escritorio, no solo en movil. Sin esto el (inline) deja el en 0x0 hasta que carga, y la galeria de casos se ve descuadrada al hacer scroll. */ .f-cols--fotos.f-cols--fotos>.f-col img{width:100%} .f-col>h2:first-child,.f-col>h3:first-child{margin-top:0} /* cajas con imagen + título + texto */ .f-ibox{margin:0 0 1.4em;background:#fff;border-radius:22px;padding:22px;box-shadow:var(--f-shadow)} .f-ibox img{width:100%;height:auto;border-radius:14px;margin-bottom:12px} .f-ibox figcaption h3,.f-ibox figcaption h4{margin:0 0 .4em;font-size:1.15rem} .f-ibox figcaption p{margin:0;font-size:.98rem} /* preguntas frecuentes */ .f-faq{border-top:1px solid rgba(69,76,84,.15);padding:0} .f-faq:last-of-type{border-bottom:1px solid rgba(69,76,84,.15)} .f-faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-size:1.12rem;position:relative} .f-faq summary::-webkit-details-marker{display:none} .f-faq summary::after{content:"+";position:absolute;right:4px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--f-coral);color:#fff;text-align:center;line-height:28px;font-size:1.1rem} .f-faq[open] summary::after{content:"–"} .f-faq__body{padding:0 0 20px} /* vídeo: portada + botón; el iframe solo se carga al pulsar */ .f-video--facade{display:block;position:relative;aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden;box-shadow:var(--f-shadow);margin:0 0 1.4em} .f-video--facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92} .f-video__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--f-coral);box-shadow:0 8px 30px rgba(0,0,0,.35)} .f-video__play::after{content:"";position:absolute;left:31px;top:23px;border-left:22px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent} .f-video--facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* índice lateral */ .f-indice{background:#fff;border-radius:22px;padding:20px 22px;box-shadow:var(--f-shadow)} .f-indice ul{list-style:none;margin:0;padding:0} .f-indice li{margin:0} .f-indice a{display:block;padding:8px 0;color:var(--f-texto);text-decoration:none;border-bottom:1px solid rgba(69,76,84,.1);font-size:.98rem} .f-indice li:last-child a{border-bottom:0} .f-indice a.is-on{color:var(--f-coral)} .f-indice__cita{display:block;margin-top:16px;text-align:center;text-decoration:none} .f-land__body .f-indice{display:none} @media (max-width:900px){ .f-land__wrap{grid-template-columns:1fr;gap:20px;padding:0 20px} .f-land__aside{position:static} .f-indice{padding:14px 18px} .f-indice ul{display:flex;flex-wrap:wrap;gap:6px 14px} .f-indice a{border:0;padding:4px 0} .f-cols-2,.f-cols-3,.f-cols-4{grid-template-columns:1fr} .f-fotos.f-cols-2{grid-template-columns:1fr 1fr;gap:10px} } /* rejillas de tarjetas heredadas (tipos de nariz, etc.) y anclas de sección */ .f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin:0 0 1.6em} .f-grid--ancha{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px} .f-grid .f-col{text-align:center} .f-grid .f-col .f-fig{margin:0 0 .5em} .f-grid .f-col .f-fig img{border-radius:14px;box-shadow:none} .f-grid .f-col h3{font-size:1rem;margin:0 0 .3em} .f-grid .f-col p{font-size:.92rem} .f-anchor{scroll-margin-top:100px} .f-cols .f-fig{margin:0} .f-cols .f-col>.f-l-btn:last-child{margin-bottom:0} /* índice: cabe en pantalla en escritorio; en móvil va plegado bajo un botón para que el H1 sea lo primero */ .f-land__aside{max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin} .f-indice__toggle{display:none} @media (max-width:900px){ .f-land__aside{max-height:none;overflow:visible} .f-indice{padding:0;background:transparent;box-shadow:none} .f-indice__toggle{display:block;width:100%;text-align:left;background:#fff;border:0;border-radius:14px;padding:12px 16px;font:inherit;font-size:.95rem;color:var(--f-texto);box-shadow:var(--f-shadow);cursor:pointer} .f-indice__toggle::after{content:"▾";float:right} .f-indice.is-open .f-indice__toggle::after{content:"▴"} .f-indice ul{display:none;background:#fff;border-radius:14px;padding:10px 16px;margin-top:8px;box-shadow:var(--f-shadow)} .f-indice.is-open ul{display:flex} .f-indice__cita{display:none} } /* entradas del blog y páginas genéricas */ .f-post__head{margin:0 0 28px} .f-post__head .f-kicker{margin:0 0 .6em} .f-post__head .f-kicker a{color:var(--f-texto);text-decoration:none} .f-post__meta{font-size:.9rem;opacity:.75;margin:0 0 1.2em} .f-post__portada{margin:0 0 1.6em} .f-post .f-land__body{font-size:1.08rem} .f-post .f-land__body>p:first-of-type{font-size:1.12rem} .f-post .f-land__body img,.f-page .f-land__body img{max-width:100%;height:auto;border-radius:14px} .f-post .f-land__body figure,.f-page .f-land__body figure{margin:0 0 1.4em} .f-post .f-land__body iframe,.f-page .f-land__body iframe{max-width:100%} .f-post .f-land__body table,.f-page .f-land__body table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem} .f-post .f-land__body td,.f-post .f-land__body th,.f-page .f-land__body td,.f-page .f-land__body th{border:1px solid rgba(69,76,84,.15);padding:8px 10px;text-align:left} .f-post .f-land__body blockquote,.f-page .f-land__body blockquote{border-left:4px solid var(--f-coral);margin:0 0 1.4em;padding:6px 0 6px 20px;font-family:var(--f-serif);font-style:italic;font-size:1.15rem} .f-post .f-land__body .wp-block-embed iframe{aspect-ratio:16/9;width:100%;height:auto} /* listados de entradas */ .f-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 1.6em} .f-posts__item{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--f-shadow);display:flex;flex-direction:column} .f-posts__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--f-cielo)} .f-posts__img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} .f-posts__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1} .f-posts__body h3{font-size:1.08rem;margin:0 0 .4em;line-height:1.3} .f-posts__body h3 a{color:inherit;text-decoration:none} .f-posts__meta{font-size:.82rem;opacity:.7;margin:0 0 .6em} .f-posts__body p{font-size:.95rem;margin:0 0 .8em} .f-posts__more{margin-top:auto;color:var(--f-coral);text-decoration:none;font-weight:500} @media (max-width:900px){.f-posts{grid-template-columns:1fr 1fr;gap:16px}} @media (max-width:600px){.f-posts{grid-template-columns:1fr}} /* redes sociales (página de gracias) y galerías de medios */ .f-social{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;padding:0;margin:1rem 0} .f-social a{font-weight:500} .f-grid figure.f-ibox img{max-height:120px;width:auto;margin:0 auto} .f-video--local{display:block;width:100%;height:auto;aspect-ratio:auto} /* banda oscura para los formularios de Clientify (etiquetas blancas) */ .f-form-dark{background:#1e2a44;color:#fff;padding:40px 36px;border-radius:24px;margin:0 0 56px} .f-form-dark h1,.f-form-dark h2,.f-form-dark h3,.f-form-dark h4,.f-form-dark p,.f-form-dark li,.f-form-dark a{color:#fff} .f-form-dark iframe{display:block;max-width:100%} @media (max-width:900px){.f-form-dark{padding:24px 16px;border-radius:16px}} .f-faq summary h2,.f-faq summary h3,.f-faq summary h4{display:inline;font:inherit;margin:0;color:inherit} /* ---- capa de conversión (0.6.0) ---- */ .f-conv{margin:18px 0 26px} .f-conv__btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .f-conv__btns .f-btn{margin:0;text-decoration:none} .f-btn--wa,.f-conv__btns .f-btn--wa{background:#25D366 !important;color:#fff !important;border-color:#25D366 !important} .f-btn--wa:hover{filter:brightness(.93)} .f-conv__chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.86rem;color:var(--f-tinta,#1E2A44);opacity:.85} .f-conv__chips li{position:relative;padding-left:16px} .f-conv__chips li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--f-coral,#F26A3D)} .f-conv--post{background:#F3F0E6;border-left:4px solid var(--f-coral,#F26A3D);padding:18px 22px;margin:28px 0;border-radius:0 12px 12px 0} .f-conv--post p{margin:0 0 8px} .f-conv--post .f-conv__t{font-family:var(--f-serif);font-style:italic;font-size:1.25rem;margin-bottom:6px} .f-conv--final{margin-top:40px} .f-conv--final .f-conv__btns{margin-top:12px} .f-barra{display:none} @media (max-width:767px){ .f-barra{display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:9998;background:#fff;border-top:1px solid rgba(30,42,68,.12);box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .f-barra a,.f-barra button{display:block;width:100%;text-align:center;padding:11px 6px;border-radius:999px;font-weight:500;font-size:.92rem;text-decoration:none;color:var(--f-tinta,#1E2A44);background:#F3F0E6} .f-barra a.f-barra__cita{background:var(--f-coral,#F26A3D);color:#fff} .f-barra .f-barra__wa{background:#25D366;color:#fff} /* 0.7.4: mismo verde que el WhatsApp del hero */ body{padding-bottom:72px} .f-cita-flotante{display:none !important} .f-wa{display:none !important} .f-wa-chat{bottom:84px;right:8px;left:8px;width:auto;max-width:none} #moove_gdpr_cookie_info_bar{bottom:72px !important} body.f-cookies-open .f-wa-chat{bottom:calc(var(--f-cookie-h,0px) + 84px)} .f-conv__btns .f-btn{flex:1 1 auto;text-align:center} .f-conv--hero .f-btn--sec{display:none} } /* aviso de cookies visible: la burbuja de chat sube para no taparlo (escritorio) */ body.f-cookies-open .f-wa{bottom:calc(var(--f-cookie-h,0px) + 20px)} body.f-cookies-open .f-wa-chat{bottom:calc(var(--f-cookie-h,0px) + 80px)} body.f-cookies-open .f-cita-flotante{top:auto;bottom:calc(var(--f-cookie-h,0px) + 110px);transform:none} .f-barra button{font:inherit;border:0;cursor:pointer} /* ---- 0.6.3: imágenes sin marco y NUNCA ampliadas por encima de su tamaño real (orden de Gustavo: «quita esos fondos», fotos «supercutres») ---- */ .f-land__body .f-fig img,.f-post .f-land__body img,.f-page .f-land__body img{width:auto;max-width:100%;height:auto;border-radius:0;box-shadow:none;display:block;margin:0 auto} .f-land__body .f-fig{text-align:center} .f-fotos2 .f-fig img{aspect-ratio:auto;object-fit:initial;border-radius:0;box-shadow:none} .f-grid .f-col .f-fig img{border-radius:0} .f-cierre .f-fig img{border-radius:0;box-shadow:none} /* galerías de miniaturas: en móvil siguen en rejilla (2 por fila) en vez de apilarse a ancho completo. ferpal.js clasifica cada .f-cols: .f-cols--fotos (todas las columnas empiezan por figura) o .f-cols--mixta (texto + foto) */ @media (max-width:767px){ .f-cols-2,.f-cols-3,.f-cols-4{grid-template-columns:1fr 1fr;gap:12px} /* rejilla MIXTA (p. ej. el hero de una landing): todo a una columna y la foto centrada, nunca pegada a la izquierda */ .f-cols--mixta>.f-col{grid-column:1/-1} .f-cols--mixta>.f-col>.f-fig img{width:auto;max-width:min(100%,360px);margin:0 auto} /* rejilla SOLO de tarjetas o fotos: 2 por fila */ .f-cols--fotos>.f-col img{width:100%} .f-cols--fotos>.f-col h3,.f-cols--fotos>.f-col h4{font-size:.95rem;margin:.4em 0 0} .f-cols--fotos>.f-col p{font-size:.88rem} /* una fila de tres miniaturas (solo figuras) sigue siendo de tres, como en producción */ .f-cols-3.f-cols--solo-figuras{grid-template-columns:1fr 1fr 1fr;gap:8px} .f-cols.f-cols--panoramica{grid-template-columns:1fr;gap:16px} } /* 0.6.4: la banda azul del formulario de Clientify solo envuelve al formulario, nunca a las fotos de su sección (ver ferpal.js) */ .f-form-dark .f-fig{background:transparent} /* 0.6.9: tarjeta flotante «Agenda tu primera consulta» (landings de operación; solo escritorio) */ .f-flot{position:fixed;right:20px;top:-420px;z-index:8800;opacity:0;transition:opacity .8s,top .8s ease-in-out} .f-flot.is-on{top:84px;opacity:1} .f-flot.is-off{display:none} .f-flot img{width:280px;height:auto;display:block;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.2)} .f-flot__x{position:absolute;top:-8px;right:6px;font:700 34px/1 var(--f-sans);background:none;border:0;color:#222;cursor:pointer;padding:0 4px} @media (max-width:767px){.f-flot{display:none}} /* 0.7.0: barra de anclas («¿Qué es?», «Precios», «FAQ»…): chips compactos en una fila que se envuelve, no botones sueltos en rejilla */ .f-land__body .f-anclas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 2em;padding:14px 0 16px;border-top:1px solid rgba(69,76,84,.12);border-bottom:1px solid rgba(69,76,84,.12)} .f-land__body .f-anclas::before{content:"Ir a";font:500 .78rem/1 var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--f-texto);opacity:.65;margin-right:6px} .f-land__body .f-anclas .f-col{width:auto;text-align:left} .f-land__body .f-anclas .f-l-btn{margin:0} .f-land__body .f-anclas .f-btn{background:var(--f-blanco) !important;color:var(--f-texto) !important;border:1.5px solid rgba(69,76,84,.2) !important;padding:.5em 1em !important;font-size:.88rem !important;line-height:1.2;white-space:nowrap;transform:none} .f-land__body .f-anclas .f-btn:hover{border-color:var(--f-coral) !important;color:var(--f-coral) !important;background:var(--f-blanco) !important;transform:none} @media (max-width:767px){.f-land__body .f-anclas{gap:6px;padding:12px 0 14px}.f-land__body .f-anclas .f-btn{font-size:.82rem !important;padding:.45em .85em !important}} /* 0.7.6: índice de antes y después (ferpal.js lo monta a partir del patrón heredado) */ .f-l-sec--ayd{margin:0 !important;padding:26px 0;border-bottom:1px solid rgba(69,76,84,.12)} .f-l-sec--ayd .f-anchor{scroll-margin-top:110px} .f-ayd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center} .f-ayd__info{text-align:left} .f-ayd__kicker{font:italic 400 1.45rem/1.1 var(--f-serif);color:var(--f-texto);margin:0 0 4px} .f-land__body .f-ayd__name{font-size:1.5rem !important;line-height:1.2;margin:0 0 16px !important} .f-ayd__name a{color:inherit;text-decoration:none} .f-ayd__name a:hover{color:var(--f-coral)} .f-ayd__thumbs{display:flex;gap:10px} .f-land__body .f-ayd__thumbs img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:none;margin:0;display:block} .f-ayd__pair{display:grid;grid-template-columns:auto 220px 220px auto;gap:0 10px;align-items:center} .f-ayd__lado{display:grid;gap:10px} .f-ayd__lbl{writing-mode:vertical-rl;transform:rotate(180deg);font:500 .72rem/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--f-texto);opacity:.6} .f-ayd__lbl--d{transform:none} .f-land__body .f-ayd__fig{margin:0} .f-ayd__fig a{display:block} .f-land__body .f-ayd__fig img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;border-radius:0;box-shadow:none} .f-l-sec--aydhero{background:#1E2A44;color:#fff;text-align:left;margin:0 0 8px !important;padding:44px 40px 40px;border-radius:24px} .f-l-sec--aydhero .f-cols{align-items:center} .f-l-sec--aydhero .f-col{text-align:left} .f-l-sec--aydhero h1{color:#fff;font-size:clamp(2.4rem,5vw,3.6rem) !important;margin:0 0 .4em !important} .f-ayd-hero__eyebrow{font:500 .78rem/1.2 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;opacity:.9} .f-ayd-hero__lead{font-size:1.05rem;line-height:1.55;margin:0;max-width:34em} .f-land__body .f-l-sec--aydhero .f-fig{margin:0} .f-land__body .f-l-sec--aydhero .f-fig img{border-radius:16px;box-shadow:none} @media (max-width:900px){.f-ayd{grid-template-columns:1fr;gap:16px}.f-ayd__pair{grid-template-columns:auto 1fr 1fr auto;gap:0 6px}.f-land__body .f-ayd__fig img{width:100%;height:auto;aspect-ratio:1/1}.f-l-sec--aydhero{padding:28px 22px 26px;border-radius:18px}} @media (max-width:520px){.f-ayd__pair{grid-template-columns:1fr 1fr;gap:4px 6px}.f-ayd__lbl,.f-ayd__lbl--d{writing-mode:horizontal-tb;transform:none;text-align:center;order:-1}.f-ayd__kicker{font-size:1.25rem}.f-land__body .f-ayd__name{font-size:1.3rem !important}} /* 0.7.7 · figuras sueltas consecutivas en fila, nunca apiladas en columna */ .f-figrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin:0 0 1.6em} .f-land__body .f-figrow .f-fig{margin:0 auto} .f-land__body .f-figrow .f-fig img{width:100%;max-width:100%;height:auto;margin:0} @media (max-width:520px){ .f-figrow{gap:12px} .f-figrow--m1{grid-template-columns:1fr} } /* 0.7.7 · el formulario de Clientify, centrado dentro de la banda azul */ .f-form-dark div[id^="_form_"]{margin-left:auto;margin-right:auto;max-width:620px} .f-form-dark form{margin-left:auto;margin-right:auto} /* 0.7.8 · enlaces legibles sobre la banda azul del bloque del doctor */ .f-doctor a:not(.f-btn){color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .f-doctor a:not(.f-btn):hover{opacity:.82} /* 0.7.8 · los logos de sociedades no se agrandan por encima de su tamaño real */ .f-doctor .f-logos img{height:auto;max-height:48px;width:auto} .f-footer__logos img{height:auto;max-height:46px;width:auto} /* ========================================================= 0.7.9 · LEGIBILIDAD DE ENLACES (medido a 390px) El azul de marca #5A97F6 sobre crema #F9F8F3 da 2.75:1. AA pide 4.5:1 para texto normal. La web en producción usa un azul oscuro (#1E2A44 -> 13.4:1) para los enlaces de texto. Se separa el azul de TEXTO del azul de MARCA: fondos, botones y bandas siguen usando --f-azul; los enlaces, --f-azul-link. #2A6BCC = mismo tono (217 grados), 5.15:1 sobre blanco y 4.90:1 sobre crema. ========================================================= */ :root{--f-azul-link:#2A6BCC} a,a:visited{color:var(--f-azul-link)} .f-migas a,.f-migas a:visited{color:var(--f-azul-link)} /* subrayado solo en prosa: el enlace debe distinguirse del texto gris por forma y no solo por color */ .f-land__body p a:not(.f-btn),.f-land__body li a:not(.f-btn), .f-post__body p a:not(.f-btn),.f-post__body li a:not(.f-btn), .entry-content p a:not(.f-btn):not(.elementor-button), .entry-content li a:not(.f-btn):not(.elementor-button), .elementor-widget-text-editor p a:not(.elementor-button), .elementor-widget-text-editor li a:not(.elementor-button){ text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px } .f-land__body p a:not(.f-btn):hover,.f-post__body p a:not(.f-btn):hover{color:var(--f-coral-2)} /* "Leer más" de las tarjetas del blog: coral #F78467 sobre blanco daba 2.48:1 y se repetía 205 veces en el índice */ .f-posts__more{color:var(--f-azul-link);text-decoration:underline;text-underline-offset:3px} .f-posts__more:hover{color:var(--f-coral-2)} @media (max-width:520px){ /* la línea legal del pie se quedaba en 11.8px */ .f-footer__col small{font-size:.8rem} } /* --------------------------------------------------------- 0.7.9b · EL HÉROE ERA ILEGIBLE Texto blanco sobre el azul cielo #B1C8E9 = 1.71:1. Es lo primero que ve el paciente y en el móvil casi no se leía. El texto pasa al gris de la casa #454C54 sobre el mismo fondo = 5.09:1. Los botones y la cabecera sobre el héroe no se tocan. --------------------------------------------------------- */ .f-hero{color:var(--f-texto)} .f-hero .f-kicker{color:var(--f-texto);opacity:.85} .f-hero h1{color:var(--f-texto) !important} .f-hero .f-h1-sub{color:var(--f-texto)} .f-hero p{color:var(--f-texto)} /* la cabecera transparente sobre el héroe: el blanco tampoco se leía (1.71:1 sobre el azul cielo) */ body.home .f-nav a,body.home .f-nav__ops,body.home .f-brand,body.home .f-tel, body.f-portada .f-nav a,body.f-portada .f-nav__ops,body.f-portada .f-brand,body.f-portada .f-tel, .f-header--sobre .f-nav a,.f-header--sobre .f-nav__ops,.f-header--sobre .f-brand, .f-header--sobre .f-tel{color:var(--f-texto)} body.home .f-burger span,body.f-portada .f-burger span, .f-header--sobre .f-burger span{background:var(--f-texto)} /* 0.7.9c: párrafos que el contenido original dejó sin

(un o un suelto colgando de la sección). Se les devuelve el aire de párrafo en vez de quedar pegados al anterior. */ .f-land__body>section>i,.f-land__body>section>em, .f-land__body>section>strong,.f-land__body>section>b{ display:block;margin:0 0 1em } /* ========================================================= 0.7.9e · EL AZUL DE LAS BANDAS, UN PUNTO MÁS PROFUNDO El blanco sobre el #5A97F6 de las maquetas daba 2.92:1 en la banda de cifras, la banda del doctor y el pie — o sea, en todas las páginas del sitio. #2F6FD6 es el mismo tono (217°), solo más profundo: el blanco encima pasa a 4.49:1 (AA). Para volver al azul de las maquetas basta con borrar esta línea. ========================================================= */ :root{--f-azul:#2F6FD6} /* 0.7.9f: dentro de la banda oscura del formulario, nada se queda en gris */ .f-form-dark h5,.f-form-dark h6,.f-form-dark strong,.f-form-dark b, .f-form-dark em,.f-form-dark i,.f-form-dark span,.f-form-dark small, .f-form-dark td,.f-form-dark th,.f-form-dark figcaption,.f-form-dark label{color:#fff} .f-form-dark a,.f-form-dark a strong,.f-form-dark a b{color:#fff;text-decoration:underline;text-underline-offset:2px} /* 0.7.9i: las estrellas de valoración en coral sobre crema daban 2.34:1. Mismo naranja, un punto más profundo: 3.53:1 (mínimo 3 para gráficos que transmiten información). */ .f-rating,.f-rating *{color:#E05A2B} /* ---- 0.8.2 · caja «¿Te has visto en este caso?» y caja de autor ---- */ .f-caso-cta{max-width:830px;margin:2.6em auto 1.4em;padding:1.6em 1.5em 1.7em;border-radius:10px} .f-caso-cta h2{margin:0 0 .4em;font-size:1.32rem;line-height:1.3;color:#fff} .f-caso-cta p{margin:0 0 1.1em;line-height:1.6;color:#e8ecf4} .f-caso-cta__btns{display:flex;flex-wrap:wrap;gap:12px} .f-caso-cta__btns .f-btn{display:inline-block;padding:13px 22px;border-radius:8px;font-weight:700;font-size:.95rem;text-decoration:none;background:#fff;color:#1e2a44} .f-caso-cta__btns .f-btn--sec{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)} .f-caso-cta__btns .f-btn--wa{background:#25D366;color:#0b2e17} @media (max-width:520px){.f-caso-cta__btns{flex-direction:column}.f-caso-cta__btns .f-btn{text-align:center}} .f-autor{max-width:830px;margin:2.2em auto 3em;padding:1.1em 1.2em 1.2em;border:1px solid #e0e4e8;border-left:3px solid #0d5c66;background:#f8fafb;border-radius:4px} .f-autor p{margin:0 0 .35em;line-height:1.45} .f-autor__n{font-weight:700} .f-autor__r{margin:0;font-size:.88rem;color:#5b6670} /* ---- 0.8.8 · ficha de autor del blog y artículos relacionados ---- */ .f-autor-blog{max-width:830px;margin:2.4em auto 3em;padding:1.3em 1.4em 1.4em;display:flex;gap:1.2em;align-items:flex-start;border:1px solid #e0e4e8;border-left:3px solid #0d5c66;background:#f8fafb;border-radius:4px} .f-autor-blog__foto{width:110px;height:110px;border-radius:50%;object-fit:cover;flex:0 0 auto} .f-autor-blog__txt h2{margin:0 0 .5em;font-size:1.12rem;line-height:1.3} .f-autor-blog__txt p{margin:0 0 .7em;line-height:1.6;font-size:.95rem} .f-autor-blog__rs{margin:0} @media (max-width:560px){.f-autor-blog{flex-direction:column;align-items:center;text-align:left}.f-autor-blog__foto{width:88px;height:88px}} .f-rel{max-width:830px;margin:2.4em auto 1.4em} .f-rel h2{margin:0 0 .5em;font-size:1.15rem} .f-rel__lista{margin:0;padding-left:1.1em} .f-rel__lista li{margin:0 0 .35em;line-height:1.5} /* ---- 0.9.0 · legibilidad de los botones (14 sept.) ------------------------------------ El coral de Silvia Ferpal se queda como está; lo que cambia es el color de la etiqueta. Blanco sobre coral #F78467 daba 2,48:1 (el mínimo AA es 4,5:1) y el texto gris 3,5:1. Azul oscuro sobre el mismo coral da 5,75:1 (4,7:1 en el hover) sin tocar la paleta. El verde de WhatsApp con blanco daba 1,98:1; con verde oscuro da 7,47:1. */ .elementor-button,.wp-block-button__link,button.button,input[type=submit],.ast-button,.f-btn{ color:#1E2A44 !important; } .elementor-button:hover,.wp-block-button__link:hover,input[type=submit]:hover,.f-btn:hover{ color:#1E2A44 !important; } .f-btn--sec,.elementor-button.f-btn--sec{color:#1E2A44 !important} .f-btn--wa,.f-conv__btns .f-btn--wa,.f-caso-cta__btns .f-btn--wa,.f-wa-chat__body .f-btn{ color:#0B2E17 !important; } /* Excepción: los botones fantasma que van encima de una banda oscura siguen en blanco */ .f-btns .f-btn[href^="http"], .f-doctor .f-btns .f-btn--sec[href^="http"], .f-form-dark .f-btn[style*="transparent"]{color:#fff !important} /* Los «chips» del índice: iban coral con texto gris (3,5:1). Se quedan en blanco con borde, que es lo que pedía la regla de la línea 666 y en la práctica no se estaba aplicando. */ .f-land__body .f-anclas .f-l-btn .f-btn, .f-land__body .f-anclas .f-col .f-btn{ background:#fff !important;color:#1E2A44 !important; border:1.5px solid rgba(30,42,68,.28) !important; } .f-land__body .f-anclas .f-l-btn .f-btn:hover, .f-land__body .f-anclas .f-col .f-btn:hover{ background:#fff !important;color:#1E2A44 !important;border-color:var(--f-coral) !important; } /* paginación opcional del listado de entradas (se activa con pag="N" en [ferpal_posts]) */ .f-pag{display:flex;align-items:center;justify-content:center;gap:16px;margin:2em 0 1em;flex-wrap:wrap} .f-pag a{color:#1E2A44;text-decoration:underline;text-underline-offset:3px;font-weight:600} .f-pag__n{color:#454C54} /* ── 1.0.2 · Dos reglas que en la web publicada vivian en el CSS adicional del personalizador (que es por tema, y por eso no viaja al tema hijo). De los 160 selectores de aquel CSS solo estos dos siguen encontrando algo aqui: el boton flotante de Essential Addons, que la web publicada esconde, y la barra de cookies, que debe quedarse fija abajo y por encima de todo. ─────────────── */ .eael-ext-scroll-to-top-button { display: none !important; } #moove_gdpr_cookie_info_bar { position: fixed !important; z-index: 999999 !important; bottom: 0 !important; left: 0; right: 0; } /* 1.0.3 · enlace de área al pie de cada columna del megamenú */ .f-mega__grupo ul li.f-mega__todas { margin-top: .55em; padding-top: .55em; border-top: 1px solid rgba(255,255,255,.22); } .f-mega__grupo ul li.f-mega__todas a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ========================================================= TIPOGRAFÍA ÚNICA — 21-09-2026, orden del Dr. Sordo: «asegúrate de que todas son las del tema». El tema usa DM Sans para todo y Playfair Display en cursiva para los remates. Tres intrusos medidos en el HTML servido a visitantes: 1) la hoja de Clientify (formulario incrustado) pone body{font-family:Poppins !important} y Poppins ni siquiera se carga: lo que hereda de body (barra Llamar/WhatsApp) salía en la letra del sistema; 2) el aviso de cookies (Moove) va en Nunito y el selector de idioma en Arial; 3) las páginas que aún pinta Elementor usan su tipografía global (Playfair recta, Roboto Slab, Roboto). ========================================================= */ html body{font-family:var(--f-sans) !important} #moove_gdpr_cookie_info_bar,#moove_gdpr_cookie_info_bar *,#moove_gdpr_cookie_modal,#moove_gdpr_cookie_modal *,.gtranslate_wrapper,.gtranslate_wrapper *,.gt_float_switcher,.gt_float_switcher *{font-family:var(--f-sans) !important} html body[class*="elementor-kit-"]{--e-global-typography-primary-font-family:"DM Sans" !important;--e-global-typography-secondary-font-family:"DM Sans" !important;--e-global-typography-text-font-family:"DM Sans" !important;--e-global-typography-accent-font-family:"DM Sans" !important} .elementor-widget-posts .elementor-post__title,.elementor-widget-posts .elementor-post__title a,.elementor-widget-posts .elementor-post__meta-data,.elementor-widget-posts .elementor-post__excerpt,.elementor-widget-posts .elementor-post__read-more{font-family:var(--f-sans) !important} /* 21-09 noche: logos de sociedades de la banda azul en rejilla de 3 columnas centrada (en el móvil quedaba un hueco a la derecha). Cada logo en una caja igual (alto máx. 52 px) y centrado; sustituye a la regla de 48 px que vivía en el fragmento 908. */ .f-doctor .f-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px;align-items:center;justify-items:center} .f-doctor .f-logos img{width:auto !important;max-width:100% !important;height:auto !important;max-height:52px !important;object-fit:contain} /* 21-09-2026 — Casos reales de la portada: la blefaroplastia va con el encuadre de ojos (2:1, versión 4, caso 11529), antes arriba y después abajo, ocupando dos columnas. El hueco que deja la pareja impar lo llena la tarjeta «Más casos». En tableta, dos columnas como en móvil para que antes y después no se separen de fila. */ .f-casos__grid{grid-auto-flow:row dense} .f-casos__grid .f-fig--ojos{grid-column:3 / 5;margin:0;position:relative;overflow:hidden;border-radius:14px} .f-casos__grid .f-fig--ojos-a{grid-row:1} .f-casos__grid .f-fig--ojos-d{grid-row:2} .f-casos__grid .f-fig--ojos img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .f-casos__mas{grid-column:span 2;display:flex;align-items:center;justify-content:center;padding:24px;border-radius:14px;background:var(--f-cielo);color:var(--f-texto);font-family:var(--f-serif);font-style:italic;font-size:1.35rem;line-height:1.3;text-align:center;text-decoration:none} .f-casos__mas:hover{background:var(--f-azul);color:var(--f-blanco)} @media (max-width:900px){ .f-casos__grid{grid-template-columns:1fr 1fr} .f-casos__grid .f-fig--ojos{grid-column:1 / -1;grid-row:auto;aspect-ratio:2 / 1} .f-casos__mas{grid-column:1 / -1;min-height:96px} } /* 21-09-2026 — Vídeos de la portada: son Shorts verticales de YouTube. Se muestran en 9:16 con la miniatura vertical (fachada: el reproductor de YouTube solo se carga al pulsar, vía el manejador de a.f-video--facade de ferpal.js). Escritorio: tres en fila. Móvil y tableta: carrusel horizontal que se desliza con el dedo, asomando el siguiente. */ .f-videos__lead{max-width:640px;margin:-.2em auto 1.6em} .f-videos__grid--shorts{grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px;margin:0 auto 28px;gap:24px} .f-short{margin:0;text-align:left} .f-video--short{aspect-ratio:9 / 16;margin:0 0 12px;border-radius:18px} .f-video--short img{opacity:1} .f-short figcaption{font-size:.95rem;line-height:1.4} .f-short figcaption strong{display:block;font-weight:500;margin-bottom:2px} .f-short figcaption span{opacity:.75} @media (max-width:900px){ .f-videos__grid--shorts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;max-width:none;margin:0 -20px 24px;padding:0 20px 6px;scrollbar-width:none} .f-videos__grid--shorts::-webkit-scrollbar{display:none} .f-short{flex:0 0 70%;scroll-snap-align:center} } /* 21-09-2026 — Casos reales de la portada: lista de accesos al antes y después de cada operación (sustituye a la sección «Antes y después de nuestros pacientes», que se quedó sin fotos al convertir la portada: eran los pies de los tres vídeos testimonio, que ya tienen su sección). */ .f-casos__label{margin:0 0 10px;font-weight:500} .f-casos__ops{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 28px} .f-casos__ops li{margin:0} .f-casos__ops a{display:inline-block;padding:8px 14px;border:1px solid rgba(69,76,84,.25);border-radius:999px;color:var(--f-texto);text-decoration:none;font-size:.95rem;line-height:1.2;background:var(--f-blanco)} .f-casos__ops a:hover{background:var(--f-cielo);border-color:var(--f-cielo)} /* 21-09-2026 — Botones de YouTube e Instagram juntos al pie de la sección de vídeos (la sección «Nuestro día a día en redes» era solo un título y un botón, sin contenido, y se ha retirado). */ .f-videos__redes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .f-videos__redes .f-btn{margin:0} /* 21-09-2026 — Estilos que vivían como