.elementor-kit-5{--e-global-color-primary:#0D0D0D;--e-global-color-secondary:#FF5B35;--e-global-color-text:#46453F;--e-global-color-accent:#E8431F;--e-global-color-ynoff:#F3F3F1;--e-global-color-ynmuted:#9A988F;--e-global-color-ynline:#E6E5E1;--e-global-color-ynwhite:#FFFFFF;--e-global-color-yncoraltext:#C2390F;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:900;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:800;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:600;--e-global-typography-ynmono-font-family:"Spline Sans Mono";--e-global-typography-ynmono-font-weight:400;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#C2390F;}.elementor-kit-5 a:hover{color:#E8431F;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */:focus-visible{outline:2px solid #0D0D0D;outline-offset:2px}a:focus-visible,.elementor-button:focus-visible{outline:2px solid #0D0D0D;outline-offset:3px}.elementor-field::placeholder,.elementor-field textarea::placeholder{color:#6B6A64;opacity:1}.elementor-field::-webkit-input-placeholder{color:#6B6A64;opacity:1}
/* Movimiento (scroll-reveal nativo, base state visible) */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){[data-elementor-type="wp-page"] .elementor-widget-heading,[data-elementor-type="wp-page"] .elementor-widget-text-editor,[data-elementor-type="wp-page"] .elementor-widget-icon-list,[data-elementor-type="wp-page"] .elementor-widget-button,[data-elementor-type="wp-page"] .elementor-widget-image{animation:ynReveal linear both;animation-timeline:view();animation-range:entry 0% entry 50%}@keyframes ynReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}}}
.elementor-button{transition:transform .2s ease,background-color .2s ease,color .2s ease}
.elementor-button:hover{transform:translateY(-2px)}
/* Aro 360 hero home (feedback Victor 2026-07-06): orbita + punto + scroll */
@media (prefers-reduced-motion:no-preference) and (min-width:1025px){
.yn-hero-home{position:relative;overflow:hidden}
.yn-hero-home::before{content:"";position:absolute;inset:auto;left:auto;top:50%;right:4vw;width:520px;height:520px;margin-top:-260px;border:2px dashed #FF5B35;border-radius:50%;opacity:.55;background:none;pointer-events:none;animation:ynRingSpin 40s linear infinite}
.yn-hero-home::after{content:"";position:absolute;inset:auto;left:auto;top:50%;right:calc(4vw + 253px);width:14px;height:14px;margin-top:-7px;background:#FF5B35;border-radius:50%;pointer-events:none;animation:ynDotOrbit 14s linear infinite}
@keyframes ynRingSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes ynDotOrbit{from{transform:rotate(0deg) translateX(260px)}to{transform:rotate(360deg) translateX(260px)}}
@supports (animation-timeline:scroll()){
.yn-hero-home::before{animation:ynRingSpin 40s linear infinite,ynRingZoom linear both;animation-timeline:auto,scroll();animation-range:normal,0vh 90vh}
@keyframes ynRingZoom{from{scale:1;opacity:.55}to{scale:1.6;opacity:0}}
}
}

/* yn-blog-links: enlaces AA en contenido de post */
.elementor-widget-theme-post-content a{color:#C2390F;text-decoration:underline}.elementor-widget-theme-post-content a:hover{color:#E8431F}

/* yn-blog-cards: titulos ink + leer-mas AA + hover coherente */
.elementor-widget-posts .elementor-post__title,.elementor-widget-posts .elementor-post__title a{color:#0D0D0D!important}.elementor-widget-posts .elementor-post__title a:hover{color:#C2390F!important}.elementor-widget-posts .elementor-post__read-more{color:#C2390F;font-weight:600}.elementor-widget-posts .elementor-post__read-more:hover{color:#E8431F}

/* yn-blog-content: ritmo + vida en cuerpo de post */
.elementor-widget-theme-post-featured-image figure{margin:0}.elementor-widget-theme-post-featured-image img{display:block;width:100%;height:auto}.elementor-widget-theme-post-content h2{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;font-size:1.75em;line-height:1.15;color:#0D0D0D;margin-top:2em;margin-bottom:.7em}.elementor-widget-theme-post-content h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:1.25em;color:#0D0D0D;margin-top:1.4em;margin-bottom:.4em}.elementor-widget-theme-post-content p{margin-bottom:1em}.elementor-widget-theme-post-content ul{margin:0 0 1.3em 1.2em}.elementor-widget-theme-post-content li{margin-bottom:.55em}.elementor-widget-theme-post-content h2::after{content:"";display:block;width:52px;height:4px;background:#FF5B35;margin-top:12px}.elementor-widget-theme-post-content ul li::marker{color:#FF5B35}.elementor-widget-theme-post-content p:first-of-type{font-size:1.16em;line-height:1.6;color:#0D0D0D}.elementor-widget-theme-post-content blockquote{border-left:4px solid #FF5B35;background:#F3F3F1;padding:22px 26px;margin:1.8em 0;font-weight:700;font-size:1.12em;line-height:1.5;color:#0D0D0D}.elementor-widget-theme-post-content blockquote p{margin:0;font-size:inherit;color:inherit}

/* header sticky nativo CSS: el wrapper .elementor-location-header es el que tiene altura de sobra para "stickearse" (el container interior mide igual que su padre inmediato, sin margen). Sustituye Elementor Sticky JS jQuery (jank fix 2026-07-08) */
.elementor-location-header{position:sticky;top:0;z-index:99}

/* == YN-HOVER-NATIVE:BEGIN (2026-07-13) == */
/* Los hovers de tarjeta/fila (borde coral, lift -3px, sombra, fondo, transiciones) son ahora
   CONTROLES NATIVOS del container: Estilo>Borde>Hover, Estilo>Fondo>Hover, Avanzado>Transform>Hover.
   Editables desde el editor de Elementor. Aqui solo queda lo que Elementor NO puede expresar: */
.yn-svc-card:hover .elementor-button-text,.yn-idx-row:hover .elementor-button-text{text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){
.e-con:hover{--e-con-transform-translateY:0!important;--e-con-transform-translateX:0!important}
.elementor-button:hover{transform:none!important}
}
/* == YN-HOVER-NATIVE:END == */

/* RONDA-14JUL start */
/* Micromovimientos de las letras B/A/S/E + hovers que pide Victor (correo 14-07-2026).
   Replicados del CSS de sus mockups (base360-{brand,amazon,social,ecosystem}.html).
   Todo bajo prefers-reduced-motion: el Kit Digital exige WCAG "Plenamente Conforme". */

/* --- Letra gigante del hero de cada pilar ------------------------------- */
/* `width: fit-content` es CRITICO, no cosmetico: los micromovimientos son pseudo-elementos
   posicionados en % SOBRE ESTA CAJA. Si la caja ocupa todo el ancho del contenedor (cosa que pasa
   cuando la letra vive en un container en columna, como en Amazon), un `width: 60%` deja de ser el
   60% de la letra y pasa a ser el 60% de 1200px: la barra coral de la A se disparaba a media
   pantalla. Ajustando la caja a la letra, los porcentajes vuelven a ser relativos a la letra. */
.yn-letter {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  line-height: .75;
  letter-spacing: -.08em;
}
/* el span del micromovimiento se posiciona respecto a la letra */
.yn-letter::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* B — arco coral bajo la letra, respira */
.yn-letter-b::after {
  left: 5%;
  bottom: -6%;
  width: 70%;
  height: 16%;
  border-bottom: clamp(6px, 1.2vw, 14px) solid #FF5B35;
  border-radius: 0 0 60% 60% / 0 0 100% 100%;
  transform-origin: center bottom;
  animation: yn-drawB 3.5s ease-in-out infinite;
}
@keyframes yn-drawB {
  0%, 100% { transform: scaleX(1); opacity: .8; }
  50%      { transform: scaleX(1.05); opacity: 1; }
}

/* A — barra coral cruzando la letra, pulsa */
.yn-letter-a::after {
  left: 20%;
  bottom: 34%;
  width: 60%;
  height: clamp(6px, 1.2vw, 12px);
  background: #FF5B35;
  transform-origin: left center;
  animation: yn-growBar 3.5s ease-in-out infinite;
}
@keyframes yn-growBar {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.08); }
}

/* S — dos puntos coral que flotan desincronizados */
.yn-letter-s::after,
.yn-letter-s::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: clamp(1.2rem, 2.6vw, 2.2rem);
  height: clamp(1.2rem, 2.6vw, 2.2rem);
  background: #FF5B35;
  border-radius: 50%;
  animation: yn-floatDot 3.5s ease-in-out infinite;
}
.yn-letter-s::before { top: 12%; right: -6%; }
.yn-letter-s::after  { bottom: 16%; right: 2%; opacity: .6; animation-delay: .8s; }
@keyframes yn-floatDot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* E — punto coral tipo acento, pulso de escala.
   OJO: el .elementor-kit-5 va sobre .elementor-heading-title (el div INTERNO que contiene el
   texto "E"), no sobre .yn-letter-e directamente. Elementor envuelve el titulo del
   widget heading en un div interno; si el ::after cuelga del wrapper exterior (que es
   block-level y tiene como unico hijo ese div interno, tambien block), el pseudo-elemento
   cae en una linea nueva por debajo en vez de pegarse "en linea" justo despues de la E,
   por muy inline-block que sea el ::after (bug encontrado y corregido en verificacion
   agent-browser de Ecosystem, ronda 14-jul: el circulo aparecia flotando abajo-izquierda
   en vez de como acento superior junto a la letra). */
.yn-letter-e .elementor-heading-title::after {
  content: "";
  position: static;
  display: inline-block;
  width: clamp(1.6rem, 4vw, 3.4rem);
  height: clamp(1.6rem, 4vw, 3.4rem);
  background: #FF5B35;
  border-radius: 50%;
  vertical-align: baseline;
  margin-left: -.05em;
  transform: translateY(-.4em);
  animation: yn-pulse 4s ease-in-out infinite;
}
@keyframes yn-pulse {
  0%, 100% { transform: translateY(-.4em) scale(1); }
  50%      { transform: translateY(-.4em) scale(1.12); }
}

/* --- Tarjetas de los 4 pilares (Home) ----------------------------------- */
/* letra a coral + punto que crece, al pasar por encima de la tarjeta */
.yn-pillar-card .yn-pillar-letter { transition: color .3s ease; }
.yn-pillar-card:hover .yn-pillar-letter { color: #FF5B35; }
.yn-pillar-card { transition: background .35s ease; }

/* --- Acordeon Amazon: mas aire al abrir (peticion literal de Victor) ----- */
/* "me gustaria que la letra fuese un poco mas grande, y que hubiese mas espacio
    al expandirlo... tu web esta muy compactado todo" */
.yn-frente .e-n-accordion-item-title { padding: 22px 0; }
.yn-frente .e-n-accordion-item-title-text { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.yn-frente .e-n-accordion-item > .e-con { padding: 0 0 28px 40px; }
.yn-frente .e-n-accordion-item > .e-con p { font-size: 1rem; line-height: 1.65; color: #56554D; max-width: 640px; }
.yn-frente .e-n-accordion-item > .e-con p strong { color: #0D0D0D; }
/* el "movimiento al ponerte sobre ellos" */
.yn-frente .e-n-accordion-item-title { transition: padding-left .35s cubic-bezier(.2,.7,.2,1); }
.yn-frente .e-n-accordion-item-title:hover { padding-left: 12px; }

/* --- Social: iconos de redes, coral al hover ---------------------------- */
.yn-red .elementor-icon { transition: background .3s ease; }
.yn-red:hover .elementor-icon { background: #FF5B35 !important; }
.yn-red:hover .elementor-icon svg { fill: #FFFFFF; }

/* --- Social: tarjetas del flujo "de una foto, cien ideas" --------------- */
.yn-flow-item { transition: transform .3s ease, border-color .3s ease; }
.yn-flow-item:hover { transform: translateX(6px); border-color: #FF5B35 !important; }

/* --- Zonas tactiles (WCAG 2.2 · 2.5.8, nivel AA: minimo 24x24 px) -------
   La mayoria se arreglo con controles nativos (padding del widget boton). Lo que queda aqui son
   los enlaces que Elementor NO deja padear desde el editor: los items de icon-list (navegacion y
   contacto del footer), los breadcrumbs y el "Leer mas" del widget de posts. Sin esto, en movil
   son dianas de 12-23px de alto: se fallan al pulsar y no pasan la auditoria del KD.
   Se usa padding (no min-height) para no romper el flujo de las listas. */
.elementor-icon-list-item > a,
.elementor-icon-list-item > .elementor-icon-list-text > a {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
}
.elementor-post__read-more {
  display: inline-block;
  padding: 8px 0;
}
/* breadcrumbs de las 4 paginas de pilar (eran dianas de 15px de alto) */
.yn-breadcrumb a {
  display: inline-block;
  padding: 6px 2px;
}
/* telefono / email / WhatsApp escritos en linea dentro de un parrafo (eran de 19px) */
.yn-inline-link a {
  display: inline-block;
  padding: 4px 0;
}
/* el enlace a la politica dentro del consentimiento del formulario (era de 17px) */
.elementor-field-type-acceptance a,
.elementor-field-subgroup a {
  display: inline-block;
  padding: 4px 0;
}

/* --- Blog: la miniatura sacaba 3px fuera de su tarjeta ------------------ */
.elementor-posts .elementor-post__thumbnail img {
  max-width: 100%;
  height: auto;
}

/* --- Respeto a prefers-reduced-motion (obligatorio KD) ------------------ */
@media (prefers-reduced-motion: reduce) {
  .yn-letter-b::after,
  .yn-letter-a::after,
  .yn-letter-s::before,
  .yn-letter-s::after,
  .yn-letter-e .elementor-heading-title::after { animation: none; }
  .yn-flow-item:hover { transform: none; }
}
/* RONDA-14JUL end */


/* --- Flecos 2026-07-21: contadores Brand/Social se quedaban en 0 ---------
   Causa real (medida, no asumida): el SVG del triangulo (triangulo-brand.svg,
   triangulo-social.svg) se carga con <img loading=lazy> SIN width/height ni
   aspect-ratio (el plugin de soporte SVG no genero esos metadatos). Al cargar
   empuja el layout (CLS), y en una recarga con la posicion de scroll restaurada
   el "scroll anchoring" del navegador desplaza la ventana visible fuera de la
   seccion de contadores ANTES de que el IntersectionObserver nativo de Elementor
   (widget counter.js) los detecte -- por eso se quedan en 0 sin que el usuario
   haya hecho nada raro. Reservar el aspect-ratio elimina el salto de raiz (ambas
   svg son cuadradas, 460x460, confirmado con naturalWidth/naturalHeight).
   No se toca el widget counter ni su IntersectionObserver: no hay control nativo
   para eso, pero el bug no es del contador, es del layout que lo esconde. */
img[src*="triangulo-brand"],
img[src*="triangulo-social"] { aspect-ratio: 1 / 1; }/* End custom CSS */