/* PROPUESTA de diseño (DISENO=moderno, vista previa "diseno"). Va después de theme.css y tailwind.css.
   Mismos textos y colores de Ayelén; cambia la presentación: portada con entradas, Tiendita con fotos grandes,
   íconos de servicios y un lima menos flúor. */
:root {
  --lima: #c3eb2c; /* verde vivo aprobado por Ayelén (9/11/2026); antes #d4ec7a, se veía apagado */
}

.aviso-propuesta {
  margin: 0; padding: .4rem 1rem; text-align: center; font-size: .8rem; font-weight: 500;
  background: var(--violeta); color: #fff;
}

/* Portada */
.portada__titulo {
  max-width: 48rem; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.02em; color: var(--violeta);
}
.portada__subrayado { background: linear-gradient(transparent 62%, var(--lima) 62%); padding: 0 .1em; }
.portada__texto { margin-top: 1.25rem; max-width: 42rem; font-size: 1.15rem; color: var(--tinta); }

.entrada {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border-radius: 1.5rem;
  border: 2px solid transparent; transition: transform .2s, box-shadow .2s;
}
.entrada:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(46 2 54 / .14); }
.entrada:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; }
.entrada__titulo { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.entrada__texto { margin-top: .6rem; font-size: .95rem; line-height: 1.5; }
.entrada__ir { margin-top: auto; padding-top: 1.25rem; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500; }
.entrada--violeta { background: var(--violeta); color: #fff; }
.entrada--lila { background: var(--lila); color: var(--tinta); }
.entrada--lima { background: var(--lima); color: var(--tinta); }
.entrada--borde { background: #fff; border-color: var(--lila-borde); color: var(--tinta); }
.entrada--lila .entrada__titulo, .entrada--borde .entrada__titulo { color: var(--violeta); }

/* Tiendita: tarjeta con foto grande en vez de círculo chico */
.tienda-moderna .producto {
  align-items: stretch; text-align: left; overflow: hidden; border-radius: 1.5rem;
  border: 1px solid var(--lila); background: #fff; box-shadow: 0 2px 10px rgb(46 2 54 / .06);
}
.tienda-moderna .producto > picture { display: block; }
.tienda-moderna .producto-foto {
  width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; box-shadow: none; object-fit: cover;
}
.tienda-moderna .producto:hover .producto-foto { transform: scale(1.02); }
.tienda-moderna .producto-titulo { margin-top: 1.25rem; padding: 0 1.5rem; font-size: 1.5rem; font-weight: 700; color: var(--violeta); }
.tienda-moderna .producto-sub { padding: 0 1.5rem; color: var(--violeta); font-size: 1rem; } /* violeta: pedido de Ayelén 12/11 */
.tienda-moderna .producto > div { padding: 0 1.5rem; }
.tienda-moderna .producto > div:last-child { padding-bottom: 1.5rem; }

/* Íconos propios de Servicios y Talleres (scripts/iconos.py): el estilo es solo CSS */
.icono { display: block; width: 10rem; height: 10rem; margin: .75rem auto 0; transition: transform .3s; overflow: visible; }
.caja-servicio:hover .icono { transform: scale(1.06) rotate(-3deg); }
.icono-trazo { fill: none; stroke: var(--violeta); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.icono-relleno { fill: #e9d83a; stroke: none; } /* amarillo: más cálido que el lima de los acentos */
.icono--sello { padding: 1.5rem; border-radius: 999px; background: var(--violeta); }
.icono--sello .icono-relleno { fill: none; }
.icono--sello .icono-trazo { stroke: #e9d83a; }
.icono--burbuja { padding: 1.4rem; border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%; background: #e9d83a; }
.icono--burbuja .icono-relleno { fill: #fff; }

/* Tiendita: el botón de la foto ocupa toda la tarjeta */
.tienda-moderna .producto-zoom { border-radius: 0; width: 100%; }

/* Tiendita: la foto entra entera en la tarjeta (escalada, sin recortar) */
.tienda-moderna .producto-foto { object-fit: contain; background: var(--lila-50); padding: .75rem; }

/* Tiendita: color de fondo de la foto según la categoría (pedido de Ayelén, 8/11/2026): lila, verde y amarillo de la página */
:root { --cat-digitales: var(--lila); --cat-fisicos: var(--lima); --cat-objetos: #f3e98f; }
.tienda-moderna .producto--digitales .producto-foto { background: var(--cat-digitales); }
.tienda-moderna .producto--fisicos .producto-foto { background: var(--cat-fisicos); }
.tienda-moderna .producto--objetos .producto-foto { background: var(--cat-objetos); }
.tienda-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }
.tienda-filtros[hidden] { display: none; }
.tienda-filtro {
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--tinta);
  background: #fff; color: var(--tinta); font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500;
}
.tienda-filtro--digitales { border-color: var(--lila-borde); }
.tienda-filtro--fisicos { border-color: #9bb53a; }
.tienda-filtro--objetos { border-color: #c9b52a; }
.tienda-filtro:hover { background: var(--lila-50); }
.tienda-filtro[aria-pressed="true"] { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.tienda-filtro--digitales[aria-pressed="true"] { background: var(--cat-digitales); border-color: var(--lila-borde); color: var(--tinta); }
.tienda-filtro--fisicos[aria-pressed="true"] { background: var(--cat-fisicos); border-color: #9bb53a; color: var(--tinta); }
.tienda-filtro--objetos[aria-pressed="true"] { background: var(--cat-objetos); border-color: #c9b52a; color: var(--tinta); }
.tienda-filtro:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; }
.producto[hidden] { display: none; }
.medios-pago-bloque { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; }
.medios-pago-bloque .medios-pago { margin-top: 0; align-items: center; }
.medios-pago__titulo, .medios-pago__texto { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500; color: var(--tinta); }
.medios-pago__texto { font-size: 1rem; }

/* Video del Inicio (video.js) */
.video-inicio { background: var(--lila-50); }
/* Título del video: si corta, en líneas parejas. En compu puede ser más ancho que el video (hasta 64rem) para entrar en una línea */
.video-inicio-titulo { text-wrap: balance; }
@media (min-width: 1024px) {
  .video-inicio-titulo { --ancho: min(64rem, 100vw - 3rem); width: var(--ancho); margin-inline: calc((100% - var(--ancho)) / 2); }
}
.video-portada { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.25rem; background: var(--tinta); }
.video-portada > picture { height: 100%; }
.video-portada img { width: 100%; height: 100%; object-fit: cover; }
.video-portada:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; }
.video-play { position: absolute; top: 50%; left: 50%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%); border-radius: 999px; background: var(--violeta); }
.video-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: .85rem 0 .85rem 1.4rem; border-color: transparent transparent transparent #fff; }
.video-iframe { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 1.5rem; border: 0; border-radius: 1.25rem; }

/* Solo celular: títulos y frases cortas centrados, párrafos largos justificados. Poemas y listas mantienen su forma. */
@media (max-width: 767px) {
  main h1, main h2, main h3 { text-align: center !important; }
  main p:not(.verso):not(.verso-post):not(.texto-corto):not(.al-center):not(.text-center) {
    text-align: justify; text-align-last: left; hyphens: auto;
  }
  main .texto-corto, article > p, .portada__texto, .volver, .producto-sub, .caja-servicio, .post-card-extra p {
    text-align: center !important; text-align-last: center !important; hyphens: manual !important;
  }
  .portada__texto { text-wrap: balance; }
  .volver { display: block; }
  .entrada { align-items: center; text-align: center; }
  .portada__titulo { margin-inline: auto; }
  main .verso, main .verso-post { text-align: left !important; }
}

/* Subtítulo remarcado de un taller (pedido de Ayelén, 8/11/2026): subrayado lima como el título del Inicio */
.subtitulo-remarcado { background: linear-gradient(transparent 58%, var(--lima) 58%); padding: 0 .15em; font-weight: 600; }

/* Sandía y mayonesa: cabecera como en Wix (franja lima, recuadro lila, ilustración a la derecha) */
.sandia-cabecera { background: var(--lima); }
.sandia-cabecera__caja {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  background: var(--lila); padding: 2rem 1.5rem; border-radius: .25rem;
}
.sandia-cabecera__texto { width: 100%; }
.sandia-cabecera__linea { margin-top: 1.5rem; border: 0; border-top: 2px solid var(--lila-medio); max-width: 28rem; }
.sandia-cabecera__img { width: min(16rem, 70vw); height: auto; background: #fff; }
@media (min-width: 768px) {
  .sandia-cabecera__caja { flex-direction: row; justify-content: space-between; padding: 2.5rem 2.5rem; }
  .sandia-cabecera__img { width: 18rem; margin: -1rem 0 -3.5rem; box-shadow: 0 6px 18px rgb(46 2 54 / .12); }
}

/* "Suscribite acá" en recuadro, como en Wix (pedido de Ayelén, 8/11/2026) */
.suscribite-caja { padding: 2rem 1.75rem 1.75rem; border: 1px solid #f5b3b3; border-radius: .5rem; background: #fff; text-align: center; }
.suscribite-caja__titulo { text-align: left; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1; color: var(--tinta); }
.suscribite-caja__campo {
  display: block; width: 100%; min-height: 44px; padding: .6rem .8rem; border: 1px solid #c9c2cc; border-radius: .4rem;
  background: #fff; color: var(--tinta); font-size: 1rem;
}
.suscribite-caja__campo:focus { outline: 2px solid var(--violeta); outline-offset: 1px; border-color: var(--violeta); }
.suscribite-caja__campo[aria-invalid="true"] { border-color: #b3261e; }
.suscribite-caja__boton {
  display: block; width: 100%; min-height: 48px; border-radius: .4rem; background: var(--violeta); color: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 1rem;
}
.suscribite-caja__boton:hover { background: #4d0459; }
.suscribite-caja__boton:disabled { opacity: .7; }
.suscribite-caja__boton:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; }

/* Testimonios de Servicios en carrusel, como las fotos de Talleres (pedido de Ayelén, 8/11/2026) */
.carrusel-testimonio { flex: 0 0 auto; width: min(85vw, 24rem); scroll-snap-align: center; display: flex; }
.carrusel-testimonio .testimonio { width: 100%; }
.sandia-cabecera__caja > picture { flex: 0 0 auto; }
@media (min-width: 768px) { .sandia-cabecera__img { width: 19rem; } }

/* PALETA COMPLETA (aprobada por Ayelén el 9/11/2026): verde más vivo y amarillo en todas las páginas */
:root {
  --lima: #c3eb2c;            /* verde más vivo (cerca del #caf637 de Wix, sin ser flúor); antes #d4ec7a */
  --amarillo: #f7d945;        /* amarillo para acentos (íconos, botones, filtros) */
  --amarillo-suave: #fff1a8;  /* amarillo para fondos grandes */
  --cat-objetos: var(--amarillo);
}

/* Inicio: la charla gratuita sobre fondo amarillo; la caja de Sandía en amarillo */
.video-inicio { background: var(--amarillo-suave); }
.entrada--borde { background: var(--amarillo); border-color: transparent; }
.entrada--borde .entrada__titulo { color: var(--violeta); }

/* Íconos de Servicios y Talleres: el amarillo fuerte */
.icono-relleno { fill: var(--amarillo); }
.icono--sello .icono-trazo { stroke: var(--amarillo); }
.icono--burbuja { background: var(--amarillo); }

/* Servicios: cajas con borde amarillo al pasar el mouse; botón "Conocé nuestros servicios" en verde */
.caja-servicio:hover { box-shadow: 0 0 0 3px var(--amarillo); }
.btn-lila-medio { background: var(--lima); }
.btn-lila-medio:hover { background: #b3dc1f; }

/* Talleres: el carrusel de fotos sobre amarillo suave */
section[aria-labelledby="registros-titulo"] { background: var(--amarillo-suave); }

/* Blog: la categoría elegida subrayada en amarillo; tarjetas sin foto en verde */
.chip[aria-pressed="true"] { background: var(--amarillo-suave); box-shadow: inset 0 -3px 0 var(--amarillo); }

/* Sandía: la franja ya es verde (ahora más vivo); la línea del recuadro en amarillo */
.sandia-cabecera__linea { border-top-color: var(--amarillo); }

/* Pie: una línea amarilla arriba de la franja lila */
footer > .bg-lila { box-shadow: inset 0 4px 0 var(--amarillo); }

/* Tiendita: "Objetos literarios" con el amarillo fuerte */
.tienda-filtro--objetos { border-color: #d9b800; }
.tienda-filtro--objetos[aria-pressed="true"] { background: var(--amarillo); border-color: #d9b800; }

/* Sobre mí (9/11/2026): foto de Ayelén con borde violeta oscuro; tercer botón en amarillo */
.foto-aye { box-shadow: 0 0 0 5px var(--violeta); }
.btn-amarillo { background: var(--amarillo); color: var(--tinta); letter-spacing: .06em; }
.btn-amarillo:hover { background: #ecc92c; }

/* Testimonios de Servicios como el carrusel de Talleres: banda amarilla suave, tarjetas con recuadro lila redondeado
   y los mismos botones lila (pedido de Ayelén, 9/11/2026) */
.testimonios-banda { background: var(--amarillo-suave); }
.testimonios-banda .testimonio { border: 3px solid var(--lila); border-radius: 1.25rem; box-shadow: none; }
.testimonios-banda .carrusel-btn { background: var(--lila); }
.testimonios-banda .carrusel-btn:hover { background: var(--lila-borde); }

/* Posts: notas al pie (párrafos que empiezan con *) más chicas y con una línea arriba (pedido de Ayelén, 10/11/2026) */
.nota-al-pie { margin-top: .75rem; font-size: .9rem; line-height: 1.55; color: rgb(28 16 32 / .8); text-align: justify; }
.nota-al-pie--primera { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lila-borde); }