/*
 * Maria Eugenia Novias — Home
 * Estilos de los elementos del plugin. Paleta y tipografía: guía de estilo web.
 *
 * Ajuste opcional (Apariencia > Personalizar > CSS adicional):
 *   :root{ --meho-top: 80px; }    alto del menú fijo de Uncode, si tapa los carruseles.
 *   :root{ --meho-escala: 1.1; }  texto corrido un 10% más grande (1 = tamaño de diseño).
 */

/* ===== Fuentes locales ===== */
@font-face{font-family:'MEH Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'MEH Cormorant';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'MEH Jost';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'MEH Jost';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'MEH Jost';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format('woff2')}

/* ===== Base de cada sección ===== */
.meho{
  --gut:clamp(24px,6vw,96px);
  --serif:'MEH Cormorant','Cormorant Garamond',Georgia,serif;
  --sans:'MEH Jost','Jost',Helvetica,Arial,sans-serif;
  --ink:#2B2623;--body:#5C534D;--gold:#7A5D2B;--line:#B8975A;--champ:#D9BE8A;
  position:relative;display:block;width:100%;box-sizing:border-box;
  margin:0 !important;overflow-x:clip;
  background:#FAF6F0;color:var(--ink);
  --meho-base:calc(17px * var(--meho-escala, 1));
  font-family:var(--sans);font-weight:300;font-size:var(--meho-base);line-height:1.7;
  text-align:left;letter-spacing:normal;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.meho *,.meho *::before,.meho *::after{box-sizing:border-box}
/* Uncode fija tamaños sobre p, li, span, div…, y una regla directa le gana a lo
   heredado aunque la nuestra sea más específica. Por eso cada elemento de texto
   vuelve a tomar el tamaño de su contenedor. */
.meho p,.meho ul,.meho li,.meho div,.meho span,.meho a,.meho strong,.meho em,
.meho figure,.meho figcaption,.meho button{font-size:inherit;line-height:inherit}
.meho h1,.meho h2,.meho h3{margin:0;padding:0;border:0;font-family:var(--serif);font-weight:300;font-style:normal;color:inherit;letter-spacing:normal;text-transform:none;line-height:1.05}
.meho em{font-style:italic;font-weight:inherit;color:inherit}
/* Negrita del texto corrido: Jost 500 sobre un cuerpo de 300. Suficiente contraste
   sin que grite. En los títulos no hay peso 500 cargado, así que ahí se resalta con
   el dorado en vez de una negrita falsa que el navegador dibujaría engordando. */
.meho strong{font-weight:500;color:var(--ink)}
.meho h1 strong,.meho h2 strong,.meho h3 strong{font-weight:inherit;color:var(--gold)}
.meho p{margin:0;color:var(--body)}
.meho figure{margin:0;padding:0}
.meho img{display:block;max-width:100%;height:auto;border:0;border-radius:0;margin:0}
.meho a{color:var(--gold);text-decoration:none}
.meho a:hover{color:var(--ink)}
.meho ul{margin:0;padding:0;list-style:none}
.meho button{font:inherit}

/* Uncode: quitar los márgenes que el tema pone entre elementos. */
:is(.uncont,.wpb_wrapper,.vc_column-inner)>.meho{margin-top:0 !important;margin-bottom:0 !important}

/* ===== Tipografía ===== */
.meho .meho-eb{font-family:var(--sans);font-size:13px;line-height:1.5;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);font-weight:400}
.meho .meho-h1{font-size:clamp(46px,6.2vw,92px);line-height:1.02;letter-spacing:-0.01em}
.meho .meho-h2{font-size:clamp(36px,4.4vw,60px);line-height:1.05}
.meho .meho-gold em{color:var(--gold)}
.meho .meho-lead{font-size:calc(18px * var(--meho-escala, 1));color:#4A413B}
.meho .meho-label{font-family:var(--sans);font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--body);font-weight:400;line-height:1.5}
.meho .meho-gl{display:block;width:56px;height:1px;background:var(--line);transform-origin:left}
.meho .meho-gl-c{margin-left:auto;margin-right:auto}
.meho .meho-note{font-size:calc(14px * var(--meho-escala, 1));color:var(--body)}
.meho .meho-note a{color:var(--gold);text-decoration:underline}
.meho .meho-empty{padding:24px var(--gut);color:var(--body);font-style:italic}

/* ===== Secciones y cabeceras ===== */
.meho-sec{padding:120px var(--gut)}
.meho .meho-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin:0 auto 48px;max-width:900px}
.meho .meho-col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:24px}
.meho .meho-fig{position:relative;flex:1 1 280px;max-width:480px;margin:0 auto;min-width:0}

/* ===== Botones ===== */
.meho .meho-btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:4px}
.meho .meho-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 36px;background:var(--ink);color:#FAF6F0;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;font-weight:400;text-decoration:none;transition:background .25s ease,color .25s ease}
.meho .meho-btn:hover{background:#443C36;color:#FAF6F0}
.meho .meho-btn-o{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.meho .meho-btn-o:hover{background:var(--ink);color:#FAF6F0}
.meho .meho-btn-o:hover svg{stroke:#FAF6F0}
.meho .meho-btn svg{flex:none}
.meho .meho-link{display:inline-block;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;font-weight:400;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px}
.meho .meho-arrows{display:none;gap:12px}
.meho-js .meho .meho-arrows{display:flex}
.meho .meho-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .25s ease,color .25s ease}
.meho .meho-arrow:hover{background:var(--ink);color:#FAF6F0}
.meho .meho-arrow svg{width:20px;height:20px}

/* ===== 1. Portada ===== */
@keyframes meho-rise{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes meho-zoom{from{scale:1.18}to{scale:1}}
.meho-hero{min-height:720px;display:flex;align-items:center;overflow:hidden;padding:0}
.meho .meho-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--foco,80% 30%);animation:meho-zoom 3.4s cubic-bezier(.2,.6,.2,1) both}
.meho .meho-hero-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,246,240,0.96) 0%,rgba(250,246,240,0.9) 34%,rgba(250,246,240,0) 64%)}
.meho .meho-hero-content{position:relative;padding:96px clamp(24px,7vw,112px);max-width:640px;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
@media (min-width:1200px){.meho .meho-hero-content{padding-left:clamp(112px,11vw,190px);padding-right:64px;max-width:720px}}
.meho .meho-hero-content .meho-lead{max-width:480px}
.meho .meho-hl{animation:meho-rise 1.3s cubic-bezier(.2,.6,.2,1) both}
.meho .meho-hl1{animation-delay:.3s}.meho .meho-hl2{animation-delay:.65s}.meho .meho-hl3{animation-delay:1s}.meho .meho-hl4{animation-delay:1.3s}.meho .meho-hl5{animation-delay:1.6s}

/* ===== 2. Colección MON CHERI (video) ===== */
.meho-video{padding:110px var(--gut);display:flex;flex-wrap:wrap;align-items:center;gap:56px clamp(32px,5vw,80px)}
.meho .meho-video-txt{flex:1 1 280px;max-width:470px;min-width:0;display:flex;flex-direction:column;gap:24px}
.meho .meho-vid{flex:1 1 360px;min-width:0;position:relative;display:block;aspect-ratio:16/9;background:var(--ink)}
.meho .meho-vid-frame{position:absolute;top:14px;left:14px;right:14px;bottom:14px;border:1px solid rgba(217,190,138,0.5)}
.meho .meho-vid-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.meho .meho-vid-logo{width:clamp(150px,22vw,280px);height:auto}
.meho .meho-vid-play{width:88px;height:88px;border-radius:50%;border:1px solid var(--champ);display:flex;align-items:center;justify-content:center;transition:background .3s ease,scale .3s ease}
.meho .meho-vid-play svg{width:30px;height:30px}
.meho .meho-vid:hover .meho-vid-play{background:rgba(217,190,138,0.14);scale:1.06}
.meho .meho-vid-label{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:var(--champ);font-weight:400}
.meho .meho-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== Carrusel: lo mueve el visitante (dedo, flechas o arrastrando) =====
 * El contenedor que se desplaza es .meho-pin-stage; .meho-pin-track es el contenido. */
.meho .meho-pin{position:relative}
.meho .meho-pin-stage{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;-webkit-user-select:none;user-select:none}
.meho .meho-pin-stage img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.meho .meho-pin-stage::-webkit-scrollbar{height:6px}
.meho .meho-pin-stage::-webkit-scrollbar-thumb{background:var(--line)}
/* Con JS hay flechas y barra dorada, así que la barra del navegador sobra. */
.meho-js .meho .meho-pin-stage{scrollbar-width:none;-ms-overflow-style:none}
.meho-js .meho .meho-pin-stage::-webkit-scrollbar{display:none}
.meho .meho-pin-track{display:flex;gap:var(--gap,28px);width:max-content;padding:0 var(--gut) 18px}
.meho .meho-slide{position:relative;flex:0 0 clamp(250px,26vw,370px);display:block;color:inherit}
.meho .meho-slide-img{width:100%;height:auto;aspect-ratio:var(--ar,3/4);object-fit:cover;object-position:50% 0%;transition:opacity .3s ease}
.meho a.meho-slide:hover .meho-slide-img{opacity:.88}
.meho .meho-slide-t{display:block;margin-top:14px;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--body);font-weight:400}
.meho .meho-pin-bar{display:none;margin:4px var(--gut) 0;height:2px;background:#E3D5C6}
.meho-js .meho .meho-pin-bar{display:block}
.meho .meho-pin-bar span{display:block;height:100%;background:var(--line);transform-origin:left;transform:scaleX(var(--p,0))}
.meho .meho-pin-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:28px var(--gut) 0}
.meho .meho-pin-foot-c{justify-content:center}
.meho-js .meho .meho-arrow[disabled]{opacity:.3;pointer-events:none}
/* Arrastrar con el ratón en computadora. */
.meho-js .meho .meho-pin-stage{cursor:grab}
.meho-js .meho .meho-pin-stage.is-drag{cursor:grabbing;scroll-behavior:auto}
.meho-js .meho .meho-pin-stage.is-drag a{pointer-events:none}

/* ===== Fotos sobre la mesa (collage encimado) =====
 * Cada foto se posa al entrar por la derecha, según cuánto ha desplazado el visitante. */
/* Valores de respaldo: sin JS el collage igual se ve bien y se desplaza con el dedo. */
.meho .meho-pile{--mh:clamp(240px,26vw,430px);--step:clamp(150px,13vw,210px);--pad:var(--gut)}
@media (max-width:640px){.meho .meho-pile{--mh:clamp(220px,81vw,330px);--step:clamp(120px,40vw,180px)}}
.meho .meho-pile .meho-pin-track{position:relative;display:block;padding:0;height:calc(var(--mh) + 130px)}
.meho .meho-pile .meho-slide{
  position:absolute;
  left:calc(var(--pad,24px) + var(--i) * var(--step,180px));
  top:calc(46px + var(--dy) * 1px);
  height:auto;width:auto;flex:none;z-index:var(--z,1);
  padding:9px 9px 26px;background:#FFFDF9;
  box-shadow:0 18px 40px rgba(43,38,35,0.22),0 2px 6px rgba(43,38,35,0.14);
  rotate:calc(var(--r) * 1deg);
}
.meho .meho-pile .meho-slide-img{height:var(--mh);width:auto;max-width:none;aspect-ratio:var(--ar,3/4)}
.meho-js .meho .meho-pile .meho-slide{
  opacity:var(--t,1);
  rotate:calc((var(--r) + (1 - var(--t)) * 7) * 1deg);
  translate:0 calc((1 - var(--t)) * -46px);
  scale:calc(0.93 + 0.07 * var(--t));
}

/* ===== 4. Maria Eugenia te atiende ===== */
.meho-duena{display:flex;flex-wrap:wrap;align-items:center;gap:72px clamp(32px,5vw,96px)}
.meho-rev{flex-direction:row-reverse}
.meho .meho-arch{position:relative;width:100%;aspect-ratio:4/5.4;object-fit:cover;object-position:50% 30%;border-radius:999px 999px 0 0}
.meho .meho-arch-b{position:absolute;top:24px;left:24px;right:-24px;bottom:-24px;border:1px solid var(--line);border-radius:999px 999px 0 0}
.meho-rev .meho-arch-b{left:-24px;right:24px}
.meho .meho-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 24px;max-width:470px;padding:10px 0 6px}
.meho .meho-stat{display:flex;flex-direction:column;gap:6px}
.meho .meho-stat-n{font-family:var(--serif);font-size:64px;line-height:1;font-weight:300}
.meho-duena p{max-width:560px}

/* ===== 6. Atención personalizada ===== */
/* Rejilla: texto arriba, ficha debajo y la foto al lado ocupando las dos filas.
   En celular se apila texto, foto y ficha, para ver a Maria Eugenia junto al precio. */
.meho-atencion{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"txt foto" "card foto";
  gap:30px clamp(32px,5vw,96px);align-items:start;
}
.meho-atencion .meho-col{grid-area:txt;gap:20px}
.meho-atencion .meho-ficha{grid-area:card}
.meho-atencion .meho-shots{grid-area:foto;align-self:center}
.meho-atencion.meho-rev{grid-template-areas:"foto txt" "foto card"}
@media (max-width:700px){
  /* Celular: título y párrafo arriba; debajo, la ficha (precio y qué incluye) a la
     izquierda y la foto a la derecha, pegada a la ficha (sin separación) y saliendo
     por el borde derecho, para que ocupe todo el ancho que queda. */
  /* Esta sección no deja margen a los lados: la ficha blanca y la foto llegan al
     filo de la pantalla. El margen interior lo pone cada bloque. */
  .meho.meho-atencion{padding-left:0;padding-right:0}
  .meho-atencion,.meho-atencion.meho-rev{
    grid-template-columns:minmax(0,1fr) clamp(130px,43%,220px);
    grid-template-areas:"txt txt" "card foto";
    gap:24px 0;align-items:stretch;
  }
  .meho.meho-atencion .meho-col{padding:0 var(--gut)}
  .meho.meho-atencion .meho-ficha{
    grid-area:card;max-width:none;gap:18px;margin-left:0;
    /* Relleno mínimo: el texto empieza casi en el filo de la pantalla. */
    padding:24px 14px;
    border-left:0;border-right:0;
  }
  .meho.meho-atencion .meho-shots{
    grid-area:foto;align-self:stretch;width:auto;max-width:none;margin:0;
  }
  .meho.meho-atencion .meho-shot-b{display:none}
  /* Precio y pregunta centrados; la lista se queda alineada a la izquierda. */
  .meho.meho-atencion .meho-price-row{flex-direction:column;align-items:center;gap:6px;padding-bottom:18px;text-align:center}
  .meho.meho-atencion .meho-price-n{font-size:42px}
  .meho.meho-atencion .meho-ask{font-size:23px;text-align:center}
  /* Sin guión: en una pantalla angosta cada píxel cuenta y la línea divisoria
     ya separa un punto del siguiente. */
  .meho.meho-atencion .meho-list li{padding:11px 0;gap:0}
  .meho.meho-atencion .meho-dash{display:none}
  /* Con foto recortada: ocupa todo el alto de la ficha. Sin ella, el pase de fotos
     se queda con su proporción vertical de siempre. */
  .meho.meho-atencion .meho-con-mov .meho-shot-box{display:none}
  .meho.meho-atencion .meho-con-mov .meho-box-mov{
    display:block;position:absolute;inset:0;aspect-ratio:auto;width:auto;height:auto;margin:0;
  }
  .meho .meho-shot-m{object-position:44% 50%}
  .meho.meho-atencion .meho-shot-box{aspect-ratio:1 / 2;height:auto;min-height:0;width:auto;margin-left:auto}
}
.meho-atencion p{max-width:520px}
.meho .meho-ask{font-family:var(--serif);font-size:clamp(24px,2.4vw,30px);font-style:italic;color:var(--gold);line-height:1.15}
.meho .meho-price-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid #E8DCC8}
.meho .meho-price-n{font-family:var(--serif);font-size:clamp(56px,6vw,72px);line-height:1;font-weight:300;color:var(--ink);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.meho .meho-card,.meho .meho-ficha{flex:1 1 300px;min-width:0;max-width:560px;border:1px solid #DCC8A8;background:#FFFDF9;padding:36px clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:22px}
.meho .meho-inc{display:flex;flex-direction:column;gap:22px}
.meho .meho-list{display:flex;flex-direction:column}
.meho .meho-list li{display:flex;gap:18px;align-items:center;padding:14px 0;border-top:1px solid #E8DCC8}
.meho .meho-list li:first-child{border-top:0;padding-top:0}
.meho .meho-dash{width:28px;height:1px;background:var(--line);flex:none}

/* Pase de fotos: se ve una sola y van turnándose solas. */
.meho .meho-shots{position:relative;width:100%;max-width:520px;min-width:0;margin:0 auto}
.meho .meho-box-mov{display:none}
.meho .meho-shot-box{position:relative;aspect-ratio:3/4;overflow:hidden;background:#EDE6DC}
.meho .meho-shot{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;scale:1.07}
.meho .meho-shot.is-on{opacity:1;scale:1}
.meho-js .meho .meho-shot{transition:opacity 1.1s ease,scale 7s linear}
.meho .meho-shot-b{position:absolute;top:22px;left:22px;right:-22px;bottom:-22px;border:1px solid var(--line);pointer-events:none}
.meho-rev .meho-shot-b{left:-22px;right:22px}
@media (prefers-reduced-motion:reduce){.meho .meho-shot{transition:none;scale:1}}

/* ===== 7. Diferenciales ===== */
.meho-dif{display:flex;flex-direction:column;gap:64px;padding-top:130px;padding-bottom:130px}
.meho-dif .meho-head{margin-bottom:0}
.meho .meho-dif-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:48px 24px}
.meho .meho-dif-item{box-sizing:border-box;flex:0 0 calc(25% - 18px);min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.meho .meho-dif-ic{width:84px;height:84px;border-radius:50%;border:1px solid #CDB68C;display:flex;align-items:center;justify-content:center;margin-bottom:8px;flex:none}
.meho .meho-dif-ic svg{width:38px;height:38px}
.meho .meho-dif-t{font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.meho .meho-dif-d{font-size:calc(16px * var(--meho-escala, 1));max-width:260px}

/* ===== 8. Agenda una cita ===== */
.meho-agenda{display:flex;flex-wrap:wrap;align-items:center;gap:64px clamp(32px,5vw,96px)}
.meho .meho-fig-plain{max-width:460px}
.meho .meho-agenda-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
.meho .meho-rows{display:flex;flex-direction:column;max-width:520px;margin-top:4px}
.meho .meho-row{display:flex;gap:24px;border-top:1px solid #DCC8BD;padding:16px 0}
.meho .meho-row:last-child{border-bottom:1px solid #DCC8BD}
.meho .meho-row-k{min-width:110px;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);font-weight:400;padding-top:4px;flex:none}
.meho .meho-row a{text-decoration:underline}
.meho-agenda p{max-width:540px}

/* ===== 9. Precios ===== */
.meho-precios{display:flex;flex-direction:column;align-items:center;gap:56px;padding-top:130px;padding-bottom:140px}
.meho-precios .meho-head{margin-bottom:0;max-width:760px}
.meho .meho-cards{display:flex;flex-wrap:wrap;gap:28px;width:100%;max-width:980px}
.meho .meho-pcard{flex:1 1 360px;min-width:0;border:1px solid #DCC8BD;background:#FFFFFF;padding:44px clamp(24px,3vw,48px);display:flex;flex-direction:column;gap:28px}
.meho .meho-pcard-t{font-size:44px;line-height:1}
.meho .meho-prows{display:flex;flex-direction:column}
.meho .meho-prow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0;border-top:1px solid #E3D5C6;color:var(--body)}
.meho .meho-prow:last-child{border-bottom:1px solid #E3D5C6}
.meho .meho-prow-v{font-weight:400;color:var(--ink)}
.meho .meho-pnote{padding:14px 18px;background:#F8F1E6;color:var(--body);font-size:calc(15px * var(--meho-escala, 1))}
.meho .meho-pnote strong{font-weight:400;color:var(--ink)}
.meho .meho-foot{color:var(--ink);font-style:italic;font-family:var(--serif);font-size:22px;text-align:center}

/* ===== Entradas ligadas al scroll =====
 * --t va de 0 a 1 según cuánto ha entrado el bloque en pantalla (lo calcula el JS).
 * Así la animación avanza con el scroll y se ve siempre, no se adelanta al lector. */
.meho-js .meho .meho-fx{--t:0}
.meho-js .meho .fx-rise{opacity:var(--t);translate:0 calc((1 - var(--t)) * 80px)}
.meho-js .meho .fx-left{opacity:var(--t);translate:calc((1 - var(--t)) * -140px) 0}
.meho-js .meho .fx-right{opacity:var(--t);translate:calc((1 - var(--t)) * 140px) 0}
.meho-js .meho .fx-scale{opacity:var(--t);scale:calc(0.86 + 0.14 * var(--t))}
.meho-js .meho .fx-pop{opacity:var(--t);scale:calc(0.3 + 0.7 * var(--t));rotate:calc((1 - var(--t)) * -25deg)}
.meho-js .meho .fx-line{scale:var(--t) 1}

/* Portada: la foto se mueve un poco más lento que la página y el texto se va al subir. */
.meho-js .meho .meho-hero-img{translate:0 calc(var(--py,0) * 80px)}
.meho-js .meho .meho-hero-content{opacity:calc(1 - var(--po,0));translate:0 calc(var(--po,0) * -90px)}

/* ===== Visor a pantalla completa (celular) =====
 * Vive fuera de .meho, así que repite las fuentes y los colores que necesita. */
.meho-lb{
  --serif:'MEH Cormorant','Cormorant Garamond',Georgia,serif;
  --sans:'MEH Jost','Jost',Helvetica,Arial,sans-serif;
  position:fixed;inset:0;z-index:99999;display:none;flex-direction:column;
  background:#FAF6F0;font-family:var(--sans);font-weight:300;
  -webkit-user-select:none;user-select:none;
}
.meho-lb.is-open{display:flex}
.meho-lb-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;flex:none}
.meho-lb-num{font-size:13px;letter-spacing:0.22em;color:#7A5D2B}
.meho-lb-x{
  width:50px;height:50px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid #2B2623;background:transparent;color:#2B2623;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .25s ease,color .25s ease;
}
.meho-lb-x:hover{background:#2B2623;color:#FAF6F0}
.meho-lb-x svg{width:22px;height:22px}
.meho-lb-view{flex:1 1 auto;position:relative;min-height:0;overflow:hidden;touch-action:pan-y}
.meho-lb-view img{
  position:absolute;inset:0;margin:auto;
  max-width:92%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  -webkit-user-drag:none;user-drag:none;
  opacity:0;translate:var(--dx,0px) 0;
  box-shadow:0 18px 50px rgba(43,38,35,0.18);
  transition:opacity .3s ease,translate .36s cubic-bezier(.2,.7,.25,1);
}
.meho-lb-view img.is-in{opacity:1;translate:0 0}
.meho-lb-nav{
  position:absolute;z-index:2;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid #2B2623;background:rgba(250,246,240,0.85);color:#2B2623;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .25s ease,color .25s ease;
}
.meho-lb-nav:hover{background:#2B2623;color:#FAF6F0}
.meho-lb-nav svg{width:22px;height:22px}
.meho-lb-nav[disabled]{opacity:.25;pointer-events:none}
.meho-lb-prev{left:10px}
.meho-lb-next{right:10px}
.meho-lb-foot{flex:none;padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center}
.meho-lb-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;width:100%;max-width:420px;
  background:#2B2623;color:#FAF6F0;text-decoration:none;
  font-size:13px;letter-spacing:0.18em;text-transform:uppercase;font-weight:400;text-align:center;
}
.meho-lb-btn:hover{background:#443C36;color:#FAF6F0}
.meho-lb-open{overflow:hidden !important}
@media (prefers-reduced-motion:reduce){.meho-lb-view img{transition:none}}
/* Si el visor está activo, la foto se toca para ampliar. */
.meho-js .meho .meho-pin[data-meho-visor] .meho-slide{cursor:zoom-in}

/* ===== Pantallas anchas =====
 * Las secciones de dos columnas se centran en vez de pegarse a la izquierda.
 * El fondo sigue ocupando todo el ancho; solo se recoge el contenido. */
@media (min-width:1280px){
  .meho-duena,.meho-agenda,.meho-atencion,.meho-video{padding-inline:max(var(--gut),(100% - 1240px) / 2)}
  .meho-dif,.meho-precios{padding-inline:max(var(--gut),(100% - 1400px) / 2)}
}

/* ===== Celular ===== */
@media (max-width:1100px){
  .meho .meho-dif-item{flex-basis:calc(25% - 18px)}
}
@media (max-width:820px){
  .meho .meho-dif-item{flex-basis:calc(33.333% - 16px)}
}
@media (max-width:640px){
  .meho-sec{padding-top:72px;padding-bottom:72px}
  .meho-dif,.meho-precios{padding-top:72px;padding-bottom:72px}
  .meho-video{padding-top:72px;padding-bottom:72px}
  .meho-hero{min-height:780px;align-items:flex-start}
  .meho .meho-hero-img{object-position:var(--foco-m,77% 20%)}
  .meho .meho-hero-ov{background:linear-gradient(180deg,rgba(250,246,240,0.93) 0%,rgba(250,246,240,0.9) 66%,rgba(250,246,240,0.3) 82%,rgba(250,246,240,0) 100%)}
  .meho .meho-hero-content{padding:72px var(--gut) 24px}
  .meho .meho-btns{width:100%}
  .meho .meho-btn{width:100%;padding:0 18px;letter-spacing:0.14em;font-size:12px}
  .meho .meho-vid-in{gap:14px}
  .meho .meho-vid-logo{width:110px}
  .meho .meho-vid-play{width:58px;height:58px}
  .meho .meho-vid-play svg{width:22px;height:22px}
  .meho .meho-vid-label{font-size:11px}
  .meho .meho-arch-b,.meho-rev .meho-arch-b{top:14px;left:14px;right:-14px;bottom:-14px}
  .meho-duena .meho-stats{gap:18px 16px;padding:6px 0 2px}
  .meho .meho-stat-n{font-size:46px}
  .meho-duena .meho-stat .meho-label{font-size:11px;letter-spacing:0.14em}
  /* Agenda una cita: etiqueta y título centrados. */
  .meho-agenda .meho-eb,.meho-agenda .meho-h2{text-align:center}
  .meho .meho-price-n{font-size:52px}
  .meho .meho-shot-b,.meho-rev .meho-shot-b{top:12px;left:12px;right:-12px;bottom:-12px}
  .meho-rev .meho-shot-b{left:-12px;right:12px}
  .meho .meho-pcard-t{font-size:34px}
  .meho .meho-dif-item{flex-basis:calc(50% - 12px)}
  .meho .meho-dif-ic{width:64px;height:64px}
  .meho .meho-dif-ic svg{width:28px;height:28px}
  .meho .meho-dif-t{font-size:20px}
  .meho .meho-dif-d{font-size:calc(14px * var(--meho-escala, 1));line-height:1.55}
  .meho .meho-fig-plain{width:100%;max-width:420px;flex:0 0 auto}
  .meho .meho-head{margin-bottom:28px}
  .meho .meho-foot{font-size:19px}
  .meho .meho-row{flex-direction:column;gap:4px}
  .meho .meho-row-k{padding-top:0}
  .meho-js .meho .fx-left{translate:calc((1 - var(--t)) * -40px) 0}
  .meho-js .meho .fx-right{translate:calc((1 - var(--t)) * 40px) 0}
}

/* ===== Reducir movimiento: todo visible y quieto ===== */
@media (prefers-reduced-motion:reduce){
  .meho .meho-hero-img,.meho .meho-hl{animation:none}
  .meho-js .meho .meho-fx{--t:1 !important;opacity:1;translate:none;scale:none;rotate:none}
  .meho-js .meho .fx-line{scale:1 1}
  .meho-js .meho .meho-hero-img,.meho-js .meho .meho-hero-content{translate:none;opacity:1}
}

/* ===== Ancho completo en celular =====
   Uncode le pone relleno propio a la fila, la columna y el wpb_wrapper que envuelven
   cada elemento. En pantallas chicas eso roba 20–40 px de ancho útil. Cada sección se
   lleva al ancho de la pantalla y usa su propio margen interior (var(--gut)), así todas
   quedan alineadas entre sí. Solo en celular: en computadora 100vw incluiría la barra
   de desplazamiento y ensancharía la página. */
@media (max-width:700px){
  .meho{
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    width:auto;
  }
}