/* Índice de playas (página 3919) — maqueta INT-PLAYAS (escritorio) y UX-PLAYAS (móvil). Marcado en inc/playas.php. */
.si-indice-playas .si-interior h1{font-size:clamp(42px,6.2vw,84px);line-height:1;max-width:640px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.si-indice-playas .si-entradilla{max-width:560px}

/* Zona: número grande + municipio + título */
.si-interior .wp-block-post-content .si-zona .si-sec__tit{display:flex;align-items:center;justify-content:flex-start;gap:16px;text-align:left!important}
.si-interior .wp-block-post-content .si-zona .si-sec__tit::before{display:none}
.si-zona__num{flex:0 0 auto;font:700 clamp(54px,7vw,92px)/.85 var(--wp--preset--font-family--titulos,Georgia,serif);color:var(--c);
  letter-spacing:-.03em;text-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent),0 2px 4px rgba(0,0,0,.6)}
.si-zona__tx{display:flex;flex-direction:column;gap:4px}
.si-zona__muni{font:700 13px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--c-txt)}
.si-zona__lista{list-style:none;margin:14px 0 6px;padding:0;display:grid;gap:4px}
.si-zona__lista a,.si-zona__todas{color:#fff;text-decoration:none;font-size:16px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.si-zona__lista a::after,.si-zona__todas::after{content:"→";margin-left:.55em;color:var(--c);transition:margin .2s}
.si-zona__lista a:hover,.si-zona__todas:hover{text-decoration:underline;text-underline-offset:3px}
.si-zona__lista a:hover::after{margin-left:.85em}
.si-zona__todas{display:inline-block;margin:6px 0 10px;font-weight:700;color:var(--c-txt)}
.si-interior .wp-block-post-content .si-mover__tit::before{display:none}

/* Moverse por Ibiza */
.si-mover{display:grid;grid-template-columns:1fr;gap:12px 32px;margin:10px 0 40px!important}
.si-mover__tit{margin:0!important;font-size:clamp(30px,3.4vw,44px)}
.si-mover__p{margin:0!important;max-width:620px;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.si-mover__lista{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.si-mover__lista a{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;padding:12px 16px;border-radius:14px;
  background:rgba(8,12,28,.62);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.si-mover__lista a:hover{border-color:var(--c)}
.si-mover__lista .si-ico{flex:0 0 auto;width:38px;height:38px;color:#fec930;filter:drop-shadow(0 0 8px rgba(253,165,1,.45))}
.si-mover__lista span{display:flex;flex-direction:column;flex:1}
.si-mover__lista strong{font-size:17px}
.si-mover__lista small{font-size:14px;opacity:.85}
.si-mover__lista a::after{content:"";width:9px;height:9px;border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg);margin-right:4px}
.si-mover .ad{max-width:300px;width:100%;justify-self:center}
.si-mover .ad--muestra{min-height:250px;display:grid;place-items:center;border-radius:12px;background:rgba(235,238,244,.88);color:#556;font-size:15px}

/* Móvil: acordeón con «N calas» a la derecha y el carrusel de tarjetas; la lista de calas es del escritorio */
@media (max-width:760px){
  .si-zona__lista{display:none}
  .si-zona .si-sec__tit{gap:12px}
  .si-zona__num{font-size:52px}
  .si-zona .si-sec__txt{display:flex;align-items:center;gap:12px}
  .si-zona{position:relative}
  .si-zona.plegada .si-sec__res{position:absolute;right:44px;top:50%;transform:translateY(-50%);margin:0;font-size:14px}
  .si-zona.plegada .si-zona__tx{padding-right:62px}
  .si-zona .si-sec__tit .si-zona__nom{font-size:20px;line-height:1.2}
  /* Como UX-PLAYAS: zonas sin caja, separadas por una línea; tarjetas pequeñas (casi tres a la vista) de foto, nombre y dos líneas */
  .si-indice-playas .si-zona{background:rgba(6,10,24,.62);border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;margin:0 -16px!important;padding:16px}
  .si-zona .si-carrusel{grid-auto-columns:39%;gap:10px;margin-inline:-16px;padding-inline:16px}
  .si-zona .si-tarjeta{background:none;border:0;border-radius:0;padding:0}
  .si-zona .si-tarjeta>*,.si-zona .si-tarjeta .si-texto>*{margin-inline:0!important}
  .si-zona .si-tarjeta>figure:first-child{margin:0 0 8px!important}
  .si-interior .si-zona .si-tarjeta img{border-radius:10px}
  .si-interior .wp-block-post-content .si-zona .si-tarjeta__tit{font-size:15.5px;margin:0 0 3px!important}
  .si-zona .si-tarjeta p:not(.si-tarjeta__tit){font-size:13px;line-height:1.38;opacity:.88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
  .si-zona .si-tarjeta p:not(.si-tarjeta__tit)~p:not(.si-tarjeta__tit){display:none}
  .si-zona .si-tarjeta .si-texto.cortado{max-height:none;-webkit-mask-image:none;mask-image:none}
  .si-zona .si-tarjeta .si-mas{display:none}
  .si-zona .si-zona__todas{font-size:15px}
}
/* Escritorio: zonas sobre la escena, alternando lado, con la lista en vez del carrusel */
@media (min-width:761px){
  .si-zona .si-carrusel,.si-zona .si-puntos{display:none!important}
  .si-zona .si-sec__cuerpo>p{max-width:460px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .si-mover{grid-template-columns:minmax(0,1fr) 300px;align-items:end}
  .si-mover__tit,.si-mover__p{grid-column:1}
  .si-mover__lista{grid-column:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .si-mover__lista a{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:4px 0;text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .si-mover__lista a::after{display:none}
  .si-mover__lista small::after{content:" →";color:var(--c)}
  .si-mover .ad{grid-column:2;grid-row:1/span 3;align-self:end}
}
/* El envoltorio del mapa solo existe en escritorio ancho */
@media (max-width:999.98px){
  .si-plano{display:contents}
  .si-plano__fondo,.si-plano__pines{display:none}
}
@media (min-width:761px) and (max-width:999.98px){
  .si-interior .si-plano>.si-zona{max-width:600px!important;margin:0 0 60px!important}
  .si-interior .si-plano>.si-zona--dcha{margin-left:auto!important}
  .si-zona .si-sec__tit{align-items:flex-start}
  .si-zona .si-sec__cuerpo{padding-left:calc(clamp(54px,7vw,92px) * 1.25 + 16px)}
  .si-zona__tx{padding-top:8px}
}

/* Escritorio ancho: la maqueta INT-PLAYAS tal cual. La escena entera (1024×1536) a todo el ancho bajo la cabecera y,
   encima, cada bloque en su sitio de la maqueta (top/left en % de la escena) con letra en cqw: todo escala junto. */
@media (min-width:1000px){
  .si-indice-playas .migas{position:relative;z-index:3}
  .si-interior .wp-block-post-content>.si-plano{position:relative;z-index:1;container-type:inline-size;width:100vw;max-width:none!important;
    margin:-70px 0 0 calc(50% - 50vw)!important;aspect-ratio:1024/1536;color:#fff}
  .si-plano__fondo,.si-plano__fondo img{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0}
  .si-plano :is(p,a,li,span){text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.55)}
  .si-interior .si-plano>*{position:absolute;margin:0!important;max-width:none!important}
  .si-interior .si-plano>h1{left:6.3%;top:5.4%;width:40%;font-size:5.4cqw;line-height:.98}
  .si-plano .si-zona__muni,.si-plano .si-zona__todas,.si-plano .si-zona__lista a::after{color:var(--c-txt)}
  .si-plano .si-zona__tx{min-width:0}
  .si-interior .si-plano .si-zona__lista li{margin:0;line-height:1.3}
  .si-interior .wp-block-post-content .si-plano .si-mover__tit::before{display:none}
  .si-interior .si-plano>.si-entradilla{left:6.3%;top:12.7%;width:43%;font-size:1.42cqw;line-height:1.34}
  .si-plano>.si-indice{display:none}

  /* Zonas: sin caja, número grande a la izquierda del municipio y el título */
  .si-interior .si-plano>.si-zona{width:34%;padding:0;background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .si-interior .si-plano>.si-zona--1{left:6%;top:19.6%}
  .si-interior .si-plano>.si-zona--2{left:66%;top:31.4%;width:32%}
  .si-interior .si-plano>.si-zona--3{left:7.3%;top:44.2%}
  .si-interior .si-plano>.si-zona--4{left:68%;top:61%;width:30%}
  .si-interior .si-plano>.si-zona--5{left:7.3%;top:71.6%}
  .si-interior .wp-block-post-content .si-plano .si-zona .si-sec__tit{align-items:center;gap:1.4cqw;margin:0 0 .5cqw!important}
  .si-plano .si-zona__num{font-size:6.6cqw;width:7.4cqw}
  .si-plano .si-zona__tx{gap:.2cqw}
  .si-plano .si-zona__muni{font-size:1.1cqw}
  .si-plano .si-zona__nom{font-size:2.15cqw;line-height:1.1}
  .si-plano .si-sec__cuerpo{padding-left:8.8cqw}
  .si-plano .si-sec__cuerpo>p{font-size:1.28cqw;line-height:1.36;margin:0 0 .7cqw;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .si-plano .si-sec__cuerpo>:not(p:first-child,.si-zona__lista,.si-zona__todas){display:none}   /* en las traducciones la zona trae más texto: aquí no cabe y sigue en móvil */
  .si-plano .si-zona__lista{margin:0;gap:.25cqw}
  .si-plano .si-zona__lista a{font-size:1.32cqw}
  .si-plano .si-zona__todas{font-size:1.15cqw;margin:.5cqw 0 0}

  /* Chinchetas */
  .si-plano__pines{position:absolute;inset:0;pointer-events:none}
  .si-pin{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-.6cqw,-50%);display:flex;align-items:center;gap:.65cqw;
    font:700 1.25cqw/1 system-ui,sans-serif;color:#fff;text-decoration:none;white-space:nowrap;pointer-events:auto}
  .si-pin::before{content:"";flex:none;width:1.2cqw;height:1.2cqw;box-sizing:border-box;border-radius:50%;background:#fff;border:.3cqw solid var(--c);
    box-shadow:0 0 .9cqw var(--c),0 0 .3cqw #000}
  .si-pin:hover{text-decoration:underline;text-underline-offset:3px}

  /* Moverse por Ibiza: al pie de la escena, publicidad a la derecha */
  .si-interior .si-plano>.si-mover{left:6%;right:2.6%;top:88%;grid-template-columns:minmax(0,1fr) 300px;gap:.8cqw 3cqw}
  .si-plano .si-mover__tit{font-size:3.3cqw;line-height:1.05}
  .si-plano .si-mover__p{font-size:1.45cqw;line-height:1.32;max-width:42cqw}
  .si-plano .si-mover__lista{gap:2cqw;margin-top:.6cqw}
  .si-plano .si-mover__lista .si-ico{width:3.6cqw;height:3.6cqw}
  .si-plano .si-mover__lista strong{font-size:1.4cqw}
  .si-plano .si-mover__lista small{font-size:1.3cqw;opacity:1}
  .si-plano .si-mover .ad{align-self:end}

  /* Lo que va detrás del mapa: texto largo de la entradilla y secciones sueltas */
  .si-interior .wp-block-post-content>.si-intro{margin-top:7vw!important}   /* «Moverse» puede asomar bajo la escena */
  /* La escena fija de detrás es la misma foto que el mapa: bajo el mapa se veía otra vez, cortada. Fuera en escritorio,
     y el pie del mapa funde con el fondo de noche */
  :is(.si-indice-playas,.si-ocio-ranking) .si-escena{display:none}
  :is(.si-indice-playas,.si-ocio-ranking){background:var(--noche)}
  .si-ocio-ranking main.si-interior{padding-bottom:0!important}   /* en Ocio el mapa es lo último: sin franja vacía antes del pie */
  .si-ocio-ranking footer{margin-top:0!important}
  .si-plano::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,16,32,0),rgba(10,16,32,.55) 45%,rgba(10,16,32,.9) 80%,var(--noche))}
  .si-plano__fondo{z-index:-2}
  /* Secciones de texto: el texto a la izquierda y su foto al lado, no debajo y suelta */
  .si-indice-playas .si-sec--playas:not(.si-zona) .si-sec__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:48px;align-items:start}
  .si-indice-playas .si-sec--playas:not(.si-zona) .si-sec__cuerpo>*{grid-column:1}
  .si-indice-playas .si-sec--playas:not(.si-zona) .si-sec__cuerpo>figure{grid-column:2;grid-row:1/span 20;margin:0!important}
  .si-indice-playas .si-sec--playas:not(.si-zona) .si-sec__cuerpo>figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
}