/*
Theme Name: Pomme Child
Theme URI: https://wordpress.com/themes/pomme/
Template: pomme-wpcom
Author: Automattic
Author URI: https://automattic.com/
Description: Pomme is a simple portfolio theme for painters.
Version: 1.0.1.1770766352
Updated: 2026-02-11 00:32:32

*/

/* CUERPO */
body {
    font-family: futura-100-book, "Jost Local", sans-serif;
    font-style: normal;
}

/* HEADER: título del sitio */
.wp-block-site-title {
    font-family: "cubano", "Cubano Local", sans-serif;
    font-weight: 400;
}

/* TITULARES DE CONTENIDO */
h1, h2, h3 {
    font-family: "cubano", "Cubano Local", sans-serif;
    font-weight: 400;
}

/* QUE LOS TÍTULOS NO SE CORTEN Y CAMBIEN DE LÍNEA */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
}

/* CAMBIAR TIPOGRAFíA A MENÚ NAVEGACIÓN*/
.wp-block-navigation a {
    font-family: "cubano", "Cubano Local", sans-serif;
    font-weight: 400;
      font-size: 0.9rem;
}

/* ÉNFASIS */
h1 em, h2 em, h3 em {
    font-style: italic;
}

/* TAMAÑO GENERAL FUENTES */
html {
    font-size: 135%;
}

/* TAMAÑO RESPONSIVE FUENTES */
@media (max-width: 767px) {
    html {
        font-size: 120%;
    }

    .site-header {
        padding-block: 2.5rem;
    }

/* HACER RESPONSIVE EL LOGO */
.logo svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

    .wp-block-site-title {
        font-size: 2.4rem;
    }
}

/* ROTACIÓN FLOR-MANCHA */
#Flor {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotacion 25s linear infinite;
}

@keyframes rotacion {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* METER UN POCO DE ESPACIO ENTRE EL MENÚ Y LOS BOTONES EN EL HEADER DEL ORDENADOR*/
@media (min-width: 1306px) {
  .nav-desktop-offset {
    margin-top: 24px;
  }
}

/* ALINEAR TÍTULO POST CON LOGO ORDENADOR */
@media (min-width: 1306px) {
  .wp-block-columns {
    align-items: flex-start;
  }

  .wp-block-column:nth-child(2) {
    padding-top: 0.6rem;
  }
}

/* PONER TIPOGRAFA CUBANO AL FOOTER */
.footer-legal .marca {
  font-family: "cubano", "Cubano Local", sans-serif;
  font-weight: 400;
}


/*PONER FOOTER AÑO Y MARCA A LA DERECHA Y EN UNA LÍNEA */
@media (min-width: 1306px) {

  .wp-block-group.is-nowrap.is-layout-flex {
    justify-content: space-between;
    width: 100%;
  }

}

@media (min-width: 1306px) {

  .footer-legal {
    white-space: nowrap;
  }

}

/*BOTONES CON TIPOGRAFÍA "CUBANO"*/
.wp-block-button__link {
  font-family: "cubano", "Cubano Local", sans-serif;
  font-weight: 400;
}

@media (min-width: 1306px) {

  .wp-block-buttons {
    flex-direction: row;
    gap: 1rem;
  }

}


/*BOTONES EN UNA LÍNEA AJUSTÁNDOSE AL TAMAÑO DE LA COLUMNA EN ORDENADOR*/
@media (min-width: 1306px) {

  .wp-block-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100%;
  }

  .wp-block-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .wp-block-button__link {
    width: 100%;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  }

}

/*CENTRAR CONTENIDO DE LOS BOTONES EN ORDENADOR*/
@media (min-width: 1306px) {

  .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

/*AJUSTAR AL ANCHO 100% RESERVAR CITA*/
.page-id-reservar-cita .wp-site-blocks {
  max-width: 100% !important;
}

.page-id-reservar-cita .wp-block-group {
  max-width: 100% !important;
}

/* TÍTULO DE PÁGINAS */
.wp-block-post-title {
  font-size: 1.15rem !important;
}

/* QUE ESCALE TODA LA COLUMNA 1 EN MÓVIL Y TABLET*/
@media (max-width: 767px) {
  .wp-block-column:first-child {
    transform: scale(0.95);
    transform-origin: top left;
  }
}

/* SIDEBAR + CONTENIDO (25%/75%). En pantallas menores a 1100px el layout principal pasa a vertical*/
@media (max-width: 767px) {

  .wp-block-columns.alignwide {
    flex-direction: column !important;
  }

  .wp-block-columns.alignwide > .wp-block-column {
    flex-basis: 100% !important;
  }

}

/* Columnas internas del post (34% / 65%) cuando el texto y la imagen empiezan a montarse*/
@media (max-width: 767px) {

  .wp-block-post .wp-block-columns {
    flex-direction: column !important;
  }

  .wp-block-post .wp-block-column {
    flex-basis: 100% !important;
  }

}

/* Para que los botones no se aplasten */
@media (max-width: 480px) {

  .wp-block-buttons {
    flex-direction: column !important;
    gap: 15px;
  }

  .wp-block-button__link {
    width: 100%;
  }

}

/* Para que la imagen destacada no se deforme */
.wp-block-post-featured-image img {
  object-fit: contain !important;
  height: auto !important;
}

/*Forzar que los botones puedan romper línea*/
.wp-block-buttons {
  flex-wrap: nowrap !important;
  gap: 1rem;
}

.wp-block-buttons .wp-block-button {
  flex: 1 1 auto;
}

/*Corregir el reparto de columnas en responsive*/
@media (max-width: 767px) {
  .wp-block-columns {
    flex-direction: column;
  }

  .wp-block-column {
    flex-basis: 100% !important;
  }
}

/*Ajustar títulos largos*/
.wp-block-post-title {
  word-break: normal;
  hyphens: auto;
}

/*Dimensiones explícitas al logo*/
.logo {
  display: block;
  width: 100%;
  max-width: 400px;
}

.logo svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Botones escritorio a la derecha al lado del logo en tablet */
@media (min-width: 768px) and (max-width: 1305px) {

  header.wp-block-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header.wp-block-group .logo {
    flex: 0 0 auto;
  }

  header.wp-block-group .wp-block-group {
    flex: 0 0 auto;
  }

}

/* Igualar ancho de botones en tablet */
@media (min-width: 768px) and (max-width: 1305px) {

  header .wp-block-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
  }

  header .wp-block-button {
    width: 260px; /* ajusta si quieres más ancho */
  }

  header .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }

}

/* BOTONES MÓVIL ANCHO COMPLETO */
@media (max-width: 480px) {

  .header-mobile .wp-block-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .header-mobile .wp-block-button {
    width: 100%;
  }

  .header-mobile .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }

}

/* Ajustar grid del header móvil */
@media (max-width: 767px) {

  .logo-y-hamburguesa {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 85px;
  }

}

/* Esto fuerza el grid del header-mobile aunque el theme esté metiendo estilos por encima*/
@media (max-width: 767px) {

  .logo-y-hamburguesa,
  .logo-y-hamburguesa > .wp-block-group,
  .logo-y-hamburguesa > .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center;
    width: 100%;
  }

}

/* Ancho del logo en mobile*/
@media (max-width: 767px) {

  .logo-y-hamburguesa .logo {
    max-width: 93%;
  }

}


/* Justificar textos en mobile */
@media (max-width: 767px) {

  /* Justificar extractos en el listado */
  .wp-block-post-excerpt__excerpt {
    text-align: justify;
  }

  /* Justificar contenido dentro de la entrada */
  .wp-block-post-content p {
    text-align: justify;
  }

}

/**/
@media (max-width: 767px) {

  .wp-block-post .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
  }

}


/* Por defecto (tablet y escritorio) */
.slider-inicio-movil {
  display: none;
}

.entradas-inicio {
  display: block;
}

/* Ocultar entradas solo en el móvil*/
@media (max-width: 767px) {

  .slider-inicio-movil {
    display: block !important;
  }

  .entradas-inicio {
    display: none !important;
  }

}


/* Quitar un bloque que molesta y separa los botones del slider del inicio*/
@media (max-width: 767px) {

  main#wp--skip-link--target {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

}

/*Quitar espacio arriba del slider del inicio*/
@media (max-width: 767px) {

  #metaslider-id-377,
  #metaslider-id-377 .flexslider,
  #metaslider-id-377 .flex-viewport,
  #metaslider-id-377 .slides {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Quitar espacio arriba del slider del inicio*/
  .home div.alignnormal {
    margin-block-start: 0 !important;
    margin-bottom: 0 !important;
  }

}
    
/* Este bloque fuerza que la template part del header ocupe ms del viewport en móvil*/
@media (max-width: 767px) {

  header.wp-block-template-part {
    margin-left: calc(55% - 50vw);
        margin-right: calc(55% - 50vw);
  }

}
    
/* Color de los elementos del interior de la hamburgesa*/
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container a {
  color: #2842cf !important;
}

.wp-block-navigation__responsive-container-close path {
  fill: #2842cf !important;
}

/* Quitar el transform de la columna 1 en móvil para que no afecte al header*/
@media (max-width: 767px) {
  .wp-block-column:first-child {
    transform: none !important;
  }
}

/* Mover la cruz del menú desplegable a la derecha*/
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__responsive-container-close {
  left: 20px !important;
}

/*Quitar espacio que vuelve a molestar del slider*/
@media (max-width: 767px) {

  main#wp--skip-link--target {
    min-height: 0 !important;
  }

}

/* Footer responsive */

.footer-desktop {
  display: none;
}

.footer-mobile {
  display: block;
}

@media (min-width: 1306px) {
  .footer-desktop {
    display: block;
  }

  .footer-mobile {
    display: none;
  }
}

/* Hover para enlaces del bloque Navigation */
.wp-block-navigation a:hover {
  color: #2740cf80 !important;
}

/* ===== ICONOS GENERALES ===== */

.email-icon,
.whatsapp-icon,
.phone-icon {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  color: #2842cf;
}

/* Ambas capas ocupan exactamente el mismo espacio */
.email-icon .icon-fill,
.email-icon .icon-stroke,
.whatsapp-icon .icon-fill,
.whatsapp-icon .icon-stroke,
.phone-icon .icon-fill,
.phone-icon .icon-stroke {
  position: absolute;
  inset: 0;
}

/* SVG ocupa todo el contenedor */
.email-icon svg,
.whatsapp-icon svg,
.phone-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Estado inicial: solo visible fill */
.email-icon .icon-stroke,
.whatsapp-icon .icon-stroke,
.phone-icon .icon-stroke {
  display: none;
}

/* Hover: intercambiamos */
.email-icon:hover .icon-fill,
.whatsapp-icon:hover .icon-fill,
.phone-icon:hover .icon-fill {
  display: none;
}

.email-icon:hover .icon-stroke,
.whatsapp-icon:hover .icon-stroke,
.phone-icon:hover .icon-stroke {
  display: block;
}

/* Iconos footer mobile */
@media (max-width: 899px) {

  .footer-mobile {
    display: flex;
    justify-content: center;
  }

  .footer-mobile .email-icon,
  .footer-mobile .whatsapp-icon,
  .footer-mobile .phone-icon {
    margin: 0 8px;
  }

}

/* Cambiar tamaño espaciador mantenimiento en mobile */

@media (max-width: 767px) {
  .espaciador-mantenimiento {
    height: 100px !important;
  }
}

/* ===== FINAL ICONOS GENERALES ===== */

/* Tipografías antes de cookies */
@font-face {
  font-family: "Jost Local";
  src: url("/wp-content/themes/pomme-wpcom-child/assets/fonts/Jost-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost Local";
  src: url("/wp-content/themes/pomme-wpcom-child/assets/fonts/Jost-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cubano Local";
  src: url("/wp-content/themes/pomme-wpcom-child/assets/fonts/Cubano.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== FOOTER ABAJO SIEMPRE ===== */

.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== HEADER CON MENOS ESPACIO ARRIBA EN TABLET Y MÓVIL ===== */

@media (max-width: 1024px) {

  .site-header {
    padding-top: 0 !important;
  }

}