/*
Theme Name: NutriEstetic
Theme URI: https://nutriesteticpuntacana.com
Author: Wilson Paulino
Description: Tema de bloques del rediseño de nutriesteticpuntacana.com. Papel crema, títulos vino en Cormorant Garamond, cursivas en ladrillo, botones redondos.
Version: 0.8.3
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: nutriestetic
License: GPL-2.0-or-later
*/

/* Texturas de fondo (como en la maqueta). Se aplican con la clase en "Avanzado → Clases CSS adicionales". */
body,
.papel { background-image: url(assets/img/textura-papel.jpg); background-size: 384px; }
.lino { background-color: var(--wp--preset--color--arena); background-image: url(assets/img/textura-lino.jpg); background-size: 384px; }
.grano-vino { background-color: var(--wp--preset--color--vino); background-image: url(assets/img/textura-vino.jpg); background-size: 384px; color: #fff; }
.grano-vino :where(h1, h2, h3, p, a) { color: #fff; }

/* Cursiva de los títulos en ladrillo: "Cómo te ves influye en <em>cómo te sientes</em>". */
:where(h1, h2, h3) em { font-style: italic; color: var(--wp--preset--color--ladrillo); }
.grano-vino :where(h1, h2, h3) em { color: var(--wp--preset--color--rosa); }

/* Etiqueta pequeña en mayúsculas sobre los títulos. */
.etiqueta { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--oliva); }

/* Enlaces de menú y pie con subrayado que crece. */
.enlace a, a.enlace { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.enlace a:hover, a.enlace:hover { background-size: 100% 1px; }

/* Botones: variantes de la maqueta (se eligen en el bloque Botón → Estilos). */
.wp-element-button, .wp-block-button__link { transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43, 33, 27, .18); }
.is-style-terracota .wp-block-button__link { background-color: var(--wp--preset--color--terracota); }
.is-style-terracota .wp-block-button__link:hover { background-color: #76382F; }
.is-style-borde .wp-block-button__link { background: transparent; color: var(--wp--preset--color--vino); box-shadow: inset 0 0 0 1px var(--wp--preset--color--vino); }
.is-style-borde .wp-block-button__link:hover { background: var(--wp--preset--color--vino); color: #fff; }
.is-style-claro .wp-block-button__link { background: #fff; color: var(--wp--preset--color--vino); }
.is-style-claro .wp-block-button__link:hover { background: var(--wp--preset--color--rosa-claro); }

/* Imágenes con esquinas suaves, como la maqueta. */
.wp-block-image.redondeada img { border-radius: 16px; }

/* Botón fijo de WhatsApp (abajo a la derecha). */
.whatsapp-fijo { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: var(--wp--preset--color--verde); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(43, 33, 27, .25); }
.whatsapp-fijo:hover { background: #2C4136; }
.whatsapp-fijo svg { width: 26px; height: 26px; }

/* Cabecera: dos menús. En escritorio, el de enlaces; por debajo de 760 px (como la maqueta), la hamburguesa. */
.menu-movil { display: none !important; }
@media (max-width: 759px) {
	.menu-escritorio { display: none !important; }
	.menu-movil { display: flex !important; }
	/* Menú a la izquierda, logo al centro (WhatsApp va en el botón fijo). */
	.cabecera-fila { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; }
	.cabecera-logo { grid-column: 2; grid-row: 1; justify-self: center; margin: 0 !important; }
	.cabecera-logo img { width: 168px !important; }
	.cabecera-acciones { display: contents; }
	.cabecera-acciones .menu-movil { grid-column: 1; grid-row: 1; }
	.cabecera-boton { display: none !important; }
}

/* Menú abierto, como la maqueta: papel, "Tratamientos" con las cinco zonas en Cormorant y flecha,
   Sobre la Dra. y Contacto en pequeño, y el botón verde de WhatsApp. */
.menu-movil .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--papel) !important; background-image: url(assets/img/textura-papel.jpg); background-size: 384px; color: var(--wp--preset--color--vino) !important; padding: 20px 24px 36px; }
.menu-movil .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px !important; }
.menu-movil .is-menu-open .wp-block-navigation__container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 0 28px !important; width: 100%; }
.menu-movil .is-menu-open .wp-block-navigation-item { margin: 0 !important; }
.menu-movil .is-menu-open .menu-zona { flex: 0 0 100%; border-bottom: 1px solid var(--wp--preset--color--linea); }
.menu-movil .is-menu-open .menu-zona-primera::before { content: "Tratamientos"; display: block; padding-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--oliva); }
.menu-movil .is-menu-open .menu-zona .wp-block-navigation-item__content { display: flex !important; justify-content: space-between; align-items: center; width: 100%; padding: 12px 0 !important; font-family: var(--wp--preset--font-family--serif); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--wp--preset--color--vino); }
.menu-movil .is-menu-open .menu-zona .wp-block-navigation-item__content::after { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1523B' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain; }
.menu-movil .is-menu-open .menu-chico { padding-top: 28px; }
.menu-movil .is-menu-open .menu-chico .wp-block-navigation-item__content { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--tinta); }
.menu-movil .is-menu-open .menu-whatsapp { flex: 0 0 100%; padding-top: 28px; }
.menu-movil .is-menu-open .menu-whatsapp .wp-block-navigation-item__content { display: flex !important; width: 100%; box-sizing: border-box; padding: 0 20px !important; align-items: center; justify-content: center; min-height: 52px; border-radius: 99px; background: var(--wp--preset--color--verde); color: #fff !important; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.menu-movil .wp-block-navigation__responsive-container-open svg, .menu-movil .wp-block-navigation__responsive-container-close svg { fill: var(--wp--preset--color--vino); width: 28px; height: 28px; }

/* ---- Secciones a todo el ancho pegadas entre sí (sin la franja de 24 px de papel). ---- */
.wp-block-post-content > .alignfull,
.wp-block-post-content > .wp-block-group.alignfull + .alignfull { margin-block: 0 !important; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---- Más texturas de la maqueta. ---- */
.eucalipto { background-color: var(--wp--preset--color--verde); background-image: url(assets/img/textura-vino.jpg); background-size: 384px; background-blend-mode: luminosity; color: #fff; }
.eucalipto :where(h1, h2, h3, p, a) { color: #fff; }
.rubor { background-color: #EBCFC4; background-image: url(assets/img/textura-papel.jpg); background-size: 384px; background-blend-mode: multiply; }
.nude { background-color: #E3CFC2; background-image: url(assets/img/textura-papel.jpg); background-size: 384px; background-blend-mode: multiply; }
.mocha { background-color: var(--wp--preset--color--cafe); background-image: url(assets/img/textura-vino.jpg); background-size: 384px; background-blend-mode: luminosity; color: #fff; }
.mocha :where(h1, h2, h3, p, a) { color: #fff; }
.mocha .is-style-claro .wp-block-button__link { color: var(--wp--preset--color--cafe); }

/* ---- Tarjetas de tratamiento: la foto crece un poco y el título cambia de color al pasar el mouse. ---- */
.wp-block-image.redondeada { overflow: hidden; border-radius: 16px; }
.wp-block-image.redondeada img { transition: transform .5s ease; }
.wp-block-group:hover > .wp-block-image.redondeada img,
.wp-block-column:hover > .wp-block-image.redondeada img { transform: scale(1.03); }
.redondeada-chica, .redondeada-chica img { border-radius: 8px !important; }

/* ---- Fotos anchas (21:9): en teléfono no bajan de 220 px. ---- */
@media (max-width: 599px) {
	.wp-block-image[class*="-B1"] img { min-height: 220px; }
	.espacio-rostro-D1 img, .espacio-laser-D1 img { aspect-ratio: 1 / 1 !important; }
}

/* ---- Cita sin sangría del navegador. ---- */
.wp-block-quote { margin-inline: 0; }

/* ---- Fachada de contacto: la etiqueta va sobre la foto, abajo a la izquierda. ---- */
.wp-block-image.espacio-contacto-F1 { position: relative; }
.wp-block-image.espacio-contacto-F1 figcaption { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 6px 12px; border-radius: 99px; background: rgba(255, 253, 249, .9); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--vino); }

/* ---- Botón de borde claro, para fondos oscuros ("Cómo llegar"). ---- */
.is-style-borde-claro .wp-block-button__link { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.is-style-borde-claro .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--vino); }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.wp-element-button:hover, .wp-block-button__link:hover { transform: none; }
	.wp-block-image.redondeada img { transform: none !important; }
}

/* ---- Mapa de Google en Contacto (sin clave: búsqueda de Plaza Mare Blu). ---- */
.mapa-contacto { border-radius: 16px; overflow: hidden; border: 1px solid var(--wp--preset--color--linea); background: var(--wp--preset--color--arena); }
.mapa-contacto iframe { display: block; width: 100%; height: 300px; border: 0; }

/* ---- Teléfonos sin subrayado (pedido de Wilson, 08/11). ---- */
a[href^="tel:"], a[href*="wa.me"] { text-decoration: none; }
a[href^="tel:"]:hover, a[href*="wa.me"]:hover { text-decoration: none; }

/* ---- La tienda se quitó (decisión del 08/11): sin el aviso morado de WooCommerce. ---- */
.woocommerce-store-notice, p.demo_store { display: none !important; }

/* ---- Zonas Cuerpo, Cabello y Bienestar (08/11). ---- */
.oliva-grano { background-color: var(--wp--preset--color--oliva); background-image: url(assets/img/textura-vino.jpg); background-size: 384px; background-blend-mode: luminosity; color: #fff; }
.oliva-grano :where(h1, h2, h3, p, a) { color: #fff; }
.oliva-grano :where(h1, h2, h3) em, .mocha :where(h1, h2, h3) em, .eucalipto :where(h1, h2, h3) em { color: var(--wp--preset--color--rosa); }
.oliva-grano .is-style-claro .wp-block-button__link { color: var(--wp--preset--color--oliva); }
.eucalipto .is-style-claro .wp-block-button__link { color: var(--wp--preset--color--verde); }
.zona-portada { background-image: url(assets/img/textura-papel.jpg); background-size: 384px; background-blend-mode: multiply; }
.tarjeta-texto { transition: transform .25s ease, box-shadow .25s ease; height: 100%; box-sizing: border-box; }
.tarjeta-texto:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43, 33, 27, .10); }
.tarjeta-texto > :last-child { margin-top: auto !important; }
@media (prefers-reduced-motion: reduce) { .tarjeta-texto:hover { transform: none; } }
.lista-linea em { color: var(--wp--preset--color--ladrillo); margin-right: 10px; }

/* ---- "Ver tratamientos" y el menú bajan con suavidad a la sección, sin quedar pegados al borde. ---- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Dirección enlazada a Google Maps: sin subrayado, con flecha de enlace externo. ---- */
a.enlace-externo { text-decoration: none !important; background-image: none !important; }
a.enlace-externo::after { content: "↗"; display: inline-block; margin-left: 6px; font-size: .85em; opacity: .75; transition: transform .2s ease, opacity .2s ease; }
a.enlace-externo:hover::after { transform: translate(2px, -2px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { a.enlace-externo:hover::after { transform: none; } }