:root{
  --veca-pink:#e72f63;
  --veca-pink-dark:#c9154d;
  --veca-red:#d94747;
  --veca-purple:#7d4abe;
  --veca-gold:#d99a18;
  --veca-text:#20222a;
  --veca-muted:#626575;
  --veca-soft:#fff3f7;
  --veca-line:#f0dfe6;
  --veca-shadow:0 18px 45px rgba(31,31,45,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--veca-text);
  background:#fff;
}
a{text-decoration:none}
.veca-page{overflow:hidden}
.veca-container{
  width:min(1180px, calc(100% - 42px));
  margin:0 auto;
}
.veca-hero{
  position:relative;
  min-height:320px;
  padding:58px 0 54px;
  text-align:center;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,164,185,.28), transparent 15%),
    radial-gradient(circle at 74% 24%, rgba(255,164,185,.22), transparent 16%),
    linear-gradient(180deg,#fff2f6 0%, #fff 92%);
}
.veca-hero:before,
.veca-hero:after{
  content:"";
  position:absolute;
  bottom:0;
  width:250px;
  height:255px;
  opacity:.78;
  background:linear-gradient(145deg, #e72f63, #f7b2c4);
  -webkit-mask: radial-gradient(circle at 55% 28%, #000 0 28%, transparent 29%),
                linear-gradient(#000 0 0);
  mask: radial-gradient(circle at 55% 28%, #000 0 28%, transparent 29%),
        linear-gradient(#000 0 0);
}
.veca-hero:before{
  left:0;
  border-radius:0 60% 0 0;
  clip-path:polygon(0 0, 74% 0, 53% 100%, 0 100%);
}
.veca-hero:after{
  right:0;
  border-radius:60% 0 0 0;
  clip-path:polygon(26% 0, 100% 0, 100% 100%, 47% 100%);
}
.veca-hearts{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    radial-gradient(circle at 23% 24%, #f399ae 0 13px, transparent 14px),
    radial-gradient(circle at 74% 18%, #f399ae 0 14px, transparent 15px),
    radial-gradient(circle at 82% 47%, #f399ae 0 12px, transparent 13px),
    radial-gradient(circle at 30% 52%, #f399ae 0 11px, transparent 12px);
  filter:blur(.1px);
}
.veca-hero-content{
  position:relative;
  z-index:2;
}
.veca-hero h1{
  font-size:clamp(42px, 6vw, 74px);
  line-height:1;
  margin:0 0 18px;
  letter-spacing:-1.8px;
  font-weight:800;
}
.veca-hero h1 span{color:var(--veca-pink)}
.veca-hero p{
  max-width:660px;
  margin:0 auto 28px;
  color:#4f5362;
  font-size:21px;
  line-height:1.55;
}

/* Efectos añadidos al botón general */
.veca-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:218px;
  height:52px;
  padding:0 30px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg, var(--veca-pink), var(--veca-pink-dark));
  box-shadow:0 12px 28px rgba(231,47,99,.22);
  font-weight:700;
  font-size:17px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.veca-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(231,47,99,.35);
}

.veca-section{padding:48px 0}
.veca-title{text-align:center;margin-bottom:30px}
.veca-title h2{
  font-size:clamp(28px,3vw,40px);
  line-height:1.15;
  margin:0 0 10px;
  letter-spacing:-.8px;
}
.veca-title h2 span{color:var(--veca-pink)}
.veca-title p{
  max-width:780px;
  margin:0 auto;
  color:var(--veca-muted);
  font-size:17px;
  line-height:1.65;
}

.veca-archetypes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.veca-archetype{
  min-height:184px;
  padding:28px 24px;
  border-radius:18px;
  text-align:center;
  border:1px solid rgba(240,223,230,.8);
  background:linear-gradient(180deg,#fff,#fff7f9);
  box-shadow:0 14px 32px rgba(31,31,45,.055);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.veca-archetype:hover {
  transform: translateY(-5px);
  border-color: var(--veca-pink);
}
.veca-archetype:nth-child(2){background:linear-gradient(180deg,#fff,#fff7f3)}
.veca-archetype:nth-child(3){background:linear-gradient(180deg,#fff,#f9f6ff)}
.veca-archetype:nth-child(4){background:linear-gradient(180deg,#fff,#fff9ed)}

.veca-icon{
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  color:#fff;
  font-size:42px;
  line-height:1;
  background:linear-gradient(135deg,#f75b90,var(--veca-pink));
}
.veca-archetype:nth-child(2) .veca-icon{background:linear-gradient(135deg,#f05b5b,#c92234)}
.veca-archetype:nth-child(3) .veca-icon{background:linear-gradient(135deg,#9663d8,#6e3aad)}
.veca-archetype:nth-child(4) .veca-icon{background:linear-gradient(135deg,#f2c95a,#d09012)}

.veca-archetype h3{
  margin:0 0 10px;
  font-size:23px;
}
.veca-archetype p{
  margin:0;
  color:#555b68;
  font-size:15px;
  line-height:1.55;
}

.veca-combo-wrap{
  background:linear-gradient(90deg,#fff5f8 0%,#fff 48%,#fff5f8 100%);
  border-top:1px solid #fff0f4;
  border-bottom:1px solid #fff0f4;
}
.veca-combo{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
  padding:24px 0;
}
.veca-combo h2{
  font-size:34px;
  margin:0 0 8px;
}
.veca-combo h2 span{color:var(--veca-pink)}
.veca-combo p{
  margin:0 0 18px;
  color:#575b68;
  line-height:1.6;
}

.veca-percentages{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  max-width:610px;
}
.veca-percentage{
  min-height:92px;
  border:1px solid #eadce2;
  border-radius:12px;
  background:rgba(255,255,255,.68);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.veca-percentage span{
  display:block;
  font-size:27px;
  margin-bottom:5px;
}
.veca-percentage small{
  font-size:13px;
}

.venus{color:var(--veca-pink)}
.eros{color:#c92234}
.cupido{color:var(--veca-purple)}
.afrodita{color:var(--veca-gold)}

.veca-wheel{
  width:min(300px,80vw);
  aspect-ratio:1;
  border-radius:50%;
  margin:0 auto;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  box-shadow:0 18px 36px rgba(31,31,45,.12);
}
.veca-wheel div{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:56px;
  border:1px solid rgba(255,255,255,.7);
}
.veca-wheel div:nth-child(1){background:linear-gradient(135deg,#f85b8d,#d91e58)}
.veca-wheel div:nth-child(2){background:linear-gradient(135deg,#ec6262,#c92234)}
.veca-wheel div:nth-child(3){background:linear-gradient(135deg,#9560d2,#6835a3)}
.veca-wheel div:nth-child(4){background:linear-gradient(135deg,#f2c44f,#d09012)}

/* SECCIÓN HISTORIA/ESCULTURAS MEJORADA (Galería sin textos descriptivos) */
.veca-history .veca-title{margin-bottom:32px}
.veca-history-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.veca-history-card{
  position:relative;
  border:1px solid var(--veca-line);
  border-radius:16px;
  overflow:hidden;
  background:#f9f6f3;
  box-shadow:0 12px 32px rgba(31,31,45,.06);
  aspect-ratio: 3/4;
  cursor: default;
}
.img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.veca-history-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center top;
  display:block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.veca-history-card:hover img{
  transform: scale(1.08);
}
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 18px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
}
.card-overlay h3{
  margin:0;
  font-size:24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Colores de texto para superposición alineados a la marca */
.card-overlay.venus h3 { color: var(--veca-pink); }
.card-overlay.eros h3 { color: #c92234; }
.card-overlay.cupido h3 { color: var(--veca-purple); }
.card-overlay.afrodita h3 { color: var(--veca-gold); }


.veca-final{
  padding:42px 0 52px;
  background:linear-gradient(180deg,#fff6f9,#fff);
  text-align:center;
}
.veca-final p{
  margin:0 auto 20px;
  max-width:760px;
  color:#30333e;
  font-size:20px;
  line-height:1.55;
  font-weight:700;
}

@media(max-width:1050px){
  .veca-archetypes,.veca-history-grid{grid-template-columns:repeat(2,1fr)}
  .veca-history-card { aspect-ratio: 1/1; }
}
@media(max-width:760px){
  .veca-hero{padding:48px 0}
  .veca-hero:before,.veca-hero:after{display:none}
  .veca-combo{grid-template-columns:1fr}
  .veca-percentages{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .veca-container{width:min(100% - 28px,1180px)}
  .veca-archetypes,.veca-history-grid{grid-template-columns:1fr}
  .veca-history-card { aspect-ratio: 4/5; }
}
/* (Mantén todo el CSS anterior del Hero, Arquetipos y Rueda igual) */
/* ... */

/* --- NUEVA ESTRUCTURA ZIG-ZAG PARA HISTORIA --- */
.veca-history {
  padding: 60px 0;
  background-color: #faf8f5; /* Un fondo suave para resaltar la lectura */
}

.veca-history .veca-title {
  margin-bottom: 60px;
}

.veca-zigzag-container {
  display: flex;
  flex-direction: column;
  gap: 80px; /* Espacio amplio entre cada dios */
}

.veca-zigzag-row {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* El pseudo-selector 'even' invierte el orden de los elementos pares (2 y 4) */
.veca-zigzag-row:nth-child(even) {
  flex-direction: row-reverse;
}

.veca-zigzag-img {
  flex: 0 0 42%;
  max-width: 42%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(31, 31, 45, 0.08);
  aspect-ratio: 3/4;
}

.veca-zigzag-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}

.veca-zigzag-row:hover .veca-zigzag-img img {
  transform: scale(1.05); /* Efecto zoom suave en la imagen al hacer hover sobre la fila */
}

.veca-zigzag-text {
  flex: 1; /* Ocupa el espacio restante */
}

.veca-zigzag-text h3 {
  font-size: 32px;
  margin: 0 0 16px 0;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.veca-zigzag-text p {
  font-size: 17px;
  line-height: 1.7;
  color: #4a4e59;
  margin: 0;
  text-align: justify; /* Justificado para dar forma de bloque uniforme a las 13-17 líneas */
}

/* Colores de marca aplicados a los títulos de la mitología */
.veca-zigzag-text h3.venus { color: var(--veca-pink); }
.veca-zigzag-text h3.eros { color: #c92234; }
.veca-zigzag-text h3.cupido { color: var(--veca-purple); }
.veca-zigzag-text h3.afrodita { color: var(--veca-gold); }


/* --- MEDIA QUERIES --- */
@media(max-width:1050px){
  .veca-archetypes { grid-template-columns: repeat(2,1fr); }
  .veca-zigzag-row { gap: 30px; }
  .veca-zigzag-text h3 { font-size: 28px; }
  .veca-zigzag-text p { font-size: 16px; }
}

@media(max-width:760px){
  .veca-hero{padding:48px 0}
  .veca-hero:before,.veca-hero:after{display:none}
  .veca-combo{grid-template-columns:1fr}
  .veca-percentages{grid-template-columns:repeat(2,1fr)}
  
  /* Romper el Zig-Zag a 1 sola columna en tablets/móviles */
  .veca-zigzag-row, 
  .veca-zigzag-row:nth-child(even) {
    flex-direction: column;
    text-align: center;
  }
  .veca-zigzag-img {
    flex: 0 0 auto;
    max-width: 80%; /* Imagen algo más pequeña en móvil para no ocupar toda la pantalla */
    aspect-ratio: 1/1; /* La hacemos cuadrada para móvil */
  }
  .veca-zigzag-text p {
    text-align: left; /* Quitamos el justificado en móvil para evitar ríos de espacios blancos */
  }
}

@media(max-width:560px){
  .veca-container{width:min(100% - 28px,1180px)}
  .veca-archetypes{grid-template-columns:1fr}
  
  .veca-zigzag-img { max-width: 100%; aspect-ratio: 4/5; }
}