/* Pollensina — capa de movimiento y translúcidos para la ficha de villa (v1, 2026-11-03).
   Se carga DESPUÉS de villa-mc.css. Todo cuelga de html.pmc-fx (lo añade villa-fx.js):
   sin JS la ficha queda exactamente como antes. No usa transform/filter en .pmc-wrap,
   .pmc-grid ni .pmc-panel para no romper la hoja móvil fija (.pmc-panel.is-sheet). */
@property --fx-gx{syntax:"<percentage>";inherits:false;initial-value:18%}
:root{
  --fx-glass:rgba(255,255,255,.62);
  --fx-glass-strong:rgba(255,255,255,.8);
  --fx-line:rgba(255,255,255,.6);
  --fx-blur:saturate(160%) blur(20px);
  --fx-ease:cubic-bezier(.22,.61,.36,1);
  --fx-out:cubic-bezier(.16,1,.3,1);
  --fx-taupe:#e9e1d6;
  --fx-bronze:#7f6346;
  --fx-lift:0 22px 60px -22px rgba(48,36,22,.32),0 6px 18px -10px rgba(0,0,0,.08);
}

/* 1 · Cabecera: cristal esmerilado al hacer scroll + hilo de progreso de lectura */
.pmc-fx .pmc-head.is-solid{background:var(--fx-glass-strong);-webkit-backdrop-filter:var(--fx-blur);backdrop-filter:var(--fx-blur);box-shadow:0 1px 0 rgba(23,23,23,.06)}
.pmc-fx .pmc-head::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:linear-gradient(90deg,var(--pmc-accent),#cdb293);transform-origin:0 50%;transform:scaleX(var(--fx-p,0));opacity:0;transition:opacity .3s;pointer-events:none}
.pmc-fx .pmc-head.is-solid::after{opacity:1}

/* 2 · Hero: entrada lenta tipo Ken Burns, parallax suave y velo que funde con la página */
.pmc-fx .pmc-hero img{scale:1.09;translate:0 var(--fx-y,0px);animation:fxKen 2.6s var(--fx-out) .1s forwards;will-change:translate,scale}
@keyframes fxKen{to{scale:1.02}}
.pmc-fx .pmc-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,.35) 38%,rgba(255,255,255,0));pointer-events:none}
.pmc-fx .pmc-allph{border-radius:999px;padding:8px 16px;background:var(--fx-glass);-webkit-backdrop-filter:var(--fx-blur);backdrop-filter:var(--fx-blur);border-color:var(--fx-line);box-shadow:0 10px 30px -8px rgba(0,0,0,.25);transition:background-color .18s cubic-bezier(.2,.6,.2,1),border-color .18s cubic-bezier(.2,.6,.2,1)}
.pmc-fx .pmc-allph:hover{background:rgba(241,234,224,.94);border-color:rgba(154,123,92,.35);color:var(--pmc-ink)}

/* 3 · Escritorio: el bloque del nombre y el panel de reserva suben sobre la foto como tarjetas de cristal */
@media (min-width:1024px){
  .pmc-fx .pmc-hero{margin-bottom:-120px}
  .pmc-fx .pmc-hero~.pmc-wrap{position:relative}
  .pmc-fx .pmc-allph{bottom:144px;right:max(24px,env(safe-area-inset-right,0px))}
  .pmc-fx .pmc-heroacts{bottom:144px;right:max(24px,env(safe-area-inset-right,0px))}
  .pmc-fx .pmc-basics{position:relative;background:var(--fx-glass);-webkit-backdrop-filter:var(--fx-blur);backdrop-filter:var(--fx-blur);border:1px solid var(--fx-line);border-radius:16px;padding:34px 40px 26px;box-shadow:var(--fx-lift)}
  .pmc-fx .pmc-namewrap{border-bottom-color:rgba(23,23,23,.1)}
  .pmc-fx .pmc-panel__in{background:var(--fx-glass-strong);-webkit-backdrop-filter:var(--fx-blur);backdrop-filter:var(--fx-blur);border:1px solid rgba(255,255,255,.75);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--fx-lift)}
  .pmc-fx .pmc-panel .pmc-btn{box-shadow:0 10px 24px -12px rgba(154,123,92,.9)}
}
.pmc-fx .pmc-panel .pmc-pamt{font-family:var(--pmc-serif);font-size:26px;font-weight:600;letter-spacing:-.01em}

/* 4 · Móvil/tablet: el contenido entra como una hoja redondeada sobre la foto; barra flotante de cristal */
@media (max-width:1023px){
  .pmc-fx .pmc-hero{margin-bottom:0}
  /* 2026-11-09: "~" en lugar de "+": en villas con vídeo (Maronja…) hay un <script> entre el hero y
     .pmc-wrap, y con "+" la hoja redondeada no se aplicaba (título pegado a la foto). */
  .pmc-fx .pmc-hero~.pmc-wrap{position:relative;margin-top:-26px;padding-top:30px;background:var(--pmc-bg);border-radius:24px 24px 0 0;box-shadow:0 -14px 30px -20px rgba(0,0,0,.35)}
  .pmc-fx .pmc-allph{bottom:42px}
  .pmc-fx .pmc-heroacts{bottom:42px}
  .pmc-fx .pmc-float{background:rgba(255,255,255,.76);-webkit-backdrop-filter:var(--fx-blur);backdrop-filter:var(--fx-blur);border:1px solid rgba(255,255,255,.7);border-radius:16px}
}

/* 5 · Entrada del título y datos como chips */
.pmc-fx .pmc-h1{animation:fxRise 1.1s var(--fx-out) .2s both}
.pmc-fx .pmc-locrow,.pmc-fx .pmc-specs{animation:fxRise 1.1s var(--fx-out) .35s both}
.pmc-fx .pmc-summary{animation:fxRise 1.2s var(--fx-out) .5s both}
@keyframes fxRise{from{opacity:0;transform:translateY(14px);letter-spacing:.02em}to{opacity:1;transform:none}}
.pmc-fx .pmc-specs{gap:8px}
.pmc-fx .pmc-specs li{padding:5px 13px;border:1px solid rgba(23,23,23,.14);border-radius:999px;background:rgba(255,255,255,.55);font-size:14px;line-height:1.4}
.pmc-fx .pmc-specs li::after{content:none;display:none}
.pmc-fx .pmc-wish svg{transition:transform .35s var(--fx-ease)}
.pmc-fx .pmc-wish:hover svg{transform:scale(1.12)}
.pmc-fx .pmc-wish:active svg{transform:scale(.86)}

/* 6 · At a glance: luz cálida que se desplaza despacio y sello con el texto girando */
.pmc-fx .pmc-glance{background:radial-gradient(55% 90% at var(--fx-gx) 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%),radial-gradient(45% 70% at 100% 100%,rgba(171,141,111,.2),rgba(171,141,111,0) 70%),var(--fx-taupe);animation:fxAura 16s ease-in-out infinite alternate}
@keyframes fxAura{to{--fx-gx:82%}}
.pmc-fx .pmc-glance__stamp{animation:fxFloat 7s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-4px)}}
/* 2026-11-09: gira el grupo del anillo sobre el centro exacto del viewBox (100,100 de 200×200).
   Antes giraba el <text> con transform-box:view-box y en Safari/iOS se salía del sello. */
.pmc-fx .pmc-glance__ring{transform-box:view-box;transform-origin:100px 100px;animation:fxSpin 48s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}

/* 7 · Aparición al hacer scroll (translate + desenfoque). Hover usa transform, así no chocan */
.pmc-fx [data-fx]{opacity:0;translate:0 22px;filter:blur(6px);transition:opacity .9s var(--fx-out),translate .9s var(--fx-out),filter .9s var(--fx-out),transform .5s var(--fx-ease),box-shadow .5s var(--fx-ease),background-color .25s;transition-delay:var(--fx-d,0s),var(--fx-d,0s),var(--fx-d,0s),0s,0s,0s}
.pmc-fx [data-fx="fade"]{translate:none;filter:none}
.pmc-fx [data-fx].is-in{opacity:1;translate:none;filter:none}
/* 2026-11-09: dentro de los carruseles, solo fundido (sin subir ni desenfocar) y sin
   elevación al tocar en móvil, para que las tarjetas no se muevan en vertical. */
.pmc-fx .pmc-simrow [data-fx]{translate:none;filter:none}
@media (hover:none){.pmc-fx .pmc-simrow [data-fx]:hover,.pmc-fx .pmc-simrow .pmc-card:hover{transform:none;box-shadow:none}}

/* 8 · Facilities: el icono responde al pasar */
.pmc-fx .pmc-fac__ic{transition:transform .45s var(--fx-ease),color .3s}
.pmc-fx .pmc-fac>li:hover .pmc-fac__ic{color:var(--pmc-accent);transform:translateY(-2px) scale(1.07)}

/* 9 · Bloque de Iris: brillo cálido muy lento */
.pmc-fx .pmc-expert{background:linear-gradient(115deg,#faf3eb 0%,#f2e6d7 45%,#faf3eb 100%);background-size:240% 100%;animation:fxSheen 14s ease-in-out infinite alternate}
@keyframes fxSheen{from{background-position:0% 50%}to{background-position:100% 50%}}
.pmc-fx .pmc-expert__img{box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(127,99,70,.35)}

/* 10 · Fotos: se descubren con una máscara y la imagen se asienta; zoom suave al pasar */
.pmc-fx .pmc-photos>li[data-fx]{filter:none;translate:none;clip-path:inset(10% 7% round 6px);transition:clip-path 1.3s var(--fx-out),opacity .9s var(--fx-out);transition-delay:var(--fx-d,0s)}
.pmc-fx .pmc-photos>li[data-fx].is-in{clip-path:inset(0 round 6px)}
.pmc-fx .pmc-photos img{scale:1.12;transition:scale 1.4s var(--fx-out),transform .8s var(--fx-ease)}
.pmc-fx .pmc-photos>li.is-in img{scale:1}
.pmc-fx .pmc-photos>li:hover img{transform:scale(1.04)}

/* 11 · Precios: la temporada actual queda marcada */
.pmc-fx .pmc-rates th:first-child,.pmc-fx .pmc-rates td:first-child{padding-left:10px}
.pmc-fx .pmc-rates th:last-child,.pmc-fx .pmc-rates td:last-child{padding-right:10px}
.pmc-fx .pmc-rates tbody tr:hover{background:#fbf7f2}
.pmc-fx .pmc-rates tr.is-now{background:var(--pmc-cream)}
.pmc-fx .pmc-rates tr.is-now td{font-weight:600}
.pmc-fx .fx-now{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--pmc-accent);color:#fff;font:600 10.5px/1.5 var(--pmc-sans);letter-spacing:.12em;text-transform:uppercase;vertical-align:1px}

/* 12 · Mapa: tono cálido a juego con la paleta (color real al pasar) y radar suave en la zona */
.pmc-fx .pmc-map iframe{filter:grayscale(.4) sepia(.14) contrast(.96);transition:filter .6s}
.pmc-fx .pmc-map:hover iframe{filter:none}
.pmc-fx .pmc-map span{animation:fxPulse 2.8s var(--fx-ease) infinite}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(154,123,92,.45)}100%{box-shadow:0 0 0 28px rgba(154,123,92,0)}}

/* 13 · Opiniones: tarjeta cálida con comilla de fondo y elevación al pasar */
.pmc-fx .pmc-rev{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff 45%,#faf4ec);border-color:rgba(23,23,23,.1)}
.pmc-fx .pmc-rev::before{content:"\201C";position:absolute;right:16px;top:-14px;font:600 120px/1 var(--pmc-serif);color:var(--pmc-accent);opacity:.13;pointer-events:none}
.pmc-fx .pmc-rev:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(48,36,22,.35)}
@media (hover:none){.pmc-fx .pmc-rev:hover{transform:none;box-shadow:none}} /* 2026-11-09: sin elevación al tocar en móvil */

/* 14 · Botones: destello que cruza al pasar */
.pmc-fx .pmc-btn{position:relative;overflow:hidden;isolation:isolate}
.pmc-fx .pmc-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 70%);transform:translateX(-120%);transition:transform .9s var(--fx-ease);pointer-events:none}
.pmc-fx .pmc-btn:hover::after{transform:translateX(120%)}

/* 15 · FAQ: la respuesta aparece con suavidad */
.pmc-fx .pmc-faq details[open] p{animation:fxIn .45s var(--fx-out)}
@keyframes fxIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Navegadores sin backdrop-filter: fondos sólidos */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pmc-fx .pmc-head.is-solid,.pmc-fx .pmc-basics,.pmc-fx .pmc-panel__in,.pmc-fx .pmc-float{background:#fff}
  .pmc-fx .pmc-allph{background:rgba(255,255,255,.94)}
}

/* Movimiento reducido: todo visible y quieto */
@media (prefers-reduced-motion:reduce){
  .pmc-fx *,.pmc-fx *::before,.pmc-fx *::after{animation:none!important}
  .pmc-fx [data-fx]{opacity:1!important;translate:none!important;filter:none!important;clip-path:none!important}
  .pmc-fx .pmc-hero img,.pmc-fx .pmc-photos img{scale:1!important;translate:none!important}
}