/*
Theme Name: Despacho Virginia Ramírez
Theme URI: https://example.com
Author: Lizch DE
Author URI: https://example.com
Description: Tema a medida para despacho de abogacía laboral, seguridad social, visados y extranjería. Panel de edición propio en el escritorio de WordPress ("Mi Web Virginia") — sin librería de medios, sin editor de bloques: cada página se edita con campos de texto y URLs de foto, en una sola pantalla.
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: virginia-laboral
*/

/* =========================================================
   DESIGN TOKENS
   Paleta: crema cálido + tinta + burdeos apagado (acento)
   Tipografía: serif elegante para titulares, sans limpia para cuerpo
========================================================= */
:root{
  --color-bg:        #F7F3EC;   /* crema cálido */
  --color-bg-alt:     #EFE8DA;  /* arena, para secciones alternas */
  --color-surface:    #FFFFFF;
  --color-ink:        #211D18;  /* casi negro, cálido */
  --color-ink-soft:   #59524A;  /* texto secundario */
  --color-accent:     #4A331F;  /* marrón café, tomado del logo */
  --color-accent-soft:#6E4E30;
  --color-line:       rgba(33,29,24,0.14);

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --radius: 2px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--color-ink);
}
h1{ font-size:clamp(2.1rem,4vw,3.1rem); font-weight:400; }
h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1.1em; color:var(--color-ink-soft); }

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--color-accent);
  font-weight:600;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.9em 1.6em;
  border:1px solid var(--color-ink);
  border-radius:var(--radius);
  font-size:.92rem;
  font-weight:500;
  background:transparent;
  color:var(--color-ink);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--color-ink); color:var(--color-bg); }
.btn-primary{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:#fff;
}
.btn-primary:hover{ background:var(--color-accent-soft); border-color:var(--color-accent-soft); color:#fff; }

/* =========================================================
   HEADER
========================================================= */
.site-header{
  border-bottom:1px solid var(--color-line);
  background:var(--color-bg);
  position:sticky; top:0; z-index:50;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:22px; padding-bottom:22px;
}
.site-title{
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.01em;
}
.site-title.has-logo{ display:flex; align-items:center; }
.site-title.has-logo img{ max-height:52px; width:auto; }
.site-title small{
  display:block;
  font-family:var(--font-body);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-ink-soft);
  margin-top:2px;
}
.primary-nav ul{ list-style:none; display:flex; gap:34px; margin:0; padding:0; }
.primary-nav a{
  font-size:.92rem;
  padding-bottom:3px;
  border-bottom:1px solid var(--color-ink);
}
.primary-nav a:hover{ color:var(--color-accent); border-color:var(--color-accent); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }

@media (max-width:820px){
  .primary-nav{ display:none; }
  .primary-nav.is-open{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--color-bg); border-bottom:1px solid var(--color-line);
  }
  .primary-nav.is-open ul{ flex-direction:column; gap:0; padding:8px 32px 24px; }
  .primary-nav.is-open li{ padding:12px 0; border-bottom:1px solid var(--color-line); }
  .nav-toggle{ display:block; }
}

/* =========================================================
   HERO
========================================================= */
.hero{ padding:96px 0 90px; }
.hero .container{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero-copy p{ font-size:1.08rem; max-width:44ch; }
.hero-actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-figure{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:280px 280px 8px 8px; /* motivo de arco, herencia de la marca actual */
  background:var(--color-bg-alt);
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .hero{ padding:56px 0 64px; }
  .hero .container{ grid-template-columns:1fr; }
  .hero-figure{ max-width:340px; margin:0 auto; order:-1; }
}

/* =========================================================
   SECTION GENERIC
========================================================= */
.section{ padding:80px 0; }
.section-alt{ background:var(--color-bg-alt); }
.section-head{ max-width:640px; margin-bottom:44px; }
.hr{ border:none; border-top:1px solid var(--color-line); margin:0; }

/* Sobre mí */
.about-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:56px;
  align-items:start;
}
.about-grid .prose p{ font-size:1.02rem; }
.about-photo{
  margin-top:18px;
  border-radius:220px 220px 8px 8px;
  overflow:hidden;
  aspect-ratio:4/5;
  max-width:280px;
  background:var(--color-bg-alt);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.services-banner{
  margin-bottom:36px;
  border-radius:var(--radius);
  overflow:hidden;
  max-height:360px;
}
.services-banner img{ width:100%; height:100%; object-fit:cover; max-height:360px; }
.contact-photo{
  margin-bottom:22px;
  border-radius:180px 180px 8px 8px;
  overflow:hidden;
  aspect-ratio:1/1;
  max-width:200px;
  background:var(--color-bg-alt);
}
.contact-photo img{ width:100%; height:100%; object-fit:cover; }
.about-credentials{
  border-top:1px solid var(--color-line);
  padding-top:20px;
  margin-top:24px;
  font-size:.88rem;
  color:var(--color-ink-soft);
}
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

/* Servicios — tarjetas con foto, texto y botón a Contacto */
.services-intro{ max-width:70ch; margin-bottom:36px; }
.services-intro p:last-child{ margin-bottom:0; }
.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.service-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.service-card-photo{ aspect-ratio:16/9; background:var(--color-bg-alt); overflow:hidden; }
.service-card-photo img{ width:100%; height:100%; object-fit:cover; }
.service-card-body{ padding:30px 30px 32px; display:flex; flex-direction:column; flex:1; }
.service-card-body h3{ margin-bottom:.55em; }
.service-card-body p{ font-size:1rem; line-height:1.65; flex:1; }
.service-card-body .btn{ align-self:flex-start; margin-top:6px; }
.service-card-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.service-card-ctas .btn{ margin-top:0; }
.btn-text{
  border:none;
  padding:0;
  background:none;
  color:var(--color-accent);
  font-weight:600;
  text-decoration:underline;
}
.btn-text:hover{ background:none; color:var(--color-accent-soft); }
@media (max-width:820px){ .services-grid{ grid-template-columns:1fr; } }

/* Artículos */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.article-card{ border-top:1px solid var(--color-line); padding-top:18px; }
.article-card .eyebrow{ display:block; margin-bottom:10px; }
.article-card h3{ margin-bottom:.3em; }
.article-card a.stretched{ display:block; }
.article-card p{ font-size:.94rem; }
@media (max-width:900px){ .articles-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .articles-grid{ grid-template-columns:1fr; } }

/* Reseñas */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.review-card{
  margin:0;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.review-stars{ color:var(--color-accent); letter-spacing:2px; font-size:.95rem; }
.review-card blockquote{
  margin:0; padding:0; border:none;
  font-family:var(--font-display);
  font-size:1.08rem;
  line-height:1.5;
  color:var(--color-ink);
}
.review-card figcaption{ display:flex; flex-direction:column; font-size:.86rem; color:var(--color-ink-soft); margin-top:auto; }
.review-card figcaption strong{ color:var(--color-ink); font-family:var(--font-body); font-weight:600; }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .reviews-grid{ grid-template-columns:1fr; } }

/* Visados — foto + bio + lista de servicios adicionales */
.visados-team{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:56px;
  align-items:center;
}
.visados-photo-col{ max-width:280px; }
.visados-text-col{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.visados-text-col p{ margin:0; }
.visados-list{ list-style:none; margin:0 0 1.4em; padding:0; display:grid; gap:10px; }
.visados-list li{
  padding-left:26px;
  position:relative;
  color:var(--color-ink);
  font-size:.98rem;
}
.visados-list li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--color-accent);
  font-weight:600;
}
.visados-areas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.visados-area-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.visados-area-card h3{ margin-bottom:0; }
.visados-area-card p{ font-size:.95rem; flex:1; }
.visados-area-card .btn{ align-self:flex-start; margin-top:4px; }
@media (max-width:900px){ .visados-areas{ grid-template-columns:1fr; } }
@media (max-width:820px){ .visados-team{ grid-template-columns:1fr; } .visados-photo-col{ max-width:260px; } }

/* Single post / page prose */
.prose{ max-width:70ch; }
.prose h2{ margin-top:1.4em; }
.page-hero{ padding:64px 0 20px; }
.page-hero .eyebrow{ margin-bottom:10px; display:block; }

/* Contacto */
.contact-wrap{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
}
.contact-info h3{ margin-bottom:.3em; }
.contact-info .addr{ margin-top:26px; font-size:.94rem; color:var(--color-ink-soft); }
.contact-info .addr p{ margin:0 0 .3em; }

.form-field{ margin-bottom:18px; }
.form-field label{
  display:block; font-size:.82rem; letter-spacing:.03em;
  color:var(--color-ink-soft); margin-bottom:6px;
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  border:1px solid var(--color-line);
  background:var(--color-surface);
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:.96rem;
  border-radius:var(--radius);
}
.form-field textarea{ min-height:130px; resize:vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{ outline:2px solid var(--color-accent); outline-offset:1px; }
#vl-form-status{ margin-top:14px; font-size:.9rem; }
#vl-form-status[data-state="ok"]{ color:#3d6b3f; }
#vl-form-status[data-state="err"]{ color:var(--color-accent); }
@media (max-width:820px){ .contact-wrap{ grid-template-columns:1fr; } }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ border-top:1px solid var(--color-line); padding:40px 0; }
.site-footer .container{
  display:flex; flex-wrap:wrap; gap:20px;
  justify-content:space-between; font-size:.86rem; color:var(--color-ink-soft);
}
.site-footer strong{ color:var(--color-ink); }

/* Accessibility */
a:focus-visible, button:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }