/* ============================================================
   Conóceme – Violeta Terpolilli  |  Premium CSS
   Paleta: #EEAAE9 · #8c6ac9 · #000000 · #8A71C2
   Fondo: #FFFCFF · Alternativo: #C9BFE2
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --cv-rose:      #EEAAE9;
  --cv-violet:    #8c6ac9;
  --cv-violet-2:  #8A71C2;
  --cv-black:     #000000;
  --cv-bg:        #FFFCFF;
  --cv-bg-alt:    #C9BFE2;
  --cv-text:      #1a1025;
  --cv-text-soft: #3d2e5a;
  --cv-white:     #ffffff;

  --cv-radius:    1.25rem;
  --cv-gap:       clamp(2rem, 5vw, 4rem);

  --cv-font-display: 'Cormorant Garamond', 'Georgia', serif;
  --cv-font-body:    'Roboto', system-ui, sans-serif;
}

/* ── Reset mínimo ─────────────────────────────────────────── */
.cv-section *,
.cv-section *::before,
.cv-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Sección principal ────────────────────────────────────── */
.cv-section {
  position: relative;
  background: var(--cv-bg);
  padding: clamp(4rem, 10vw, 8rem) 1.25rem clamp(5rem, 11vw, 9rem);
  overflow: hidden;
  font-family: var(--cv-font-body);
  color: var(--cv-text);
}

/* ── Orbs de fondo ─────────────────────────────────────────── */
.cv-bg-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cv-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .18;
}
.cv-orb--1 {
  width: 520px; height: 520px;
  background: var(--cv-rose);
  top: -140px; right: -120px;
}
.cv-orb--2 {
  width: 380px; height: 380px;
  background: var(--cv-violet);
  bottom: -80px; left: -100px;
}
.cv-orb--3 {
  width: 260px; height: 260px;
  background: var(--cv-bg-alt);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Contenedor ───────────────────────────────────────────── */
.cv-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cv-gap);
  align-items: center;
}

/* ══════════════════════════════════════
   COLUMNA FOTO  v1.0.2
   Técnica: SVG clipPath animado sobre la imagen.
   Sin background de color — solo la foto con efecto de luz dual.
══════════════════════════════════════ */
.cv-photo-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cv-photo-wrapper {
  position: relative;
  width: min(340px, 90vw);
  /* ratio ~4:5 */
  aspect-ratio: 4/5;
}

/* SVG contenedor: ocupa todo el wrapper, contiene el clipPath + imagen */
.cv-photo-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* La imagen dentro del SVG se escala con transición suave */
.cv-photo-svg image {
  transition: transform .7s cubic-bezier(.4,0,.2,1);
  transform-origin: 50% 50%;
}
.cv-photo-wrapper:hover .cv-photo-svg image {
  transform: scale(1.045);
}

/* ── Anillo exterior giratorio (SVG separado) ── */
.cv-photo-ring {
  position: absolute;
  inset: -26px;
  pointer-events: none;
  animation: cv-spin 30s linear infinite;
}
.cv-photo-ring svg {
  width: 100%;
  height: 100%;
}
@keyframes cv-spin {
  to { transform: rotate(360deg); }
}

/* ── Luz dual: dos rayos de luz que barren la imagen en loop ──
   Se implementan como divs absolutos encima del SVG,
   enmascarados con el mismo clip-path del contenedor SVG
   a través de la clase .cv-photo-lights                      */
.cv-photo-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* clip con elipse generosa — nunca deja borde visible */
  clip-path: ellipse(46% 48% at 50% 50%);
  animation: cv-lights-morph 12s ease-in-out infinite alternate;
  overflow: hidden;
}
@keyframes cv-lights-morph {
  0%   { clip-path: ellipse(46% 48% at 50% 50%); }
  25%  { clip-path: ellipse(48% 46% at 52% 50%); }
  50%  { clip-path: ellipse(45% 49% at 50% 52%); }
  75%  { clip-path: ellipse(47% 47% at 48% 50%); }
  100% { clip-path: ellipse(46% 48% at 50% 48%); }
}

/* Rayo 1 – diagonal suave de arriba-izquierda a abajo-derecha */
.cv-photo-lights::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    118deg,
    transparent 30%,
    rgba(238,170,233,.28) 46%,
    rgba(255,255,255,.18) 50%,
    rgba(140,106,201,.18) 54%,
    transparent 70%
  );
  animation: cv-sweep-a 5s ease-in-out infinite;
}
@keyframes cv-sweep-a {
  0%   { transform: translateX(-80%) translateY(-20%) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(80%)  translateY(20%)  rotate(0deg); opacity: 0; }
}

/* Rayo 2 – diagonal inversa, desfasado */
.cv-photo-lights::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    -62deg,
    transparent 30%,
    rgba(140,106,201,.2) 46%,
    rgba(255,255,255,.14) 50%,
    rgba(238,170,233,.2) 54%,
    transparent 70%
  );
  animation: cv-sweep-b 5s ease-in-out infinite;
  animation-delay: 2.5s;
}
@keyframes cv-sweep-b {
  0%   { transform: translateX(80%) translateY(-20%) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(-80%) translateY(20%)  rotate(0deg); opacity: 0; }
}

/* Overlay de color permanente muy sutil sobre la imagen (armoniza tonos) */
.cv-photo-overlay {
  position: absolute;
  inset: 0;
  clip-path: ellipse(46% 48% at 50% 50%);
  animation: cv-lights-morph 12s ease-in-out infinite alternate;
  background: linear-gradient(
    170deg,
    rgba(238,170,233,.10) 0%,
    transparent 45%,
    rgba(140,106,201,.16) 100%
  );
  pointer-events: none;
}

/* Shimmer hover */
.cv-photo-shimmer {
  position: absolute;
  inset: 0;
  clip-path: ellipse(46% 48% at 50% 50%);
  animation: cv-lights-morph 12s ease-in-out infinite alternate;
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(255,255,255,.20) 48%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-position: -110% 0;
  transition: background-position .8s ease;
  pointer-events: none;
}
.cv-photo-wrapper:hover .cv-photo-shimmer {
  background-position: 220% 0;
}

/* Badge flotante */
.cv-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: linear-gradient(135deg, var(--cv-violet), var(--cv-rose));
  color: var(--cv-white);
  border-radius: 1rem;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 8px 28px rgba(140,106,201,.42);
  font-family: var(--cv-font-body);
  animation: cv-float 4s ease-in-out infinite;
  z-index: 2;
}
@keyframes cv-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.cv-badge__symbol {
  font-size: 1.1rem;
  opacity: .9;
}
.cv-badge__text {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Números flotantes */
.cv-numbers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cv-num {
  position: absolute;
  font-family: var(--cv-font-display);
  font-weight: 300;
  color: var(--cv-violet);
  opacity: 0;
  animation: cv-numfloat 6s ease-in-out infinite;
  user-select: none;
}
.cv-num--1 { font-size: 2rem;   top: 8%;  left: -28px; animation-delay: 0s; }
.cv-num--2 { font-size: 1.5rem; bottom: 18%; left: -22px; animation-delay: 2s; }
.cv-num--3 { font-size: 2.4rem; top: 30%; right: -30px; animation-delay: 4s; }

@keyframes cv-numfloat {
  0%   { opacity: 0; transform: translateY(10px); }
  20%  { opacity: .55; }
  80%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* ══════════════════════════════════════
   COLUMNA TEXTO
══════════════════════════════════════ */
.cv-text-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Eyebrow */
.cv-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cv-violet);
}
.cv-eyebrow__line {
  flex: 1;
  max-width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, var(--cv-rose), var(--cv-violet));
  border-radius: 1px;
}

/* Headline — frase principal: cada tramo +2px sobre su tamaño anterior */
.cv-headline {
  font-family: var(--cv-font-display);
  font-size: clamp(2.125rem, 4.125vw, 3.125rem); /* era clamp(2rem,4vw,3rem) +2px */
  font-weight: 500;
  line-height: 1.18;
  color: var(--cv-black);
  letter-spacing: -.01em;
}
.cv-headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--cv-violet);
  /* hereda el font-size del padre (+2px ya incluido arriba) */
}
.cv-headline--light {
  display: block;
  font-weight: 300;
  font-style: italic;
  color: var(--cv-text-soft);
  font-size: .84em; /* era .82em → +2px relativo al nuevo base */
}

/* Bloque intro — Roboto 18px */
.cv-block--intro p {
  font-family: var(--cv-font-body);
  font-size: 18px;
  line-height: 1.78;
  color: var(--cv-text-soft);
}
.cv-block--intro p + p {
  margin-top: .9rem;
}
.cv-block--intro strong {
  color: var(--cv-violet);
  font-weight: 600;
}
.cv-block--intro em {
  color: var(--cv-violet-2);
  font-style: italic;
}

/* ── Acordeón ─────────────────────────────────────────────── */
.cv-accordion {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.cv-item {
  background: rgba(201,191,226,.22);
  border: 1px solid rgba(140,106,201,.18);
  border-radius: var(--cv-radius);
  overflow: hidden;
  transition: box-shadow .3s;
}
.cv-item[open] {
  box-shadow: 0 4px 24px rgba(140,106,201,.14);
}

.cv-item__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  user-select: none;
}
.cv-item__summary::-webkit-details-marker { display: none; }

.cv-item__icon {
  color: var(--cv-rose);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform .4s;
}
.cv-item[open] .cv-item__icon {
  transform: rotate(45deg);
  color: var(--cv-violet);
}

.cv-item__title {
  font-family: var(--cv-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--cv-black);
  flex: 1;
}

.cv-item__chevron {
  width: 18px; height: 18px;
  flex-shrink: 0;
  position: relative;
}
.cv-item__chevron::before,
.cv-item__chevron::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 1.5px;
  background: var(--cv-violet);
  border-radius: 1px;
  transition: transform .35s ease;
}
.cv-item__chevron::before { transform: translate(-100%,-50%) rotate(0); }
.cv-item__chevron::after  { transform: translate(0,-50%)    rotate(0); }

.cv-item[open] .cv-item__chevron::before { transform: translate(-100%,-50%) rotate(-45deg); }
.cv-item[open] .cv-item__chevron::after  { transform: translate(0,-50%)    rotate(45deg); }

.cv-item__body {
  padding: 0 1.25rem 1.25rem 3.25rem;
  font-family: var(--cv-font-body);
  font-size: 18px;
  line-height: 1.78;
  color: var(--cv-text-soft);
}
.cv-item__body p + p { margin-top: .75rem; }
.cv-item__body strong {
  color: var(--cv-violet);
  font-weight: 600;
}

/* ── Invitación ───────────────────────────────────────────── */
.cv-invite {
  background: linear-gradient(135deg, rgba(238,170,233,.18), rgba(140,106,201,.14));
  border-left: 3px solid var(--cv-rose);
  border-radius: 0 var(--cv-radius) var(--cv-radius) 0;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
}

.cv-invite__text {
  font-family: var(--cv-font-body);
  font-size: 18px;
  line-height: 1.78;
  color: var(--cv-text-soft);
  margin-bottom: .9rem;
}
.cv-invite__text strong {
  color: var(--cv-violet);
  font-weight: 600;
}

.cv-invite__cta {
  font-family: var(--cv-font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--cv-violet);
  line-height: 1.45;
}

/* ── Divisor inferior ─────────────────────────────────────── */
.cv-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
}
.cv-divider svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* Tablet (≤900px) */
@media (max-width: 900px) {
  .cv-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cv-photo-col {
    order: -1;
  }

  .cv-photo-wrapper {
    width: min(280px, 70vw);
    height: min(340px, 85vw);
  }

  .cv-eyebrow {
    justify-content: center;
  }

  .cv-invite {
    text-align: left;
  }

  .cv-item__summary {
    text-align: left;
  }

  .cv-block--intro {
    text-align: left;
  }
}

/* Móvil (≤520px) */
@media (max-width: 520px) {
  .cv-section {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .cv-photo-wrapper {
    width: min(240px, 78vw);
    height: min(290px, 95vw);
  }

  .cv-badge {
    bottom: -12px;
    right: -8px;
    padding: .5rem .8rem;
  }

  .cv-headline {
    font-size: 1.7rem;
  }

  .cv-num--1,
  .cv-num--2,
  .cv-num--3 {
    display: none; /* evitar desbordamiento en pantallas muy pequeñas */
  }

  .cv-item__body {
    padding-left: 1.25rem;
  }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .cv-photo-ring,
  .cv-photo-frame,
  .cv-badge,
  .cv-num {
    animation: none;
  }
  .cv-photo-img,
  .cv-photo-shimmer {
    transition: none;
  }
}