/* Coqui Rodríguez — bloques y patrones para crear páginas */

.contenido > * + *, .inicio > * + * { margin-top: clamp(2.5rem, 7vw, 5rem); }
.contenido > p + p, .contenido > h2 + p, .contenido > h3 + p, .contenido > p + h3,
.contenido > p + ul, .contenido > ul + p, .contenido > h2 + ul, .contenido > h2 + h3 { margin-top: 0; }
.wp-block-group__inner-container > :last-child,
.wp-block-group > :last-child, .wp-block-column > :last-child { margin-bottom: 0; }
.collage > .wp-block-group__inner-container, .tarjetas > .wp-block-group__inner-container,
.polaroids > .wp-block-group__inner-container { display: contents; }

/* Portada (bloque) y collage */
.inicio .portada, .contenido .portada { padding-top: clamp(10px, 3vw, 40px); }
.collage { margin-top: 2rem; }
.portada + .collage { margin-top: -34%; }
.collage .wp-block-image { margin: 0; }
@media (max-width: 760px) { .portada + .collage { margin-top: 2rem; } }

/* Tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.tarjeta .wp-block-image { aspect-ratio: 4 / 5; margin: 0 0 1.1rem; }
.tarjeta .wp-block-image a { display: block; height: 100%; }
.tarjeta:hover .marco { rotate: 0deg; scale: 1.02; }
.tarjeta h2, .tarjeta h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 .2em; }
.tarjeta h2 a, .tarjeta h3 a { text-decoration: none; }
.tarjeta p { color: var(--tinta-suave); margin: 0; }
@media (max-width: 760px) { .tarjetas { grid-template-columns: 1fr; } .tarjeta .wp-block-image { aspect-ratio: 16 / 11; } }

/* Columnas del editor */
.wp-block-columns { display: flex; gap: clamp(1.5rem, 5vw, 4rem); flex-wrap: nowrap; }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column[style*="flex-basis"] { flex-grow: 0; }
@media (max-width: 781px) {
  .wp-block-columns { flex-wrap: wrap; }
  .wp-block-column, .wp-block-column[style*="flex-basis"] { flex-basis: 100% !important; }
}
.texto-foto .wp-block-image.marco { max-width: none; }
.texto-foto .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Encabezado de sección */
.encabezado { position: relative; }
.encabezado .dibujo-suelto { position: absolute; right: 0; top: -1rem; }
.encabezado h2 { padding-right: clamp(60px, 12vw, 140px); }
.is-style-grande { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.05; }
.entradilla { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--tinta-suave); }

/* Dibujo suelto */
.dibujo-suelto { display: flex; justify-content: center; }
.dibujo-suelto.lado-izquierda { justify-content: flex-start; }
.dibujo-suelto.lado-derecha { justify-content: flex-end; }
.dibujo-suelto svg { height: auto; }
.dibujo-suelto.tam-pequeno svg { width: clamp(70px, 10vw, 120px); max-height: 140px; }
.dibujo-suelto.tam-mediano svg { width: clamp(180px, 30vw, 360px); }
.dibujo-suelto.tam-grande svg { width: min(640px, 100%); }
.servicios .dibujo-suelto svg { width: auto; height: 110px; max-width: 100%; }

/* Polaroids sueltas (2 y 3) */
.polaroids { display: flex; justify-content: center; align-items: flex-start; padding: 1rem 0; }
.polaroids .wp-block-image { margin: 0; flex: 0 1 46%; aspect-ratio: 4 / 5; }
.polaroids.tres .wp-block-image { flex-basis: 34%; }
.polaroids .wp-block-image + .wp-block-image { margin-left: -3%; }
.polaroids .wp-block-image:nth-child(2) { margin-top: 2.5rem; z-index: 1; }
.polaroids .wp-block-image:nth-child(3) { margin-top: .8rem; }
@media (max-width: 640px) {
  .polaroids { flex-wrap: wrap; }
  .polaroids .wp-block-image, .polaroids.tres .wp-block-image { flex-basis: 70%; }
  .polaroids .wp-block-image + .wp-block-image { margin: -12% 0 0 18%; }
}

/* Mosaico (galería del editor con polaroids) */
.wp-block-gallery.is-style-polaroids { --hueco: clamp(1rem, 2.5vw, 2rem); display: flex; flex-wrap: wrap; gap: var(--hueco); margin: 0; }
.wp-block-gallery.is-style-polaroids .wp-block-image { margin: 0; flex: 0 0 calc((100% - 2 * var(--hueco)) / 3); width: auto !important; aspect-ratio: 4 / 5; cursor: zoom-in; }
.wp-block-gallery.is-style-polaroids.columns-2 .wp-block-image { flex-basis: calc((100% - var(--hueco)) / 2); }
.wp-block-gallery.is-style-polaroids.columns-4 .wp-block-image { flex-basis: calc((100% - 3 * var(--hueco)) / 4); }
.wp-block-gallery.is-style-polaroids .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-gallery.is-style-polaroids .wp-block-image:nth-child(3n+1) { --giro: -1.5deg; }
.wp-block-gallery.is-style-polaroids .wp-block-image:nth-child(3n+2) { --giro: 1.2deg; }
.wp-block-gallery.is-style-polaroids .wp-block-image:nth-child(3n) { --giro: -.6deg; }
.wp-block-gallery.is-style-polaroids .wp-block-image:hover { rotate: 0deg; scale: 1.02; }
@media (max-width: 640px) { .wp-block-gallery.is-style-polaroids .wp-block-image { flex-basis: calc(50% - var(--hueco) / 2) !important; } }

/* Foto con play (vídeo destacado) */
.wp-block-image.is-style-video { position: relative; aspect-ratio: 16 / 10; }
.wp-block-image.is-style-video a { display: block; height: 100%; }
.wp-block-image.is-style-video a::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center / 38px no-repeat;
  transition: transform .2s;
}
.wp-block-image.is-style-video a:hover::after { transform: scale(1.1); }
.video-destacado h3 { margin-bottom: .3rem; }

/* Cita a mano */
.wp-block-quote.is-style-mano { border: 0; margin-inline: auto; padding: 0; text-align: center; max-width: 34ch; }
.wp-block-quote.is-style-mano p { font: 400 clamp(1.5rem, 3.4vw, 2.3rem) / 1.3 var(--mano); max-width: none; margin: 0; }
.wp-block-quote.is-style-mano cite { display: block; margin-top: .9rem; font: normal .95rem var(--texto); color: var(--tinta-suave); letter-spacing: .05em; }
.testimonios .wp-block-quote.is-style-mano p { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }

/* Separador dibujado */
.wp-block-separator.is-style-mano {
  border: 0; height: 14px; max-width: 420px; margin-inline: auto; opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C40 3 70 12 110 7 S180 2 220 8 S270 10 298 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Etiquetas sueltas (estilos, artistas) */
.wp-block-list.is-style-etiquetas { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.4rem; max-width: 900px; }
.wp-block-list.is-style-etiquetas li { font: 400 clamp(1.4rem, 3vw, 2.1rem) / 1.2 var(--mano); padding: .15em .55em; border: 2px solid var(--linea); rotate: var(--r, -1deg); }
.wp-block-list.is-style-etiquetas li:nth-child(3n+1) { --r: -2.5deg; }
.wp-block-list.is-style-etiquetas li:nth-child(3n+2) { --r: 1.8deg; }
.wp-block-list.is-style-etiquetas li:nth-child(3n) { --r: -.6deg; }
.ha-tocado-con .wp-block-list.is-style-etiquetas li { border: 0; font-size: clamp(1.9rem, 5vw, 3.2rem); padding: 0 .3em; }
.ha-tocado-con .wp-block-list.is-style-etiquetas { gap: .4rem 2.4rem; }
.ha-tocado-con h3, .estilos h3 { font: 600 .85rem var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 1.2rem; }

/* Cifras */
.cifras .is-style-grande { margin: 0; font-size: clamp(3.2rem, 9vw, 5.5rem); }
.cifras p { color: var(--tinta-suave); margin-inline: auto; max-width: 22ch; }

/* Trayectoria */
.trayectoria { max-width: 760px; }
.trayectoria .hito { position: relative; padding: 0 0 1.8rem 2.4rem; margin: 0; }
.trayectoria .hito::before { content: ""; position: absolute; left: 7px; top: .6rem; bottom: -.4rem; width: 2px; background: var(--linea); opacity: .7; border-radius: 2px; }
.trayectoria .hito:last-child::before { display: none; }
.trayectoria .hito::after { content: ""; position: absolute; left: 0; top: .35rem; width: 14px; height: 14px; border: 2px solid var(--linea); border-radius: 50% 45% 55% 50%; background: var(--fondo); }
.trayectoria .hito h3 { font-size: 1.6rem; margin: 0 0 .2rem; }
.trayectoria .hito p { margin: 0; color: var(--tinta-suave); }

/* Qué hago */
.servicios h3 { margin: .8rem 0 .4rem; }
.servicios p { color: var(--tinta-suave); margin-inline: auto; max-width: 30ch; }

/* Preguntas frecuentes */
.preguntas { max-width: 820px; }
.wp-block-details { border-bottom: 1px solid rgba(255, 255, 255, .35); padding: 1rem 0; }
.wp-block-details summary { cursor: pointer; font: 400 clamp(1.3rem, 2.4vw, 1.6rem) var(--mano); list-style: none; position: relative; padding-right: 2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: .3rem; top: 0; font-family: var(--texto); transition: rotate .25s; }
.wp-block-details[open] summary::after { rotate: 45deg; }
.wp-block-details p { margin: .7rem 0 0; color: var(--tinta-suave); }

/* ¿Hablamos? */
.llamada { text-align: center; }
.llamada .dibujo-suelto { margin-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.llamada h2 { margin-bottom: .5em; }
.llamada .wp-block-buttons { margin-top: 1.4rem; }
.llamada p { margin-inline: auto; }

/* Contacto en columnas y otros */
.contacto-cols .dibujo-suelto svg { width: 100%; }
.redes-bloque .redes { justify-content: flex-start; }
.galeria-vacia { color: var(--tinta-suave); }

/* Banner de cookies (Complianz) con los colores de la web.
   Aceptar y rechazar con el mismo peso visual (criterio de la AEPD). */
body .cmplz-cookiebanner {
  --cmplz_banner_background_color: #211915; --cmplz_banner_border_color: #ffffff; --cmplz_banner_border_width: 2px;
  --cmplz_banner_border_radius: 0; --cmplz_text_color: #ffffff; --cmplz_hyperlink_color: #ffffff;
  --cmplz_button_border_radius: 0; --cmplz_button_font_size: 14px;
  --cmplz_button_accept_background_color: transparent; --cmplz_button_accept_border_color: #ffffff; --cmplz_button_accept_text_color: #ffffff;
  --cmplz_button_deny_background_color: transparent; --cmplz_button_deny_border_color: #ffffff; --cmplz_button_deny_text_color: #ffffff;
  --cmplz_button_settings_background_color: transparent; --cmplz_button_settings_border_color: #ffffff; --cmplz_button_settings_text_color: #ffffff;
  --cmplz_slider_active_color: #e2b25a; --cmplz_category_body_font_size: 13px;
  font-family: var(--texto); box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
body .cmplz-cookiebanner .cmplz-title { font-family: var(--mano); font-size: 1.5rem; }
body .cmplz-cookiebanner .cmplz-btn { text-transform: uppercase; letter-spacing: .04em; border-width: 2px; }
body .cmplz-cookiebanner .cmplz-btn:hover { background: #ffffff !important; color: #211915 !important; }
body .cmplz-cookiebanner .cmplz-btn:focus-visible { outline: 3px solid #e2b25a; outline-offset: 2px; }

/* Documentos legales de Complianz (política de cookies): la lista de cookies sobre el fondo de la web.
   Complianz pinta la tabla en blanco y el texto heredaba el blanco de la página. */
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown { background: transparent; border: 1px solid rgba(255, 255, 255, .35); margin-bottom: .9rem; }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown summary { background: var(--fondo-2); margin: 0 0 .9rem; padding: .7rem .9rem; }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown:not([open]) summary { margin-bottom: 0; }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown summary div::after { filter: invert(1); }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown .cookies-per-purpose { border-color: rgba(255, 255, 255, .3); background-color: rgba(255, 255, 255, .3); margin: 0 15px 15px; }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown .cookies-per-purpose div:nth-child(n) { background-color: var(--fondo); color: var(--tinta); }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown .cookies-per-purpose div:is(.name, .retention, .function) { overflow-wrap: anywhere; }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown .cookies-per-purpose div:is(.purpose, .name-header, .retention-header, .function-header) { background-color: var(--fondo-2); }
body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown .cookies-per-purpose :is(h4, h5) { margin: 0; padding: 0; color: var(--tinta); }
body #cmplz-document a[target=_blank]::after { filter: invert(1); }
body #cmplz-document a:focus { border: 0; padding: 0; }
/* «Gestionar el consentimiento» dentro de la política: las cabeceras de categoría de Complianz son gris claro translúcido
   y, sobre el fondo de la web, el texto blanco y el «Siempre activo» verde no llegaban al contraste AA. */
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category { background-color: transparent; border: 1px solid rgba(255, 255, 255, .35); }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header { background-color: var(--fondo-2); }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { color: var(--acento); }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon { filter: invert(1); }
@media (max-width: 600px) {
  body :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose { grid-template-columns: 7.2rem 1fr; margin-inline: 10px; }
}

/* ================================================================
   Móvil (revisión en dispositivos reales, 26/09/2026)
   ================================================================ */
@media (max-width: 760px) {
  /* Cabecera: logotipo más grande y centrado en vertical con el botón del menú */
  .cabecera .contenedor { align-items: center; }
  .cabecera .logo { display: flex; align-items: center; }
  .cabecera .logo img { display: block; width: min(64vw, 260px); }

  /* Portada: el dibujo más grande, con el mástil de la guitarra cortado por el borde derecho */
  .inicio .portada { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); overflow-x: clip; }
  .inicio .portada .dibujo { width: 120%; max-width: none; margin-left: -2%; }
  /* Redes a la derecha, en vertical, por encima del dibujo y con el fondo de la página (por si pisan una línea) */
  .inicio .portada .redes { position: absolute; top: .4rem; left: auto; right: var(--gutter); order: 0; flex-direction: column; gap: .7rem; margin: 0; z-index: 7; }
  .inicio .portada .redes a { background: var(--fondo); }
  .inicio .portada .redes a:hover { background: var(--tinta); }
  /* El demo reel, debajo de la guitarra y algo más grande */
  .inicio .reel { width: 92%; margin: -46% auto 0; }

  /* Collage: dos fotos apaisadas escalonadas que ocupan todo el ancho */
  .portada + .collage { aspect-ratio: 1 / 1.1; }
  .collage .c2 { left: 0; top: 0; width: 86%; aspect-ratio: 16 / 11; }
  .collage .c1 { left: auto; right: 0; top: 49%; width: 80%; aspect-ratio: 16 / 11; }
  /* Algo más inclinadas que el resto de fotos */
  .collage .marco { rotate: calc(var(--giro, 1deg) * 2); }

  /* Tarjetas de la portada con más aire */
  .tarjetas { gap: clamp(3rem, 12vw, 4rem); }
  .tarjeta .wp-block-image { margin-bottom: 1.3rem; }

  /* ¿Hablamos?: el dibujo de las manos, el doble de grande */
  .llamada .dibujo-suelto.tam-mediano svg { width: min(92vw, 420px); }
}
@media (max-width: 781px) {
  /* Texto y foto: en móvil, la foto primero */
  .texto-foto > .wp-block-column:has(> .wp-block-image) { order: -1; }
}
@media (max-width: 860px) {
  /* ¿En directo o en estudio? / ¿Solo o en grupo?: las fotos primero */
  .bloque .bloque-fotos { order: -1; }
  .bloque.invertido .bloque-texto { order: 0; }
}