/*
 * Estampado decorativo de iconos de fondo en Servicios — ver el
 * bloque .servicios-estampado-fondo en page-servicios.php
 * (posiciones/giros de cada icono) y servicios-estampado.js
 * (crecimiento al cargar + balanceo al pasar el cursor cerca de cada
 * uno). Mismo mecanismo que .conocenos-hojas-fondo en Conócenos (ver
 * conocenos-hojas.css), adaptado: aquí los 6 iconos (espiral, flor,
 * hoja1-3, nudo) miden todos lo mismo, todos en melocotón (ver
 * page-servicios.php — un único color de marca en toda la sección, a
 * petición expresa, no varios a la vez como llevaba antes), en vez de
 * un solo tamaño variable como las hojas de Conócenos.
 *
 * #main ya es position:relative + overflow:hidden en style.css para
 * todas las páginas — igual que en Conócenos, esta capa se estira al
 * alto real de #main (inset:0) y queda recortada en los bordes sin
 * desbordar el layout.
 */
.servicios-estampado-fondo {
  position: absolute;
  inset: 0;
  /* Mismo retraso que .conocenos-hojas-fondo (ver ahí el porqué
     completo): con la carga en frío el alto real de #main puede
     cambiar justo después del primer pintado (fuentes web todavía por
     cargar), y como cada icono se posiciona en % de ESE alto, se
     verían amontonados cerca del borde superior antes de saltar de
     golpe a su posición final. Retrasar el momento en que la capa se
     hace visible evita enseñar ese estado intermedio roto. */
  opacity: 0;
  animation: servicios-estampado-reveal 0.01s linear 0.4s forwards;
  /* Negativo, no 0: mismo motivo que .conocenos-hojas-fondo — sin esto
     un descendiente position:absolute sin z-index pinta por delante
     del contenido normal en flujo, aunque venga antes en el DOM. */
  z-index: -1;
  /* Puramente decorativo: nunca la única forma de llegar a nada. */
  pointer-events: none;
}

@keyframes servicios-estampado-reveal {
  to {
    opacity: 1;
  }
}

.servicios-estampado-icono {
  position: absolute;
  /* clamp(), no var(--icono-top) a secas — bug real, reportado con
     capturas: en las 3 secciones que reparten su estampado en un
     recinto LOCAL propio (Áreas de atención/FAQ/Tarifas, ver
     data-estampado-local en page-servicios.php), ese recinto recorta
     con su propio overflow:hidden (ver .section--areas-atencion/
     .section--faq/.section--pricing en style.css) justo en su borde —
     y "top" posiciona la ESQUINA superior del icono, no su centro, así
     que una fila cerca del 6%/92% (el reparto de
     vinculare_estampado_generar_filas() en page-servicios.php) podía
     sobresalir por el borde de su propio recinto y quedar cortada a la
     mitad justo en la costura entre dos secciones — más visible cuanto
     más corta sea la sección (FAQ, con pocas preguntas, es la más
     ajustada de las 3). 4rem de margen mínimo real a cada lado,
     calculado en px/rem (no en %, que en una sección corta podía valer
     menos que el propio alto del icono) — clamp() elige el valor de en
     medio (el "top" real de PHP) siempre que quepa entero, y si no,
     el mínimo/máximo que sí garantiza que el icono entero (top +
     --icono-size) se queda dentro del recinto. */
  top: clamp(4rem, var(--icono-top), calc(100% - 4rem - var(--icono-size)));
  /* --icono-size (7-8.5rem, fijado por fila en page-servicios.php) —
     mismo rango que --hoja-size en Conócenos, a petición expresa ("que
     el tamaño sea como el de Conócenos"); antes un único 6rem fijo
     para las 42 unidades del estampado, bastante más pequeño. */
  width: var(--icono-size);
  /* transform, no la propiedad CSS "rotate" suelta — mismo motivo que
     .conocenos-hoja: servicios-estampado.js anima esta misma
     propiedad con GSAP ("scale"/"rotation"), que siempre acaba
     escribiendo en "transform" de todos modos; fijar aquí "rotate"
     como propiedad individual arriesgaría que las dos se sumasen. */
  transform: rotate(var(--icono-rotate));
}

/* Lado izquierdo con "left", lado derecho con "right" — no con un
   "left" calculado a partir de un ancho de icono aproximado (100% menos
   el inset menos un margen fijo, lo que se probó antes): ese cálculo
   solo era exacto para el ancho de icono con el que se ajustó a mano,
   así que en cuanto la fila tocaba un extremo del margen se veía
   recortada por el overflow:hidden de #main (ver arriba) — "se
   ocultaba" un trozo. Con "right" el lado derecho se ancla de verdad al
   borde derecho, con el mismo inset que su pareja de la izquierda (ver
   page-servicios.php): un espejo exacto, sin depender de a cuánto
   equivale el ancho del icono en %. */
.servicios-estampado-icono--izq {
  left: var(--icono-left);
}

.servicios-estampado-icono--der {
  right: var(--icono-right);
}

.servicios-estampado-icono svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Oculto por completo (no solo encogido) por debajo de
   --content-max-width (72rem, ver tokens.css) — a diferencia de
   .conocenos-hoja, comprobado en el navegador en varios anchos reales
   (Playwright) que aquí SÍ llega a solaparse con contenido real
   (tarjetas de "Áreas de atención", preguntas de la FAQ, tarifas) por
   debajo de ese ancho: #main no tiene ya un margen lateral de verdad
   más allá del propio padding de cada sección (el contenido ocupa
   prácticamente todo el ancho disponible), y además el orden/alto
   relativo de las secciones cambia bastante en columna única (las
   tarjetas de "Áreas de atención" pasan a apilarse), así que ninguna
   posición en % fijada aquí para escritorio queda garantizada libre de
   solape en pantallas más estrechas. Por encima de ese ancho sí hay un
   margen lateral real y estable entre el borde de #main y el contenido
   (limitado a --content-max-width), que es donde vive todo este
   estampado. */
@media (max-width: 72rem) {
  .servicios-estampado-fondo {
    display: none;
  }
}

/* El "gating" que aquí vivía (icono junto a "Áreas de atención" oculto
   hasta 96rem, para no solapar una tarjeta real — comprobado con
   Playwright que el margen real entre el borde de #main y las tarjetas
   no crece de forma fiable hasta pasado 1344px de ventana) se quitó a
   petición expresa: "igualarlos al 2%/13% del resto [de la página]",
   priorizando la coherencia visual en toda la página aunque en algunos
   anchos de ventana el icono más metido hacia dentro de esa franja
   pueda llegar a solapar el borde de una tarjeta — decisión consciente,
   no un descuido. Ver page-servicios.php si hiciera falta revertirlo. */