/* ==========================================================================
   Casa Monasterio — secciones de la marca
   Morada, cursos y talleres, sobre, blog, contacto y la portada de la tienda.
   Usa las variables de estilos.css; nada nuevo en la paleta.
   ========================================================================== */

/* El menú tiene seis entradas: bajo 1180px no caben junto al logo y los
   iconos, así que pasa al panel lateral antes que en el tema original. */
@media (max-width:1180px){
  .cabecera__interior{grid-template-columns:auto 1fr}
  .navegacion,.menu--principal{display:none}
  .menu-movil-boton{display:grid}
}
@media (min-width:1181px) and (max-width:1320px){
  .menu{gap:20px}
  .menu a{letter-spacing:.06em}
}

/* ==========================================================================
   Tres caminos (portada y sobre)
   ========================================================================== */
.caminos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.camino{
  display:flex;flex-direction:column;align-items:flex-start;gap:.2em;
  padding:clamp(26px,3vw,40px);background:var(--hueso);
  border-radius:120px 120px var(--radio-lg) var(--radio-lg);
  transition:background var(--transicion),transform var(--transicion),box-shadow var(--transicion);
}
.camino:hover{background:var(--crema);color:inherit;transform:translateY(-4px);box-shadow:var(--sombra)}
.camino h3{margin:.5em 0 .35em}
.camino p{font-size:.93rem;color:var(--tinta-2);margin-bottom:1.4em;flex:1}
.camino .enlace-linea{margin-top:auto}
.camino__icono{
  width:58px;height:58px;display:grid;place-items:center;flex:none;
  border-radius:50%;background:var(--blanco);color:var(--arena-osc);
}
.camino__icono svg{width:26px;height:26px;stroke-width:1.2}
.caminos--compactos .camino{align-items:center;text-align:center;border-radius:var(--radio-lg)}
.caminos--compactos .camino .enlace-linea{margin-top:.6em}

/* ==========================================================================
   Banda de Morada (portada, Morada y cursos)
   ========================================================================== */
.banda-morada{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(32px,5vw,64px);border-radius:var(--radio-lg);
  background:var(--arena-mas-osc);color:var(--crema);
}
.banda-morada h2{color:var(--blanco);font-size:clamp(1.6rem,3vw,2.4rem)}
.banda-morada p{color:rgba(247,244,240,.86);max-width:58ch}
.banda-morada .antetitulo{color:var(--arena-clara)}
.banda-morada__acciones{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.banda-morada__acciones .enlace-linea{color:var(--crema);border-color:rgba(247,244,240,.4)}
.banda-morada__acciones .enlace-linea:hover{color:var(--blanco);border-color:var(--blanco)}
.banda-morada__flor{
  position:absolute;z-index:-1;right:-40px;bottom:-60px;width:280px;height:280px;
  color:var(--arena);opacity:.22;pointer-events:none;
}
.banda-morada__flor svg{width:100%;height:100%;stroke-width:.7}

/* ==========================================================================
   Encabezado grande de las páginas de marca (Morada, Sobre)
   ========================================================================== */
.portada-seccion{
  position:relative;overflow:hidden;isolation:isolate;background:var(--crema);
  padding-block:clamp(64px,10vw,140px);
}
.portada-seccion h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:18ch;margin-inline:auto}
.portada-seccion h1 em{font-style:italic;color:var(--arena-mas-osc)}
.portada-seccion__punto{color:var(--arena)}
.portada-seccion__lema{font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--tinta);margin-top:1.4em}
.portada-seccion__flor{
  position:absolute;z-index:-1;width:clamp(180px,26vw,360px);aspect-ratio:1;
  left:-50px;top:-40px;color:var(--arena);opacity:.2;pointer-events:none;
  animation:cm-flota 18s ease-in-out infinite;
}
.portada-seccion__flor svg{width:100%;height:100%;stroke-width:.7}

/* Qué incluye Morada */
.incluye{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px)}
.incluye__item{
  display:flex;gap:20px;align-items:flex-start;padding:clamp(22px,3vw,34px);
  border:1px solid var(--linea);border-radius:var(--radio-lg);background:var(--blanco);
}
.incluye__item .camino__icono{background:var(--hueso)}
.incluye__item h3{font-size:clamp(1.15rem,1.8vw,1.35rem);margin-bottom:.4em}
.incluye__item p{font-size:.93rem;color:var(--tinta-2)}

.para-quien h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.lista-suave{list-style:none;margin:1.6em 0 0;padding:0;display:grid;gap:.9em}
.lista-suave li{position:relative;padding-left:2em;font-size:1.05rem}
.lista-suave li::before{
  content:"";position:absolute;left:0;top:.62em;width:16px;height:1px;background:var(--arena-osc);
}

/* Sobre */
.retrato-vacio{display:grid;place-items:center;width:100%;height:100%;background:var(--hueso)}
.retrato-vacio img{width:38%;height:auto;object-fit:contain;opacity:.85}
.marco:hover .retrato-vacio img{transform:none}
.intencion h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:22ch;margin-inline:auto}
.intencion__lineas{display:grid;gap:.5em;margin-top:1.6em;font-size:1.08rem;color:var(--tinta-2)}
.intencion__firma{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--arena-mas-osc);margin-top:1.6em}

/* ==========================================================================
   Cursos y talleres
   ========================================================================== */
.curso{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);overflow:hidden;height:100%}
.curso__medios{display:block;aspect-ratio:16/10;border-radius:0}
.curso__sin-foto{display:grid;place-items:center;width:100%;height:100%;min-height:160px;background:var(--hueso);color:var(--arena)}
.curso__sin-foto svg{width:64px;height:64px;stroke-width:.9}
.curso__cuerpo{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(20px,2.4vw,28px)}
.curso__cuerpo .antetitulo{margin-bottom:.6em}
.curso__cuerpo h3{font-size:1.3rem;margin-bottom:.4em}
.curso__cuerpo p{font-size:.92rem;color:var(--tinta-2)}
.curso__cuerpo .enlace-linea{margin-top:auto}
.curso__datos{list-style:none;margin:0 0 1.3em;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.curso__datos li{font-size:.75rem;padding:.3em .85em;border-radius:50px;background:var(--hueso);color:var(--tinta-2)}
.curso__datos .curso__precio{background:var(--crema);color:var(--tinta);font-weight:500}
.seccion--crema .curso{border-color:transparent}

.saltos{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding-top:clamp(28px,4vw,44px)}
.saltos a,.temas a{
  padding:.55em 1.3em;border:1px solid var(--linea-fuerte);border-radius:50px;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--transicion),color var(--transicion),border-color var(--transicion);
}
.saltos a:hover,.temas a:hover,.temas a[aria-current]{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}

.ficha-curso{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,5vw,64px);align-items:start}
.ficha-curso__caja{
  position:sticky;top:calc(var(--cabecera) + 24px);display:flex;flex-direction:column;gap:18px;
  padding:clamp(22px,3vw,32px);background:var(--hueso);border-radius:var(--radio-lg);
}
.ficha-curso__caja h2{font-size:1.4rem;margin:0}
.ficha-curso__caja dl{margin:0;display:grid;gap:12px}
.ficha-curso__caja dl div{border-bottom:1px solid var(--linea);padding-bottom:10px}
.ficha-curso__caja dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--arena-osc)}
.ficha-curso__caja dd{margin:0;font-size:.95rem}
.ficha-curso__caja .enlace-linea{align-self:center}

/* ==========================================================================
   Blog
   ========================================================================== */
.temas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:clamp(30px,4vw,48px)}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contacto{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:start}
.campos{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;margin-bottom:1.4em}
.campos p{margin:0 0 14px}
.campos__ancho{grid-column:1 / -1}
/* captcha del formulario (12-10-2026) */
.captcha input{max-width:180px}
.captcha small{display:block;margin-top:6px;font-size:.82rem;line-height:1.4;color:var(--tinta-2)}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{padding:1em 1.3em;border-radius:var(--radio);margin-bottom:1.6em;font-size:.95rem}
.aviso--ok{background:#e9f0e8;color:#2f4a31;border:1px solid #c9d9c7}
.aviso--error{background:#f6e6e4;color:#6e1a1c;border:1px solid #e7c6c3}
.contacto__datos{padding:clamp(24px,3vw,38px);background:var(--hueso);border-radius:var(--radio-lg)}
.contacto__datos h2{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.contacto-canales{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:12px}
.contacto-canales a{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--radio-lg);transition:background var(--transicion)}
.contacto-canales a:hover{background:var(--blanco);color:var(--tinta)}
.contacto-canales .camino__icono{width:46px;height:46px}
.contacto-canales .camino__icono svg{width:20px;height:20px}
.contacto-canales small{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--arena-osc)}
.contacto-canales span{word-break:break-word}

/* ==========================================================================
   Portada de la tienda
   ========================================================================== */
.tienda__intro{text-align:center;max-width:60ch;margin:0 auto clamp(28px,4vw,46px);color:var(--tinta-2);font-size:1.05rem}
.lineas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.4vw,30px);margin-bottom:clamp(40px,6vw,72px)}
.linea{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(16px,2.4vw,28px);
  padding:14px;background:var(--hueso);border-radius:var(--radio-lg);transition:background var(--transicion)}
.linea:hover{background:var(--crema);color:inherit}
.linea__medios{display:block;aspect-ratio:1;border-radius:120px 120px 10px 10px}
.linea__medios img{width:100%;height:100%;object-fit:cover}
.linea__texto h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin-bottom:.35em}
.linea__texto p{font-size:.88rem;color:var(--tinta-2);margin-bottom:1em}

.rituales{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(26px,4vw,48px);margin-bottom:clamp(40px,6vw,72px);
  border:1px solid var(--linea);border-radius:var(--radio-lg);
}
.rituales h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.rituales__texto p{color:var(--tinta-2)}
.rituales__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ritual{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:50px;
  background:var(--hueso);font-size:.92rem;line-height:1.3;
  transition:background var(--transicion),color var(--transicion);
}
.ritual svg{width:22px;height:22px;flex:none;stroke-width:1.2;color:var(--arena-osc);transition:color var(--transicion)}
.ritual:hover,.ritual--activo{background:var(--arena-osc);color:var(--blanco)}
.ritual:hover svg,.ritual--activo svg{color:var(--blanco)}
.tienda__titulo-lista{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.8em}

/* ==========================================================================
   Adaptable
   ========================================================================== */
@media (max-width:900px){
  .caminos{grid-template-columns:1fr}
  .camino{border-radius:var(--radio-lg)}
  .banda-morada,.rituales,.contacto,.ficha-curso{grid-template-columns:1fr}
  .ficha-curso__caja{position:static}
  .incluye{grid-template-columns:1fr}
}
@media (max-width:600px){
  .campos{grid-template-columns:1fr}
  .rituales__lista{grid-template-columns:1fr}
  .linea{grid-template-columns:1fr}
  .linea__medios{aspect-ratio:4/3}
  .incluye__item{flex-direction:column;gap:14px}
}

/* La flecha de los enlaces subrayados no tenía tamaño fuera de .boton. */
.enlace-linea{white-space:nowrap}
.enlace-linea .flecha{width:15px;height:15px;flex:none;transition:transform var(--transicion)}
.enlace-linea:hover .flecha,.camino:hover .enlace-linea .flecha{transform:translateX(4px)}

/* En pantallas angostas las entradas laterales asoman fuera del borde y
   provocan desplazamiento horizontal mientras se animan: suben en vez de entrar de lado. */
@media (max-width:900px){
  .rev--izq,.rev--der{--rev-x:0px;--rev-y:22px}
}

/* Tres botones en el óvalo del héroe: en teléfono se apilan, más compactos,
   y la forma gana alto para que el último no se salga por la curva. */
@media (max-width:600px){
  .heroe__tarjeta{padding:44px 34px 78px}
  .heroe__acciones{flex-direction:column;align-items:center;gap:8px}
  .heroe__acciones .boton{padding:.8em 1.4em;font-size:.7rem}
}

/* ==========================================================================
   Ajustes de lectura y de dedo (auditoría del 04-10-2026)
   ========================================================================== */
/* Ningún texto bajo ~11,5 px. */
/* Doble clase: tienda.css carga después que esta hoja. */
body .producto__categoria{font-size:.72rem}
.heroe .heroe__bajar{font-size:.74rem}
.ficha-curso__caja dt,.contacto-canales small{font-size:.72rem}

/* Áreas de toque de al menos ~40 px en enlaces sueltos. */
body .producto__titulo a,.curso__cuerpo h3 a,.tarjeta-entrada__cuerpo h3 a{display:block;padding-block:.45em}
.instagram__usuario{padding-block:.6em}
.enlace-linea{padding-top:.5em;min-height:36px}
.tinvwl_add_to_wishlist_button{display:inline-flex!important;align-items:center;min-height:40px}

@media (max-width:900px){
  .pie ul a,.contacto-lista a{display:inline-block;padding-block:.45em}
  .pie ul{gap:.2em}
  .contacto-lista{gap:.4em}
  .entrada__cuerpo a,.product_meta a{padding-block:.35em;display:inline-block}
  .marca{min-height:44px}
}

/* En teléfono el logo vuelve a mostrar la palabra, más chica: solo el
   emblema no se reconoce como marca y era difícil de tocar. */
@media (max-width:520px){
  .marca{gap:8px}
  .marca .marca__palabra{display:block;height:12px}
  .marca .marca__emblema{height:30px}
  .heroe__acciones .boton{font-size:.74rem}
}
@media (max-width:350px){
  .marca .marca__palabra{height:10px}
  .cabecera__acciones{gap:0}
  .icono-boton{width:40px}
}

/* ==========================================================================
   Safari e iOS
   ========================================================================== */
/* Desenfoque de la cabecera en Safari anterior a 18 (solo entiende el prefijo). */
.cabecera{-webkit-backdrop-filter:saturate(160%) blur(10px)}
/* En iOS 100vh incluye la barra del navegador; svh es lo realmente visible. */
@supports (height:1svh){ .heroe{min-height:min(94svh,920px)} }
/* iOS hace zoom al enfocar un campo con letra menor a 16 px. */
@media (max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
  input[type=search],input[type=url],textarea,select,.woocommerce .quantity .qty{font-size:16px}
}
/* Toques sin el destello gris de WebKit y sin retardo de doble toque. */
a,button,.ritual,.camino{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Ficha de producto: la galería y el resumen eran «sticky», pero los relacionados
   viven dentro de la misma grilla (div.product), así que al seguir bajando el
   resumen se quedaba pegado encima de ellos. Se sueltan.
   Con body delante para ganarle a tienda.css, que carga después.
   La galería conserva position:relative (de ella cuelga la lupa), así que
   también se anula el top que traía la regla sticky. */
body.single-product div.product .woocommerce-product-gallery{position:relative;top:auto}
body.single-product div.product .summary.entry-summary{position:static;top:auto}